Chapter 03 미디어 쿼리와 뷰포트

Do it! 반응형 웹 페이지 만들기 2022. 12. 1. 12:30

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리

미디어 쿼리(Media Queries)는 사실 새로운 기술이 아닙니다. 이미 오래 전에 미디어 타입이라는 이름으로 등장한 적이 있는데, 미디어 타입은 말 그대로 미디어의 종류만 감지하기 때문에 기기의 세부적인 사항들은 감지할 수가 없었습니다. 또한 예전에는 기기의 종류가 다양하지 않아 사용성에도 의구심을 갖는 사람들이 많아 거의 사용하지 않았던 기술이었죠.

하지만 CSS3가 등장하면서 이 미디어 타입이라는 기술은 '미디어 쿼리'라는 이름으로 바뀌었고 기기의 종류뿐만 아니라 해상도, 비트 수, 가로, 세로 여부 등 세밀한 부분까지 감지할 수 있는 기술이 탑재되면서 반응형 웹의 시작과 함께 웹 개발의 새로운 지평을 열고 있다는 찬사를 받고 있습니다.

미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있습니다.

이 미디어 쿼리를 제대로 사용하려면 기초적인 사항들을 정확히 이해하고 있어야 합니다. 이제부터 미디어 쿼리의 기본 문법과 적용 방식에 대해 알아보겠습니다.

미디어 쿼리의 기본 문법

미디어 쿼리를 작성할 때는 기본적인 순서와 규칙을 따라야 합니다. 필요에 따라 미디어 유형과 and 또는 ,콤마 논리 연산자로 조건을 적용할 수 있습니다.

@media [only 또는 not] [미디어 유형] [and 또는 ,콤마] (조건문) {실행문}

미디어 쿼리 구문은 대·소문자를 구분하지 않습니다.

@media

미디어 쿼리 문법의 시작을 알리는 부분입니다.

[only 또는 not]

only 키워드는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드입니다.

not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드입니다. 예를 들어 'not tv'일 경우 tv를 제외한 모든 미디어 유형에만 적용합니다.

인터넷 익스플로러 6, 7, 8 버전에서는 미디어 쿼리를 지원하지 않기 때문에 only 키워드는 작성하지 않습니다.

미디어 유형

미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하는 것이므로 @media 속성 다음에 미디어 유형을 알려줘야 합니다. 미디어 유형은 다음과 같습니다. 미디어 유형은 생략이 가능하며 생략 시에는 all 키워드처럼 작동합니다.

미디어 유형

기기명	설명
all	모든 장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고 다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

handheld는 소형 기기라는 의미가 있지만 스마트 기기는 screen을 사용합니다.

[and 또는,콤마]

and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다. ,콤마는 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는 것을 해석하라는 의미입니다. and 또는 ,콤마 선언 역시 생략할 수 있습니다.

@media A and B{실행문}
@media A , B{실행문}

(조건문)

(조건문)은 조건문이 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다. (조건문)은 and나 콤마 기호를 이용하여 두 가지 이상 작성할 수 있으며 생략할 수 있습니다.

(조건문)에 들어올 수 있는 조건문은 다음 표를 참고하세요.

@media (min-width:320px){실행문}
가로 너비가 320px 이상일 때 실행문을 실행합니다.
@media (min-width:320px) and (max-width:768px){실행문}
가로 너비가 320px 이상이고 768px 이하일 때 실행문을 실행합니다.

조건문	설명	조건값	min/max 사용 여부
width	웹 페이지의 가로 너빗값	width 속성에서 사용할 수 있는 모든 속성값	사용함
height	웹 페이지의 세로 높잇값
device-width	기기의 가로 너빗값
device-height	기기의 세로 높잇값
orientation	기기의 화면 방향	portrait(세로) landscape(가로)	사용 안 함
aspect-ratio	화면 비율	브라우저 화면 비율(1), 브라우저 종횡비(16/9), 브라우저 해상도(1280/720),	사용함
device-aspect-ratio	단말기의 화면 비율	브라우저 화면 비율(1), 브라우저 종횡비(16/9), 브라우저 해상도(640/320),
color	기기의 비트 수	8(bit 단위)
color-index	기기의 생상 수	128(색상 수 단위)
monochrome	기기가 흑백일 때 픽셀당 비트 수	1(bit 단위)
resolution	기기의 해상도	300dpi/dpcm
scan	TV의 스캔 방식	progressive/interlace	사용 안 함
grid	기기의 그리드/비트맵	0(비트맵 방식)/1(그리드 방식)	사용 안 함

