이번 포스팅에서는 반응형 웹 디자인의 기초 중 하나인 뷰포트와 미디어 쿼리에 대해 알아보겠습니다. 이론부터 실습까지, 다양한 화면 크기에 맞게 웹 페이지를 최적화하는 방법을 자세히 학습해 봅시다.
자동목차
이론: 뷰포트와 미디어 쿼리란?
뷰포트는 웹 페이지가 표시되는 영역을 의미합니다. 웹 페이지는 뷰포트의 크기에 따라 다르게 보일 수 있습니다. 반응형 웹 디자인에서는 <meta name="viewport"> 태그를 이용하여 뷰포트를 제어합니다.
미디어 쿼리는 CSS의 기능 중 하나로, 뷰포트의 크기에 따라 다른 스타일을 적용할 수 있게 합니다. 이를 통해 화면 크기에 따라 웹 페이지의 레이아웃을 변경할 수 있습니다.
실습: 뷰포트와 미디어 쿼리 사용하기
아래의 코드는 뷰포트와 미디어 쿼리를 이용하여 화면 크기에 따라 배경색을 변경하는 웹 페이지의 예시입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightblue;
}
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>
코드 설명
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 이 태그는 뷰포트의 크기를 제어합니다. width=device-width는 뷰포트의 너비를 장치의 너비에 맞추고, initial-scale=1.0은 초기 확대/축소 비율을 설정합니다.
- @media screen and (min-width: 600px): 이 미디어 쿼리는 화면의 너비가 600px 이상일 때만 적용됩니다. 이 예시에서는 화면의 너비가 600px 이상일 때 body의 배경색을 lightgreen으로 변경합니다.
마무리
반응형 웹 디자인은 다양한 화면 크기에 맞게 웹 페이지를 최적화하는 데 매우 중요합니다. 이번 포스팅을 통해 뷰포트와 미디어 쿼리의 기본적인 사용 방법을 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.