[Web] 미디어 쿼리로 반응형 웹사이트 구현

미디어 쿼리는 접속자의 기기에 따라 웹사이트가 반응하도록 하는 역할을 가집니다. 기기의 특성이란 화면 해상도, 뷰포트의 너비 등이 있습니다. 웹브라우징을 지원하는 모바일 기기는 너무나 다양합니다. 따라서 뷰포트의 너비에 따라 컨텐츠를 유연히 배치할 필요가 생깁니다. 미디어 쿼리는 CSS로 구현할 수 있습니다. 미디어 쿼리의 문법 구조는 이렇습니다. 조건이 만족되면 스타일이 적용되는 식입니다.

가장 간단한 구문

@media (*조건*) {
  *스타일*
}

조건문과 스타일

@media (min-width: 800px) {
  .something {
    color: red;
  }
}

조건문의 종류

width : 화면 너비

height : 화면 높이

device-width : 출력장치 너비

device-height : 출력장치 높이

orientation : 화면 방향 모드

device-aspect-ratio : 출력장치의 가로 세로 비율

color : 출력 장치의 구성 요소 당 비트 수

@media all and (color) { … } // 출력 장치가 컬러를 지원하면
@media all and (color:0) { … } // 출력 장치가 컬러가 아니면
@media all and (color:8) { … } // 출력 장치가 8비트 색상이면
@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면
@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

color-index : 표현할 수 있는 색상의 개수. 색인이 없으면 0으로 처리.

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용시 실행
@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용 안하면 실행
@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원 시 실행
@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원 시 실행

resolution : 출력 장치의 해상도

@media all and (resolution:100dpi) { … } // 1인치당 100개의 사각형 화소를 제공시 실행
@media all and (min-resolution:100dpi) { … } // 1인치당 100개 이상의 화소를 제공시 실행

all : 모든 미디어. 따로 미디어 타입을 지정하지 않으면 all 이 기본값입니다.

@media (min-width: 700px) {background-color: yellow;}

// 이러면 all이 기본 값

미디어쿼리 장치 너비 참고

• 320 ~ 480px 모바일
• 481 ~ 768px 태블릿
• 769 ~ 1024px 노트북
• 1025 ~ 1200px 데스크탑
• 1201px ~(이상) 데스크탑 및 TV 등