반응형 웹 - 미디어 쿼리 2

반응형 웹 - 미디어 쿼리 2

1. 미디어 쿼리의 조건

• 미디어 쿼리는 특정 조건에 따라 적용할 CSS를 다르게 정의하므로 조건을 어떻게 체크할 것인지가 중요합니다.
• 미디어 쿼리에서 사용하는 조건에는 주로 화면 크기와 관련된 것들이 많습니다. 화면 크기를 체크해 크기에 따라 다른 CSS가 적용되도록 하는 것입니다.

 

1) 웹 문서의 가로 너비와 세로 높이

• 실제 웹 문서의 내용이 화면에 보이는 영역을 '뷰포트'라고 하는데 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있습니다. 이때 height(높이) 값은 미디어에 따라 달라지기 때문에 주의해야 합니다.
• screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 하며 print에서는 한 페이지 높이를 기준으로 합니다.

 

• 가로 너비와 세로 높이를 지정하기 위해 사용하는 속성

가로, 세로 값 설정하는 속성	설 명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	최소 너비, 최소 높이
max-width, max-height	최대 너비, 최대 높이

 

• 뷰포트의 너비가 600px 이상이고 959px 이하일 때 적용할 CSS 구문

@media all (min-width:600px) and (max-width:959px) {
       ...
}

 

2) 단말기의 가로 너비와 세로 높이

• 웹 문서의 가로 너비와 세로 높이는 단말기에 따라서도 달라집니다. 대부분의 단말기들은 단말기 해상도와 실제 브라우저의 너비가 다릅니다.
• 예를 들어 아이폰4의 해상도는 640x960이지만 아이폰4의 사파리 브라우저의 너비는 320x480입니다.
• 단말기 크기와 뷰포트 크기를 하나로 통일해 사용하기 위해 뷰포트를 지정할 때 width="device-width"로 놓고 사용합니다.

 

• 단말기 너비나 높이를 고려해 미디어 쿼리를 작성해야 할 때 사용하는 속성

단말기의 가로, 세로 값 설정하는 속성	설 명
device-width, device-height	단말기의 가로 너비, 세로 높이
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이

 

• 단말기 너비가 320px 이상이고 높이가 480px 이상일 떄 실행할 미디어 쿼리

@media all and (min-device-width:320px) and (min-device-height:480px) {
       ...
}

 

3) 화면 회전

• 스마트폰이나 태블릿에서는 기기를 세로나 가로로 보는데 그때마다 웹 사이트의 화면 방향이 달라집니다. 미디어 쿼리를 작성할 경우, orientation 속성을 사용하면 화면 방향을 체크할 수 있습니다.
• orientation 속성은 portrait 값과 landscape 값을 사용할 수 있는데 풍경화처럼 가로(width 값)가 넓으면 landscape이고 초상화처럼 세로(height 값)가 길면 portrait입니다.

 

속 성	설 명
orientation : portrait	단말기 세로 방향
orientation : landscape	단말기 가로 방향

 

• 회전 방향에 따라 색이 바뀌는 미디어 쿼리 구문

<style>
     body {background-color: #999;}

     @media screen and (orientation:landscape){
           body {background-color: blue}
     }
     @media screen and (orientation:portrait){
           body {background-color: red}
     }
</style>

 

4) 화면 비율, 단말기의 물리적 화면 비율

• 화면 비율은 뷰포트, 즉 단말기의 브라우저 화면의 너비 값(width)을 높이 값(height)으로 나눈 것으로 숫자 값이나 계산식을 사용할 수 있습니다.

 

속 성	설 명
aspect-ratio	화면 비율(width 값 / height 값)
min-aspect-ratio	최소 화면 비율
max-aspect-ratio	최대 화면 비율

 

• 단말기의 화면 비율은 단말기의 너비 값(device-width)과 높이 값(device-height)을 이용해 계산합니다.