min/max(접두사 구문): min은 최소, 즉 이상이라는 의미가 있고, max는 최대, 즉 이하라는 의미가 있습니다.

{실행문}

{실행문}은 앞의 조건들이 모두 사실일 때 실행되는 실행문입니다. {실행문}에는 일반적으로 사용하는 CSS 코드를 작성합니다.

@media {실행문}

미디어 쿼리를 적용하려면? - 링크 방식

미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를 작성해서 <link></link> 태그로 CSS 파일을 연결하여 적용해야 합니다.

(미디어 쿼리를 적용하는 방법은 여러 가지가 있지만 현재는 이 방식이 가장 많이 사용되는 방식 중 하나입니다.)

이 방식은 HTML 파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적입니다.

이제 미디어 쿼리의 문법과 조건문 등을 직접 사용한 예제를 살펴보겠습니다. 공통으로 적용할 스타일을 작성하고 난 다음 미디어 쿼리를 작성합니다.

<head>
...
<style>
...

#wrap{
height:500px;
margin:0 auto;
border:4px solid #000;
}

@media all and (min-width:320px){
#wrap{
width:30%;
background:#00d2a5;
}
}

@media all and (min-width:768px){
#wrap{
width:60%;
background:#40b0f9;
}
}

@media all and (min-width:1024px){
#wrap{
width:90%;
background:#f45750;
}
}
/* 미디어 쿼리의 조건문을 사용해서 브라우저의 크기가 320px 이상일 때는 박스의 크기를 30%로 만들면서 배경색을 변경합니다.
768px 이상일 때는 박스의 크기를 60%로 만들면서 배경색을 변경하고, 1024px 이상일 때는 박스의 크기를 90%로 만들면서 
배경색을 변경합니다. */
</style>
</head>
<body>
	<div id="wrap"></div>
</body>

16, 23, 30행 각각의 미디어 쿼리에서 사용한 조건문은 미디어 쿼리를 적용할 기기의 종류를 말하는 조건문 중 모든 기기를 말하는 all 키워드와 작성한 미디어 쿼리에 두 개 이상의 조건이 있기 때문에 논리 연산자 중 앞과 뒤의 조건이 모두 사실인지 판단하는 and 구문을 사용하고 마지막으로 최소, 즉, 이상이라는 의미가 있는 min 접두사에 width 조건문을 사용했습니다.

※ 미디어 쿼리를 적용할 수 있는 기타 방식들

앞에서 소개한 링크 방식 외에도 몇 가지 방식이 더 있습니다.

링크 방식 2

링크 방식 2는 <link></link> 태그에 직접 미디어의 종류와 조건문 등을 작성하고 적용할 CSS 파일을 연결하는 방식인데, 이 방식은 되도록 사용하지 않는 것이 좋습니다. 조건이 여러 개로 나눠지게 되면 그 만큼 CSS 파일의 개수도 늘어나게 되어 CSS 파일을 여러 번 불러와야 하므로 웹사이트의 속도도 느려지기 때문입니다.

문서 내에 작성하는 방식

<head>
<style>
@media all and (min-width:320px){실행문}
</style>
</head>
<body>

</body>

문서 내에 작성하는 방식은 HTML 문서 내에 미디어 쿼리를 작성하는 방식인데, 이 방식은 어쩔 수 없이 사용해야 하는 상황이 아니라면 피하는 게 좋습니다. 그 이유는 CSS 코드를 문서 내에 작성하게 될 경우 문서의 용량이 커지고, 이렇게 커진 용량 때문에 속도가 느려져 웹사이트를 방문하는 사용자가 웹사이트를 빨리 볼 수 없기 때문입니다. 그렇게 때문에 미디어 쿼리를 작성할 때는 문서 내에 작성하는 방식이 아닌 CSS 파일을 별도로 관리하는 방식을 이용하는 것이 좋습니다. 또한 CSS 파일을 별도로 관리하게 되면 브라우저의 기억 장치 또는 케싱이라는 특성을 이용해 웹사이트를 다시 방문하는 사용자는 기억 장치에 입력된 CSS 파일을 빠르게 불러와 웹사이트의 속도가 빨라지는 효과를 얻을 수 있습니다.

