CSS의 미디어 쿼리(@media)를 활용하면 화면 크기에 따라 레이아웃을 유동적으로 변경할 수 있습니다. 아래 예제는 화면 너비가 줄어들 때 4개의 컬럼이 2개씩 배치되고, 더 좁아지면 세로로 한 줄씩 쌓이도록 구현한 반응형 레이아웃 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.col {
color: white;
float: left;
width: 25%;
padding: 10px;
}
.colContainer:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
</style>
</head>
<body>
<h1>CSS로 화면 크기에 따라 레이아웃 변경하기</h1>
<h2>화면 크기를 조절하면 아래 div 요소들이 자동으로 재배치됩니다</h2>
<div class="colContainer">
<div class="col" style="background-color: rgb(153, 29, 224);">
<h2>첫 번째 컬럼</h2>
</div>
<div class="col" style="background-color: rgb(12, 126, 120);">
<h2>두 번째 컬럼</h2>
</div>
<div class="col" style="background-color: rgb(207, 41, 91);">
<h2>세 번째 컬럼</h2>
</div>
<div class="col" style="background-color: rgb(204, 91, 39);">
<h2>네 번째 컬럼</h2>
</div>
</div>
</body>
</html>코드 설명
- 기본 상태에서 각 컬럼(
.col)은 전체 너비의 25%를 차지하여 한 줄에 4개가 나란히 배치됩니다. @media screen and (max-width: 900px)조건에서는 컬럼 너비가 50%로 변경되어 한 줄에 2개씩 표시됩니다.@media screen and (max-width: 600px)조건에서는 컬럼 너비가 100%로 변경되어 세로로 하나씩 쌓입니다..colContainer:after선택자는 float 속성으로 인해 부모 요소의 높이가 무너지는 현상(clearfix)을 방지합니다.
출력 결과
위 코드를 실행하고 브라우저 창 크기를 조절하면 다음과 같이 레이아웃이 반응형으로 변경되는 것을 확인할 수 있습니다.
