반응형 웹 디자인에서 텍스트 크기가 화면 크기에 따라 자동으로 조절되도록 하는 것은 매우 중요합니다. CSS에서는 뷰포트 단위(vw)를 활용하면 별도의 미디어 쿼리 없이도 간단하게 반응형 타이포그래피를 구현할 수 있습니다.
vw 단위란?
vw(viewport width)는 뷰포트 너비의 1%를 의미하는 상대 단위입니다. 예를 들어 10vw는 화면 너비의 10%에 해당하는 크기가 되므로, 화면이 커지면 글자도 함께 커지고 화면이 작아지면 글자도 작아집니다.
예제 코드
아래 코드는 뷰포트 단위를 사용해 반응형 타이포그래피를 구현한 예제입니다.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<style>
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Responsive Text Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis!
</p>
</body>
</html>실행 결과
위 코드를 실행하면 제목은 화면 너비의 10%, 본문 텍스트는 화면 너비의 5% 크기로 표시됩니다.
화면 크기를 조절하면 다음과 같이 텍스트 크기도 비율에 맞춰 자동으로 변경됩니다.
핵심 포인트 정리
- viewport 메타 태그 필수: 모바일 기기에서 올바르게 동작하려면
<meta name="viewport">태그를 반드시 포함해야 합니다. - vw 단위 활용:
font-size에vw단위를 적용하면 화면 너비에 비례해 글자 크기가 유동적으로 변합니다. - 미디어 쿼리 없이 간편: 화면 크기별로 여러 개의 미디어 쿼리를 작성할 필요 없이 한 줄의 스타일로 반응형을 구현할 수 있습니다.
이처럼 CSS의 뷰포트 단위를 활용하면 데스크톱, 태블릿, 모바일 등 다양한 기기에서 가독성 좋은 반응형 텍스트를 손쉽게 만들 수 있습니다.