▶ 물론 처음 웹사이트를 개발할 때는 문서 내에 작성하는 방식을 사용하는 것이 좋습니다. 구조를 확인하면서 어디에 스타일을 적용할지를 동시에 보면서 작성할 수 있기 때문에 작업의 효율이 높아지기 때문입니다. 하지만 웹사이트의 모든 개발이 끝난 후에는 반드시 작성한 CSS 코드르를 별도의 CSS 파일로 저장하여 앞에서 소개한 링크 방식으로 변경해야 합니다.

임포트 방식

@import url("style320px.css") all and (min-width:320px);

임포트 방식은 CSS 파일 내에서 CSS 파일을 불러오는 방식인데, 이 또한 링크 방식 2와 마찬가지로 조건이 늘어나게 되면 여러 개의 CSS 파일을 불러와야 하므로 같은 문제가 발생하게 됩니다. 그러므로 되도록 사용하지 않는 것이 좋습니다.

미디어 쿼리 사용 시 주의 사항

미디어 쿼리를 사용할 때 주의할 점이 몇 가지 있습니다. 특히 오류를 최대한 방지하기 위해서는 아주 사소한 부분까지 주의해야 합니다.

띄어쓰기 주의하기

미디어 쿼리를 작성할 때는 항상 띄어쓰기에 주의해야 합니다. 예를 들어 논리 연산자 중 하나인 and 구문을 사용할 때 and 구문 뒤에는 항상 공백을 한 칸 띄어줘야 합니다.

만약 공백을 한 칸 띄어주지 않고 미디어 쿼리를 작성하면 정상적으로 작동하지 않습니다. 사소한 부분이지만 자주 실수하는 부분이니 주의하세요!

@media all and (min-width:320px){실행문}
꼭 띄어쓰세요!↗

접두사인 min/max 사용 시 작성 순서 주의하기

미디어 쿼리를 사용할 때는 min/max와 크기 조건문(width)을 사용해서 해상도별로 웹사이트를 다양하게 보여줄 수 있습니다.

그런데 min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, max를 사용할 때는 반드시 크기가 큰 순서대로 작성해야 합니다.

@media all and (min-width:320px){실행문}
@media all and (min-width:768px){실행문}
@media all and (min-width:1024px){실행문}

min을 사용할 때 크기(width)가 작은 순서대로 작성해야 하는 이유는 min은 최소 또는 그 이상이라는 뜻으로, 점차 커지는 것을 의미하기 대문에 반드시 작은 순서부터 큰 순서로 작성해야 합니다. 반대로 max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에 max를 사용할 때는 반드시 큰 순서부터 작은 순서로 작성해야 합니다.

미디어 쿼리로 브라우저 크기 감지 시 주의하기

미디어 쿼리를 처음 사용할 때는 미디어 쿼리가 어떻게 작동하는지도 모르는 경우가 많습니다. 예를 들어 브라우저의 크기를 감지해서 특정 크기별로 스타일을 적용하고자 할 때 어떤 대상을 기준으로 크기를 감지하는지 모르고 있는 경우가 대부분이죠. 이처럼 어떤 기준으로 크기를 감지해야 하는지 몰라 웹사이트를 제작할 때 혼란을 겪을 때가 있는데, 여기서 알아두어야 할 점은 미디어 쿼리를 이용해서 크기를 감지할 때는 보이는 영역을 뜻하는 뷰포트 크기를 기준으로 감지한다는 것입니다.

미디어 쿼리 사용해 웹사이트 구조 변경하기

미디어 쿼리를 사용해 해상도가 바뀌면 웹사이트의 구조도 변하도록 수정해 보겠습니다.

1. <body> 태그에 wrap이라는 아이디를 가진 <div> 태그를 작성하고 구조가 변경되는 모습을 눈으로 확인하기 위해 그 안에 <div> 태그 5개를 다음처럼 작성합니다.

<body>
	<div id="wrap">
		<div></div><div></div><div></div><div></div><div></div>
	</div>
</body>

2. 스타일을 적용하기 위해 <head>, </head> 태그 사이에 <style></style> 태그를 작성합니다.

3. 스타일 적용하기

wrap이라는 아이디를 가진 <div> 태그와 자식 태그들인 <div> 태그에 스타일을 적용합니다.

<head>
...
<style>
...