속 성	설 명
device-aspect-ratio	단말기의 화면 비율(width 값 / height 값)
min-device-aspect-ratio	단말기 최소 화면 비율
max-device-aspect-ratio	단말기 최대 화면 비율

 

• 화면 비율이 16:9일 때와 16:9 이상일 때, 16:9이하 일 때로 나누어 실행할 미디어 쿼리

@media all and (device-aspect-ratio : 16/9) {
      ...
}
@media all and (min-device-aspect-ratio : 16/9) {
      ...
}
@media all and (max-device-aspect-ratio : 16/9) {
      ...
}

 

5) 색상당 비트 수

• 단말기에서 사용하는 최대 색상 비트 수를 미디어 쿼리 조건으로 사용할 수도 있습니다.
• color:1이면 최대 2가지(2¹) 색상을 나타낼 수 있고 color:3이면 비트 3개로 표현 할 수 있는 최대 색상인 8가지(2³)를 표현할 수 있습니다. 미디어가 컬러 색상을 지원하지 않는다면 color:0으로 지정합니다.

 

사용 예)
/*컬러를 지원하면 실행*/
@media all and (color) {
      ...
}

/*컬러를 지원하지 않으면 실행*/
@media all and (color:0) {
      ...
}

/*8비트 색상이라면 실행*/
@media all and (color:3) {
      ...
}

/*8비트 이하 색상이라면 실행*/
@media all and (min-color:3) {
      ...
}

 

6. 미디어 쿼리 중단점 만들기

• 미디어 쿼리를 작성할 때 서로 다른 CSS를 적용할 화면 크기를 중단점(break point)이라고 합니다. 이 중단점을 어떻게 지정하는가에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데 대부분 기기의 화면 크기를 기준으로 합니다.
• 하지만 시중의 모든 기기들을 반영할 수는 없기 때문에 모바일 기기와 태블릿, 데스크톱 정도로만 구분하는 것이 좋습니다.
• 처리 속도나 화면 크기등에서 다른 기기보다 모바일 기기의 제약 조건이 더 많기 때문에 모바일 기기의 레이아웃을 기본으로 해 CSS를 만듭니다.
• 모바일 기기의 레이아웃을 기본으로 해 CSS를 만든 후 좀 더 사양이 훌륭하고 화며이 큰 태블릿과 데스크톱에 맞추어 더 많은 기능과 스타일을 추가합니다. 이렇게 모바일을 먼저 고려해 미디어 쿼리를 작성하는 것을 '모바일 퍼스트(mobile first)'라고 합니다.

• 미디어 쿼리를 작성할 때 주어진 조건에 따라 여러 중단점을 만들 수 있지만 모바일과 태블릿, 데스크톱을 크게 구분하는 중단점은 다음과 같습니다. (하지만 이 중단점도 개발자나 작업 조건에 따라 달라질 수 있습니다.)

1. 스마트폰 - 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본적으로 CSS로 작성합니다. 만약 스마트폰의 방향까지 고려해 제작한다면 세로 (portrait) 방향일 때 min-width를 320px, 가로(landscape) 방향일 때 min-width를 480px로 지정합니다.
2. 태블릿 - 화면 크기가 768px 이상이면 태블릿으로 지정합니다. 테블릿 가로 값은 데스크톱과 동일하게 1024px 이상으로 지정합니다.
3. 데스크톱 - 화면 크기가 1024px 이상이면 데스크톱으로 지정합니다.

/* 스마트폰 세로 */
@media only screen and (min-width : 320px) {
      ...
}

/* 스마트폰 가로 */
@media only screen and (min-width : 480px) {
      ...
}

/* 태블릿 세로 */
@media only screen and (min-width : 768px) {
      ...
}

/* 태블릿 가로 / 데스크톱 */
@media only screen and (min-width : 1024px) {
      ...
}

참고 : HTML5 + CSS3 웹 표준의 정석