화면 크기에 따라 열 너비 변경하기
반응형 웹 페이지를 제작할 때는 화면(뷰포트) 크기에 맞춰 열(column)의 너비를 유동적으로 조절해야 하는 경우가 많습니다. CSS의 미디어 쿼리(@media)를 활용하면 특정 화면 너비 조건에서 서로 다른 스타일을 적용할 수 있어, 데스크톱과 모바일 환경 모두에 최적화된 레이아웃을 손쉽게 구현할 수 있습니다.
아래 예제에서는 기본 상태에서 요소가 화면의 50% 너비를 차지하다가, 화면 너비가 700px 이하로 줄어들면 100%로 확장되도록 구현했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
width: 50%;
background-color: lightblue;
height: 200px;
font-size: 18px;
}
@media only screen and (max-width: 700px) {
body {
margin: 0;
padding: 0;
}
.sample {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Changing column width based on screen size</h1>
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
<h3>Resize the browser window to 700px and below to see the above div width change to 100%</h3>
</body>
</html>코드 설명
- .sample 클래스: 요소의 기본 너비를 50%로 지정하고, 배경색(lightblue), 높이(200px), 글꼴 크기(18px)를 함께 설정합니다.
- @media only screen and (max-width: 700px): 화면 너비가 700px 이하일 때만 해당 블록 안의 스타일이 적용됩니다.
- 미디어 쿼리 내부에서 .sample의 width를 100%로 변경하여, 좁은 화면에서는 요소가 전체 너비를 차지하도록 합니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
브라우저 창 크기를 700px 이하로 줄이면 아래 그림처럼 div 요소의 너비가 100%로 변경되는 것을 확인할 수 있습니다.
