PC, 노트북, 태블릿, 스마트폰 등 어떤 화면 크기에서도 자연스럽게 표시되는 반응형 웹사이트(Responsive Website)를 만들려면 몇 가지 핵심 요소가 필요합니다. 그중에서도 가장 중요한 것은 뷰포트(viewport) 메타 태그 설정과 유연한 CSS 레이아웃 구성입니다.
반응형 웹의 핵심 요소
- 뷰포트 메타 태그 —
<meta name="viewport" content="width=device-width, initial-scale=1">를<head>안에 추가해야 모바일 기기에서 화면 너비에 맞춰 페이지가 올바르게 조정됩니다. - box-sizing: border-box — 패딩과 테두리까지 포함해 요소의 전체 너비를 계산하기 때문에 화면이 좁아져도 레이아웃이 깨지지 않습니다.
- 유연한 레이아웃 — 고정 픽셀(px)보다는 백분율(%), auto 값 등 가변적인 단위를 활용하면 다양한 화면 크기에 자동으로 대응할 수 있습니다.
전체 예제 코드
다음은 헤더, 내비게이션 바, 본문 콘텐츠, 푸터로 구성된 간단한 반응형 웹페이지의 완성된 코드입니다. 그대로 복사해서 HTML 파일로 저장한 뒤 브라우저에서 열어 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
.header {
padding: 80px;
text-align: center;
background: #7b1abc;
color: white;
}
.header h1 {
font-size: 40px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected {
background-color: rgb(0, 18, 43);
}
main {
background-color: white;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
color: white;
background: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="header">
<h1>Website ↶</h1>
</div>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<main>
<h2>Sample Heading</h2>
<h5>Published in January</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, autem.
</p>
<br />
<h2>Sample Heading</h2>
<h5>Published in march</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quo minus fugiat tempora quae ratione dignissimos exercitationem voluptate officiis reiciendis.
</p>
</main>
<div class="footer">
<h2>Footer ↷</h2>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 브라우저 창의 크기를 줄이거나 늘려 보면 헤더, 내비게이션, 본문, 푸터가 화면 너비에 맞춰 자동으로 조정되는 것을 확인할 수 있습니다. 이처럼 뷰포트 설정과 유연한 CSS만으로도 PC, 노트북, 태블릿, 휴대폰 등 모든 장치에서 정상적으로 작동하는 반응형 웹사이트를 손쉽게 만들 수 있습니다.