#wrap{
width:90%;
margin:0 auto;
border:4px solid #000;
}
/* 아이디가 wrap인 <div> 태그에 가로 너빗값을 90%로 설정하고, 마진값과 선값도 설정합니다.*/

#wrap div{
display:inline-block;
height:100px;
}

#wrap div:first-child{
background:#f45750;
}

#wrap div:nth-child(2){
background:#40b0f9;
}

#wrap div:nth-child(3){
background:#00d2a5;
}

#wrap div:nth-child(4){
background:#ff884d;
}

#wrap div:last-child{
background:#464646;
}
/* 자식 태그들인 <div> 태그에는 공통적으로 display 속성의 값을 inline-block으로 설정하고,
높잇값을 100px로 설정합니다. 마지막으로 각각의 배경색을 설정합니다. */

...
</style>
</head>

4. 미디어 쿼리 적용하기

이제 웹 브라우저의 해상도별로 박스의 너빗값을 따로 설정해 줘야 합니다.

각각의 미디어 쿼리에서 사용한 조건문은 미디어 쿼리를 적용할 기기를 말하는 기기 조건문인 all 키워드와 앞과 뒤가 사실인지를 판단하는 논리 연산자 and 구문, 그리고 최소, 즉 그 이상이라는 뜻을 가진 min 접두사와 크기 조건문인 width 조건문을 사용합니다.

<head>
...
<style>
...

@media all and (min-width:320px){
#wrap div{
width:100%;
}
}
/* 브라우저의 크기가 320px 이상일 때 모든 박스의 가로 너빗값을 100%로 설정합니다. */

@media all and (min-width:768px){
#wrap div{
width:50%;
}
/* 브라우저의 크기가 768px 이상일 때 첫 번째 박스부터 네 번째 박스까지는 너빗값을 50%로 설정합니다. */

#wrap div:last-child{
width:100%;
}
}
/* 마지막 박스만 너빗값을 100%로 설정합니다. */

@media all and (min-width:1024px){
#wrap div{
width:20%;
}
/* 브라우저의 크기가 1024px 이상일 때는 첫 번째 박스부터 네 번째 박스까지는 너빗값을 20%로 설정합니다. */

#wrap div:last-child{
width:20%;
}
/* 마지막 박스의 너빗값을 20%로 설정합니다. */
}
    
</style>
</head>

5. 이제 작성한 파일을 저장한 다음 크롬으로 실행합니다. 화면을 늘렸다 줄였다 해보면 구조가 변하는 모습을 확인할 수 있습니다.

화면의 보이는 영역을 다루는 기술, 뷰포트

뷰포트(viewport)는 아주 간단해 보이는 기술이지만 뷰포트가 없으면 반응형 웹도 없다는 말이 있을 정도로 중요한 기술 중 하나입니다.

01장에서 간단히 설명했듯이 뷰포트는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.

그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다.

다음 예제를 통해 살펴보겠습니다.

반응형 웹을 제작할 때 사용하는 뷰포트의 기본 메타 태그

뷰포트 기술을 제대로 사용하려면 뷰포트 문법을 정확하게 이해하고 있어야 하며, 그중에서도 특히 뷰포트 속성은 반드시 알아야 합니다.

뷰포트 속성

속성명	속성값	속성 설명
width	device-width, 양수	뷰포트의 너비를 지정합니다.
height	device-height, 양수	뷰포트의 높이를 지정합니다.
initial-scale	양수	뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시합니다.
user-scalable	yes, no	뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes입니다. 반대로 no로 설정하면 사용자가 페이지를 확대할 수 없습니다.
minimum-scale	양수	뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25입니다.
maximum-scale	양수	뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0입니다.

minimum-scale과 maximum-scale 속성은 각각 값을 1.0으로 지정할 경우 user-scalable을 'yes'로 지정하더라도 사용자가 화면을 확대하거나 축소할 수 없습니다.

뷰포트 영역 확인하기

반응형 웹사이트를 제작하다 보면 뷰포트 영역을 확인해야 하는 경우가 종종 발생합니다. 브라우저 창의 화면 크기를 기준으로 작동하는 미디어 쿼리가 정상적으로 작동하는지 확인하려면 뷰포트 영역을 확인해야 합니다.

데스크톱과 스마트 기기의 뷰포트 영역을 확인하는 방법을 알아보겠습니다.

