VII. 반응형 웹과 미디어 쿼리

📁Web Developing/CSS 기초

VII. 반응형 웹과 미디어 쿼리 - 1. 반응형 웹

Hush 2022. 6. 8. 19:42

반응형 웹 디자인이란

반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 준다.

모바일 기기를 위한 뷰포트

반응형 웹 디자인에서 기본적으로 알아 둬야 할 것이 뷰포트(viewport)이다.

PC에 맞게 제작된 웹 사이트를 모바일 기기에서 보면 모든 내용이 작게 표시된다.

그 이유는 표시되는 픽셀의 차이 때문인데, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다.

이때 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역이다.

예를 들어 PC화면에 맞춰서 제작한 사이트를 모바일 기기에서 확인하면 원래 PC화면 크기만큼 표시하므로 글자가 아주 작다.

또한 모바일 사이트에 적합한 사이트를 제작했더라도 정작 스마트폰 화면에서 내용을 확인하면 원래 의도한 대로 표시되지 않기도 한다.

이것은 웹키트(webkit)를 기반으로 한 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문이다.

다시 말해 웹 페이지 너비를 스마트폰용인 320px로 맞추어 웹 사이트를 제적하더라도 스마트폰용 모바일 브라우저의 기본 뷰포트 너비가 980px이므로 웹 페이지 너비를 무조건 980px로 표시하려고 한다.

결국 스마트폰용으로 제작된 웹 페이지의 내용은 의도와 달리 작은 글씨와 그림으로 표시되는 것이다.

그러므로 모바일 기기에 적합한 사이트를 제작하려면 뷰포트 개념을 꼭 알아야 한다.

뷰포트 지정하기

뷰포트는 <meta> 태그를 이용해 <head>와 </head> 태그 사이에 작성한다. 뷰포트를 지정하는 기본형은 다음과 같다.

<meta name="viewport" content="속성=값1", "속성2=값2", ......>

이와 같이 content 속성을 이요해 뷰포트 속성과 속성값을 지정하면 되는데, content 안에서 사용하는 뷰포트의 속성은 다음 표와 같다.

종류	설명	사용 가능한 값	기본값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본값
user-scalable	확대, 축소 가능 여부	yes 또는 no (yes는 1로, device-width와 device-height값은 10으로 간주)	yes
initial-scale	초기 확대, 축소 값	1~10	1

다음은 가장 많이 사용하는 뷰포트 속성으로 웹 페이지 뷰포트으 ㅣ너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정한다.

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

뷰포트 단위

뷰포트 개념이 등장하기 전까지는 CSS에서 크기를 지정할 때 주로 px, %의 단위를 사용했지만 이제는 다음과 같이 뷰포트를 기준으로 하는 단위를 사용할 수도 있다.

vw(viewport width)	1vw는 뷰포트 너비의 1%와 같다.
vh(viewport height)	1vh는 뷰포트 높이의 1%와 같다.
vmin(viewport minimum)	뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.
vmax(viewport maximum)	뷰포트 너비와 높이 중에서 큰 값의 1%와 같다.

예를 들어 뷰포트의 너비가 1000px, 높이가 800px 일 경우 1vw는 10px, 1vh는 8px이 될 것이다.

1vmin은 8px, 1vmax는 10px가 된다. 만일 화면을 돌리면 이 값들이 변할 수 있다.

다음 예제는 글자 크기를 5vw로 지정해서 뷰포트 크기가 달라질 때마다 제목의 글자 크기가 상대적으로 달라지도록 한 것이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Html-basic</title>
        <style>
            h1{
                font-size: 5vw;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>안녕하세요?</h1>
    </body>
</html>

저작자표시 (새창열림)