CSS 미디어 쿼리를 이해하고 이에 따라 CSS 파일을 어떻게 구조화 하는 것이 좋은지 알아보겠습니다. 모든 미디어 타입은 특징을 가지고 있습니다. 우리는 브라우저에 미디어의 특징을 물어볼 수가 있는데 CSS3 미디어 쿼리가 그 역할을 합니다. 미디어 타입에 대한 더 자세한 내용은 W3C 문서를 확인해 주세요.
1
CSS3 미디어 쿼리의 뜻을 알아보겠습니다.
- orientation: 화면 방향을 의미합니다. 'landscape'는 가로방향일 때 이 스타일을 적용합니다.
- color: 컬러 화면에 이 스타일을 적용합니다.
- monochrome: 미디어가 흑백일 때 이 스타일을 적용합니다.
- print: 프린트 시 이 스타일을 사용합니다.
2
CSS 를 구조화 하세요. CSS 내용을 위와 같이 나눕니다. 크게 공통적인 영역, 데스크톱을 위한 영역, 모바일을 위한 영역으로 구분하면 좋습니다. 480픽셀을 기준으로 한 이유는 스마트폰의 가로 방향 화면(landscape)의 해상도가 주로 480이기 때문입니다.