데스크톱의 뷰포트 영역 확인하기

데스크톱의 뷰포트 영역을 확인하려면 역시 크롬 웹 브라우저가 필요합니다. 크롬 브라우저에는 웹문서를 검사할 수 있는 '검사' 도구가 기본적으로 탑재되어 있습니다. 크롬을 실행한 다음 화면에서 오른쪽 마우스 버튼을 누르고 [검사]를 선택합니다.

(검사 기능의 단축키는 F12입니다.)

화면 하단에 창이 하나 나타납니다. 그리고 브라우저 창의 크기를 조절해 보면 오른쪽 상단에 뷰포트 영역이 나오는 것을 확인할 수 있습니다.

스마트 기기의 뷰포트 영역 확인하기

웹 브라우저에는 웹 문서를 검사할 수 있는 요소 검사 도구가 기본적으로 탑재되어 있지만 스마트 기기는 뷰포트 영역을 확인할 수 있는 기능이 없습니다. 그렇기 때문에 뷰포트 영역을 확인할 목적으로 개발된 웹사이트에 접속해서 뷰포트 영역을 확인해야 합니다.

▶ 스마트 기기에 설정된 값은 브라우저마다 다르지만 웹 키트(web-kit) 기반의 브라우저는 ㅠ포트 영역을 980px로 설정하고 트라이던트(trident) 엔진, 즉 익스플로러 브라우저는 뷰포트 영역을 980px 또는 1024px로 설정합니다. 현재 파이어폭스와 익스플로러를 제외한 대부분의 브라우저는 웹 키트 엔진 기반의 웹 브라우저로 변경되었습니다(2021년 2월 기준).

http://dnsdk300.dothome.co.kr/viewport

이 사이트는 필자가 뷰포트 확인을 위해 개발한 사이트입니다.

※ 뷰포트 메타 태그의 현재와 미래

뷰포트 메타 태그는 웹 브라우저인 사파리(Safari)에서 먼저 개발하여 독자적으로 사용하는 기술 중 하나였습니다. 하지만 현재는 사파리의 브라우저 엔진인 웹 키트 기반의 브라우저뿐만 아니라 기타 엔진을 탑재한 웹 브라우저에서도 뷰포트 메타 태그 방식을 채택하여 지원하고 있습니다.

그뿐만 아니라 웹 표준을 제정하는 W3C에서도 뷰포트 표준 기술을 내놓았는데, 적용 방식은 CSS 내에 선언하는 방식의 표준 기술입니다. 하지만 현재는 뷰포트 표준 기술보다 메타 태그 방식의 뷰포트 기술을 선호하는 추세이므로 표준 방식의 뷰포트 기술이 지속될지, 사라질지는 파악하기 힘든 상황입니다.

표준 방식으로 뷰포트를 사용하는 방법은 다음과 같습니다.

<head>
<style>
@viewport {
width:device-widht; /* width 속성과 동일함 */
zoom:1; /* initial-scale 속성과 동일함 */
min-zoom:1; /* minimum-scale 속성과 동일함 */
max-zoom:1; /* maximum-scale 속성과 동일함 */
user-zoom:zoom; /* user-scalable 속성과 동일함 */
}
</style>
</head>

표준 방식의 뷰포트 기술에 대한 자세한 내용은 www.w3.org/TR/css-device-adapt에서 서 확인하세요.

출처 : "반응형 웹 페이지 만들기"

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

Chapter 04 새로운 웹 기술, 플렉서블 박스_2(기술 익히기2) (0)	2022.12.01
Chapter 04 새로운 웹 기술, 플렉서블 박스_1(개념/기술 익히기1) (0)	2022.12.01
Chapter 02 px을 %로 바꾸기 - 가변 그리드_3(가변 폰트 이용하기/멀티미디어 요소 가변적으로 만들기) (1)	2022.11.30
Chapter 02 px을 %로 바꾸기 - 가변 그리드_2(가변 마진과 가변 패딩 이해하기) (0)	2022.11.30
Chapter 02 px을 %로 바꾸기 - 가변 그리드_1(가변 그리드 배우기) (0)	2022.11.30

ABOUT ME

's IT STORY 's IT STORY

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리

화면의 보이는 영역을 다루는 기술, 뷰포트

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리

화면의 보이는 영역을 다루는 기술, 뷰포트

'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바