반응형 사이트 만들기 - mediaquery

▶ 특정 브라우저 폭을 지정해서 css 구문을 입력하면 해당 브라우저 폭에서는 미디어쿼리 안쪽에 쓰여진 구문이 기존의 css 구문을 덮어쓰게 됨

 

- 속성값이 같다면 생략 가능

- 속성값 추가 가능

 

▶ 미디어쿼리 구간 안에서 전체 너비값(width)은 총 합이 100%가 되도록 작성

-> 고정 px을 %로 바꾸기

 

▶ 원본의 css 구문(태그 경로)을 미디어쿼리에서도 동일하게 써야한다.

#header .inner #gnb

 

 

▶ 미디어쿼리 구문 쓰는 방법

 

#header .inner #gnb { }    -> 원본 css 구문

@media screen and (max-width:700px){

    header .inner #gnb{ }   -> 덮어쓸 css 구문

}

 

풀사이즈 웹

태블릿 1180px

모바일 540px

최소 사이즈 350px