CSS - 반응형 디자인과 미디어쿼리

반응형 웹 디자인(Responsive Web Design)

화면 크기에 따라 화면 요소들을 다르게 보여주도록 웹 페이지를 디자인하는 것을 말한다. 쉽게 말해 디바이스 종류에 따라 웹 페이지의 크기가 자동적으로 재조정되는 것이다. 하나의 HTML 소스 만으로 사용자의 특정 장치에 최적화된 환경을 제공한다.

 

미디어 쿼리(Media Query)

CSS 모듈 중 하나로, 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해주는 기능으로 반응형 웹 디자인의 핵심이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있다. 또한, 마우스가 아닌 터치스크린을 사용하는지와 같이 장치를 탐지하는 데도 사용할 수 있다.

 

연산자

and, not, only, ","(쉼표)가 있다. 이 중 쉼표는 논리 or 연산자처럼 동작한다.

 

미디어 유형 종류

all	모든 장치에 적합
print	인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서
screen	컴퓨터, 태블릿 PC, 스마트폰 등의 화면
speech	음성 합성 장치
이전에 tty, tv, projection, handheld, barille, embossed, aural 등이 있었으나 Media Queries 4에서 제거되었으므로 사용해서는 안된다.

 

너비와 높이

@media screen and (max-width: 600px) {
    body {
        color: red;
    }
}

위 코드는 뷰포트가 600px 이하인 경우 본문 색상을 빨간색으로 변경한다. max-width 외에, width, height, max-height 를 적용할 수 있다.

 

방향성

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

orientation은 세로 모드인지 가로 모드인지 검사한다. 위 코드는 가로 모드일 때 본문 색상을 변경한다.

 

포인팅 장치의 사용

사용자가 요소 위에 마우스 커서를 올릴 수 있는 능력을 가진 조건인지를 확인할 수 있는 hover 미디어 기능이 Media Query 4에서 추가되었다. 사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있다. 포인팅 장치를 사용할 수 있는 사용자의 경우, 링크에 마우스를 올리는 기능을 이용하게 할 수 있다.

@media (hover: hover) {
    body {
        color: purple;
    }
}

마찬가지로 pointer 미디어 기능도 Media Query 4에서 추가되었는데, 이는 세 가지 - none, fine, coarse - 속성 값을 가질 수 있다.

• fine: 마우스나 트랙패드와 같이 사용자가 작은 영역을 포인팅 할  수 있음
• coarse: 터치스크린상의 손가락
• none: 포인팅 장치가 없음을 의미