CSS로 반응형 그리드 뷰 만들기
반응형 그리드 뷰(Responsive Grid View)는 화면 크기에 따라 레이아웃이 유연하게 조절되는 웹 페이지 구조를 말합니다. 데스크톱, 태블릿, 스마트폼 등 다양한 기기에서 콘텐츠가 자연스럽게 배치되도록 하려면 그리드 기반 레이아웃을 활용하는 것이 효과적입니다.
반응형 그리드의 핵심 요소
- 뷰포트 메타 태그 : 모바일 기기에서 페이지가 실제 화면 너비에 맞게 렌더링되도록 설정합니다.
- box-sizing: border-box : 패딩과 테두리를 요소의 전체 너비에 포함시켜 너비 계산을 직관적으로 만들어 줍니다.
- 백분율(%) 단위 : 고정 픽셀 대신 상대 단위를 사용하면 화면 크기에 따라 레이아웃이 자동으로 늘어나고 줄어듭니다.
전체 예제 코드
아래 코드를 실행하면 헤더, 왼쪽 메뉴(30%), 본문 콘텐츠(70%)로 구성된 반응형 2단 그리드 뷰를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid black;
padding: 10px;
}
.leftmenu {
width: 30%;
float: left;
padding: 10px;
border: 1px solid black;
}
.content {
width: 70%;
float: left;
padding: 10px;
border: 2px dotted black;
}
</style>
</head>
<body>
<div class="header">
<h1>헤더</h1>
</div>
<div class="leftmenu">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
<li>메뉴 6</li>
<li>메뉴 7</li>
<li>메뉴 8</li>
<li>메뉴 9</li>
<li>메뉴 10</li>
</ul>
</div>
<div class="content">
<h1>데모</h1>
<p>
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
</p>
</div>
</body>
</html>
코드 설명
* { box-sizing: border-box; } 선언은 모든 요소에 적용되어, 패딩과 테두리가 지정된 너비에 포함되도록 합니다. 덕분에 왼쪽 메뉴 30%와 본문 70%를 합쳐도 정확히 100%가 유지되어 가로 스크롤 없이 깔끔한 2단 레이아웃이 완성됩니다.
.leftmenu와 .content에 적용된 float: left;는 두 요소를 나란히 배치하는 역할을 하며, 각 영역의 padding과 border는 시각적으로 영역을 구분해 줍니다.
참고: 더 현대적인 방법
float 방식은 구형 브라우저와의 호환성을 위해 여전히 사용되지만, 최근에는 CSS Grid나 Flexbox를 사용하는 것이 권장됩니다. 특히 미디어 쿼리(@media)와 함께 사용하면 화면 너비에 따라 단 수를 바꾸는 등 훨씬 정교한 반응형 레이아웃을 손쉽게 구현할 수 있습니다.