7.1 기본 원칙
반응형 글꼴은 적응형 웹 디자인을 만드는 데 중요한 역할을 해. vw, vh, vmin, vmax와 같은 상대 단위를 사용하면 글꼴이 뷰포트 크기에 따라 동적으로 변경되어 다양한 기기에서 텍스트를 최적으로 표시할 수 있어. 이러한 단위가 어떻게 작용하는지 그리고 반응형 글꼴을 만들기 위해 어떻게 사용할 수 있는지 자세히 살펴보자.
기본 개념
vw와 vh:
vw(viewport width): 1vw는 뷰포트 너비의 1%에 해당vh(viewport height): 1vh는 뷰포트 높이의 1%에 해당
vmin과 vmax:
vmin(viewport minimum): 1vmin은 뷰포트(너비 또는 높이)의 더 작은 크기의 1%에 해당vmax(viewport maximum): 1vmax는 뷰포트(너비 또는 높이)의 더 큰 크기의 1%에 해당
반응형 글꼴의 장점:
- 가독성 향상: 글꼴 크기를 화면 크기에 맞춰 자동으로 조정하여 모든 기기에서 편안하게 읽을 수 있음
- 디자인 유연성: 반응형 글꼴은 뷰포트 크기가 변경될 때도 조화롭고 균형 잡힌 디자인을 유지하게 도움
- 통합 접근법: 글꼴에 상대 단위를 사용하여 적응형 디자인을 만드는 통합 접근을 지원
7.2 vw와 vh 사용 예제
예제 1: vw를 사용한 기본 글꼴 크기
뷰포트 너비에 따라 글꼴 크기가 변경되는 예제를 만들어보자:
CSS
body {
font-size: 2vw; /* 글꼴 크기는 뷰포트 너비의 2% */
}
h1 {
font-size: 4vw; /* 제목의 글꼴 크기는 뷰포트 너비의 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw를 사용한 반응형 글꼴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>반응형 제목</h1>
<p>이 텍스트는 뷰포트 너비에 따라 크기가 변경돼.</p>
</body>
</html>
코드 설명:
body { font-size: 2vw; }:body안의 텍스트 글꼴 크기를 뷰포트 너비의 2%로 설정h1 { font-size: 4vw; }:h1제목의 글꼴 크기를 뷰포트 너비의 4%로 설정
예제 2: vh를 사용한 기본 글꼴 크기
이제 뷰포트 높이에 따라 글꼴 크기가 변경되는 예제를 만들어보자:
CSS
body {
font-size: 2vh; /* 글꼴 크기는 뷰포트 높이의 2% */
}
h1 {
font-size: 4vh; /* 제목의 글꼴 크기는 뷰포트 높이의 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vh를 사용한 반응형 글꼴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>반응형 제목</h1>
<p>이 텍스트는 뷰포트 높이에 따라 크기가 변경돼.</p>
</body>
</html>
코드 설명:
body { font-size: 2vh; }:body안의 텍스트 글꼴 크기를 뷰포트 높이의 2%로 설정h1 { font-size: 4vh; }:h1제목의 글꼴 크기를 뷰포트 높이의 4%로 설정
7.3 vmin과 vmax 사용 예제
예제 1: vmin을 사용한 기본 글꼴 크기
뷰포트의 더 작은 크기에 따라 글꼴 크기가 변경되는 예제를 만들어보자:
CSS
body {
font-size: 2vmin; /* 글꼴 크기는 뷰포트의 더 작은 크기의 2% */
}
h1 {
font-size: 4vmin; /* 제목의 글꼴 크기는 뷰포트의 더 작은 크기의 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vmin을 사용한 반응형 글꼴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>반응형 제목</h1>
<p>이 텍스트는 뷰포트의 더 작은 크기에 따라 크기가 변경돼.</p>
</body>
</html>
코드 설명:
body { font-size: 2vmin; }:body안의 텍스트 글꼴 크기를 뷰포트의 더 작은 크기의 2%로 설정h1 { font-size: 4vmin; }:h1제목의 글꼴 크기를 뷰포트의 더 작은 크기의 4%로 설정
예제 2: vmax를 사용한 기본 글꼴 크기
뷰포트의 더 큰 크기에 따라 글꼴 크기가 변경되는 예제를 만들어보자:
CSS
body {
font-size: 2vmax; /* 글꼴 크기는 뷰포트의 더 큰 크기의 2% */
}
h1 {
font-size: 4vmax; /* 제목의 글꼴 크기는 뷰포트의 더 큰 크기의 4% */
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vmax를 사용한 반응형 글꼴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>반응형 제목</h1>
<p>이 텍스트는 뷰포트의 더 큰 크기에 따라 크기가 변경돼.</p>
</body>
</html>
코드 설명:
body { font-size: 2vmax; }:body안의 텍스트 글꼴 크기를 뷰포트의 더 큰 크기의 2%로 설정h1 { font-size: 4vmax; }:h1제목의 글꼴 크기를 뷰포트의 더 큰 크기의 4%로 설정
GO TO FULL VERSION