미디어 쿼리

상대 크기를 사용하거나 기기의 화면 크기에 맞추어 요소의 크기를 가변화하는 것도 반응형 디자인에 필요하지만, 단지 요소의 크기만을 변화시키는 것이 아니라 방문자가 사용하는 기기에 웹 페이지를 맞추기 위해서는 요소를 재구성할 필요가 있다. 이를 위해 미디어 쿼리를 사용한다.

미디어 쿼리를 통해 CSS는 방문자의 화면 크기를 감지하고 화면의 크기에 따라 요소에 다른 스타일을 적용할 수 있다.

CSS 파일 내에서 미디어 쿼리는 다음과 같이 작성한다. 크게 나누면 @media로 미디어 쿼리를 선언하고 조건을 지정하며 코드 블록 안에 실제로 처리할 CSS 코드를 작성한다.

@media only screen and (min-width: 40rem) {
  html {
    font-size: 20px;
  }
}

별도로 작성된 CSS 파일을 불러오려면 다음과 같이 <link>media 속성으로 조건을 추가한다.

<link rel="stylesheet" media="only screen and (min-width: 40rem)" href="example.css">

또는 CSS 파일 안에서 @import를 사용할 경우 다음과 같이 불러올 수 있다.

@import url(example.css) only screen and (min-width: 40rem);

미디어 쿼리의 조건

미디어 쿼리는 조건(들)의 논리 계산이 참이 되면 실행되는데, 조건을 작성할 때는 먼저 미디어 쿼리를 적용할 미디어 유형을 지정하고 그 다음 조건을 작성한다. 조건에는 not 또는 only 키워드를 적용할 수 있으며, and,로 조건들을 연결할 수 있다.

  • only: CSS 스펙에 따르면 미디어 쿼리를 지원하지 않는 브라우저에 스타일시트를 숨길 때 사용한다.
  • not: 논리 부정과 같이 작성한 조건에 부합하지 않아야 참이 된다.
  • and: 논리곱으로서 앞 조건과 뒤 조건이 모두 참이어야 참인 결과가 된다.
  • ,: 논리합으로서 앞 조건과 뒤 조건 중 하나만 참이면 참인 결과가 된다.

미디어 쿼리를 지원하지 않는 브라우저가 <link rel="stylesheet" media="only screen and (min-width: 40rem)" href="example.css">라는 마크업에 따라 스타일시트를 불러오려고 하면 screen(min-width: 40rem) 조건의 진리치가 거짓이 되므로 실제로 media="only"라는 미디어 조건이 만들어지는데, 이러한 미디어 유형은 존재하지 않으므로 브라우저는 example.css를 불러오지 않고 무시하기로 결정하고, 스타일시트 파일을 다운로드하지 않는다. 단, 브라우저가 미디어 쿼리 스펙을 어떻게 구현했는가에 따라 스타일시트를 사용하지 않더라도 다운로드하는 브라우저가 있을 수 있다.

미디어 유형

CSS 3의 현재 미디어 쿼리[미디어 쿼리 3]에서는 CSS 2.1에서 정의한 all(모든 유형), screen(컴퓨터 및 휴대폰 화면), print(인쇄물), projection(프로젝터), aural(스크린 리더), braille(점자 표시 장치), embossed(점자 프린터) 등 10개의 미디어 유형을 사용하고 있는데, 미디어 쿼리 4에서는 현재 all, print, screen, speech(스크린 리더) 4개의 미디어 유형만 정의되어 있으며 다른 유형들은 더 이상 사용되지 않는다.

미디어 유형은 문법에 의해 @media로 미디어 쿼리를 선언한 다음에 오는 첫번째 조건으로 지정되어야 하며, 미디어 유형을 다른 조건보다 나중에 지정하면 미디어 유형을 지정한 조건은 거짓으로 판단된다.

미디어 특징

다음과 같은 조건들을 미디어 쿼리를 불러오려는 기기의 특징을 조건을 검사하는 데 활용한다. CSS의 속성과 같이 이름: 값 형식을 사용하며, orientation, scan, grid를 제외한 수치를 값으로 입력할 수 있는 조건들에는 '크거나 같음', '작거나 같음'을 표현하기 위해 이름에 min-, max- 접두사를 붙일 수 있다.

  • width, height: 페이지가 렌더링되는 대상 디스플레이 또는 뷰포트의 너비, 높이이다. 상대 단위를 사용하는 경우 기본 font-size의 값에 따른다.
  • device-width, device-height: 대상 디스플레이의 또는 화면의 너비, 높이이다. 상대 단위를 사용하는 경우 기본 font-size의 값에 따른다.
  • orientation: 대상 디스플레이의 방향으로 portrait, landscape 두 값 중 하나를 입력하는데, heightwidth보다 크거나 같을 경우 portrait이며, 그렇지 않을 경우 landscape이다.
  • aspect-ratio: 대상 디스플레이 또는 뷰포트의 width 대비 height의 비율로 정의되는 종횡비이다. 16/91280/720같은 값을 사용한다.
  • device-aspect-ratio: 대상 디스플레이의 또는 화면의 width 대비 height의 비율로 정의되는 종횡비이다. 16/91280/720같은 값을 사용한다.
  • color: 대상 디스플레이의 색상 당 비트 수이다. min-color: 16은 적어도 216개의 색상을 가진 디스플레이를 대상으로 함을 나타낸다. 컬러를 지원하지 않는 디스플레이를 대상으로 한다면 값으로 0을 지정한다.
  • color-index: 대상 디스플레이가 사용하는 색 참조표의 색상 갯수이다. min-color-index: 256은 색 참조표에 적어도 256개의 색상이 있는 디스플레이를 대상으로 함을 나타낸다. 컬러를 지원하지 않는 디스플레이를 대상으로 한다면 값으로 0을 지정한다.
  • monochrome: 단색 프레임 버퍼의 픽셀당 비트 수를 나타낸다. 디스플레이가 단색이 아니라면 값으로 0을 지정한다.
  • resolution: 대상 디스플레이의 픽셀 밀도를 나타낸다. 단위로는 dpi(인치당 도트 수)나 dpcm(센티미터당 도트 수)를 사용한다.
  • scan: tv 미디어 유형의 주사 방식을 나타낸다. progressiveinterlace를 값으로 사용한다.
  • grid: 대상 디스플레이가 tty 미디어 유형과 같이 단일한 고정 글꼴을 사용하는 그리드 방식인 경우 값을 1로 지정하고, 다른 경우 값을 0으로 지정한다.

반응형 디자인에서는 주로 width, device-widthmin-, max- 접두사를 활용하여 화면의 너비가 조건에 부합하는지를 검사한다.

중단점

너비를 기준으로 서로 다른 스타일을 적용하려 할 때, 페이지가 적용된 스타일을 유지하지 못하는 지점이 있는데 이를 중단점(brakepoint)이라고 한다.

너비에 따라 스마트폰, 태블릿, 컴퓨터용 스타일을 다르게 적용하려고 할 때, 같은 분류 안에서도 제품들의 화면 크기가 서로 다르다. Sass Guidelines에서 말하듯이 "특히 몇몇 폰은 이제 태블릿보다 크고, 몇몇 태블릿은 일부 작은 스크린의 컴퓨터보다 크"다. 따라서 중단점의 이름을 지어야 할 경우 어떤 장치를 대상으로 한다는 것보다는 크고 작음을 나타내는 편이 낫다.

results matching ""

    No results matching ""