[부스트코스] 비전공자를 위한 HTML/CSS - 7

June·2021년 2월 9일

부스트코스 - 비전공자를 위한 HTML/CSS

목록 보기

8/8

8.미디어쿼리

미디어쿼리 소개

미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다.

미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다.
미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다.
이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다.

미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주 제한적이었기 때문에 제작자 입장에서는 대중적인 미디어 범위에서만 잘 보이도록 사이트를 제작하면 반응형이 아니더라도 충분했습니다.

하지만 웹이 급격이 발전하면서 대응해야 하는 미디어의 폭이 상당히 늘어났습니다.
이런 필요성에 따라 W3C는 CSS2의 미디어 타입을 확장하여, CSS3 미디어쿼리를 발표합니다. 이 미디어 쿼리로 인해 웹 사이트를 제작함에 있어 이전의 정적인 고정 레이아웃 웹 사이트에서 동적으로 반응하는 반응형 웹 사이트로 패러다임이 새롭게 변화하였습니다.

미디어 타입 & 미디어 특성

@media(at media)

미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일합니다.

@media mediaqueries { /* style rules  */ }

@media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻입니다. 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어갑니다.

미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됩니다. 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있습니다.

미디어 타입

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

우리가 알아야 할 타입은 all, print, screen 정도입니다. 그 중에서도 screen이 거의 대부분입니다. 화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은 전부 여기에 해당이 됩니다. print 타입도 간혹 사용이 됩니다. 실습할 때 다룹니다.
all 타입은 모든 미디어에 적용되는 타입입니다. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않습니다.

미디어 특성

width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
미디어 특성 역시 우리가 알아야 할 특성은 width와 orientation 정도입니다.
width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)
orientation은 미디어가 세로모드인지 가로모드인지를 구분합니다.
미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 height가 width보다 같거나 크면 세로모드 반대인 경우에는 가로모드라고 해석합니다. 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭이 됩니다.

Syntax - 1

미디어 쿼리 Syntax

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;

위 코드는 CSS3 미디어 쿼리 표준 명세에 나와 있는 Syntax 부분입니다. 우리가 알아야 할 부분만 적어놓았습니다.

참고로 Syntax는 전부 이해할 필요는 없지만 일부 기호는 알아두면 좋습니다.

위 Syntax를 요약하면

media_query_list
: 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다.

media_query

: A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다. 미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있습니다.
미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있습니다.
: B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.(미디어 타입이 명시되지 않으면 all로 간주합니다.) 미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.

expression
: 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어집니다. 이름과 값은 : 기호로 연결합니다.
또, 값이 없이 특성 이름만으로도 작성할 수 있다.

min-/max- 접두사

미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있습니다.
실제로 반응형 사이트를 제작할 때는 보통 접두사를 붙여서 사용합니다. 접두사를 붙이지 않고 사용하는 경우 대부분 효율적이지 못하기 때문입니다. 예를 들어 대부분의 반응형 사이트는 width 특성을 이용하는데, 접두사 없이 width: 00px 이라고 하게 선언하면 정확히 뷰포트의 크기가 00px 에서만 적용되기 때문에, 다양한 기기들을 대응하기 힘듭니다.

예제 코드

미디어 쿼리 선언 방법

실습 1

실습 1. 디스플레이 크기에 따른 body요소의 background-color 변경

width 미디어 특성을 이용해서 뷰포트 가로 크기에 따라 배경 색상이 변경되는 예제를 만들어봅니다.

@media (max-width: 767px) {
	body { background-color: gold; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (min-width: 1025px) {
	body { background-color: lightpink; }
}

위 코드의 경우, 3개의 조건을 만족하기 위해 3개의 미디어 쿼리를 작성했습니다.
위 코드도 우리가 의도한 대로 정상적으로 잘 동작하지만, 1개의 조건을 기본 body 요소의 배경 색상으로 지정해놓게되면 다른 2개의 미디어 쿼리만 이용해도 가능합니다.

어떤 조건을 기본으로 정할지는 작성하는 사이트가 모바일 사이트인지, 데스크탑 사이트인지를 먼저 구분해야 합니다. 모바일 중심의 사이트라면(모바일 first) 모바일에 해당하는 조건의 배경 색상을 기본으로 선언하면 되고, 데스크탑 중심의 사이트라면(데스크탑 first) 데스크탑에 해당하는 조건의 배경 색상을 기본으로 선언해놓으면 됩니다. 만들어진 미디어 쿼리를 수정해서, 모바일 first인 경우 또 데스크탑 first인 경우대로 한번씩 작성을 해보겠습니다.

- mobile first

/* mobile first*/
body { background-color: gold; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (min-width: 1025px) {
	body { background-color: lightpink; }
}

- desktop first

/* desktop first*/
body { background-color: lightpink; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (max-width: 767px) {
	body { background-color: gold; }
}

실습 2. 웹 페이지를 인쇄하는 경우의 스타일 추가

미디어 타입 print를 이용하면, 인쇄될 경우에 적용되는 스타일을 추가할 수 있습니다. 먼저 앵커 요소의 url 을 텍스트 뒤에 붙여서 나타나게 하고, 링크임을 표시해주는 밑줄도 제거를 하겠습니다.

웹 페이지를 인쇄할 경우에는 앵커 요소가 가리키는 url을 문서에 같이 출력해주는게 내용을 이해하는데 훨씬 좋습니다. 실제 인쇄를 하지 않더라도 브라우저에서 제공하는 인쇄 미리보기 기능을 이용하면 화면으로 확인이 가능합니다.

@media print {
	a { text-decoration: none; }
	a:after { display: inline; content: '(' attr(href) ')'; }
}

추가. Viewport의 이해

스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면서
모바일 웹 제작에 대한 이해가 아주 중요해졌습니다. 뷰포트는 미디어 쿼리 수업의 범위에서 벗어나기에 수업 영상에서 다루지 않았지만, 모바일 웹 사이트를 제작하기 위해 반드시 이해하고 있어야 하는 개념입니다.

스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에 모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었습니다.

그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했습니다. (기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px 입니다.)

여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와
브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 생기게 됩니다. 기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면 가로 스크롤 없이 딱 화면에 맞춰 나옵니다. 그렇게 되면 스크롤 하지 않아도 내용이 다 보여지는 장점이 있지만 글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어집니다.

그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서 뷰포트의 크기와 스케일을 조정할 수 있게 했습니다.

뷰포트 설정

뷰포트를 설정하는 태그는 <meta> 태그로 <head> 태그에 위치해야 합니다. name 속성에 "viewport"라고 선언하며 content 속성에 뷰포트를 설정하는 내용이 들어갑니다.

<meta name="viewport" content=" 뷰포트의 설정 값" >

content에는 몇 가지 설정을 할 수 있습니다.

대부분의 모바일 웹 사이트의 뷰포트 설정은 아래와 같습니다. 기타 다른 설정은 필요에 따라 하시면 됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

June

이전 포스트

[부스트코스] 비전공자를 위한 HTML/CSS - 7