19. 반응형-폰트크기
예시 CSS 코드
아래 예제는 vw 단위를 사용하여 다양한 요소의 폰트 크기를 설정한 것입니다. 이 예제에서는 calc()와 clamp()를 함께 사용하여 다양한 화면 크기에서의 최적의 폰트 크기를 제공합니다.
css코드 복사
html {
font-size: 62.5%; /* 1rem = 10px */
font-family: 'Pretendard', sans-serif;
}
body {
font-size: calc(1rem + 0.5vw); /* 기본 텍스트 크기 */
}
h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 4rem); /* 큰 제목 */
}
h2 {
font-size: clamp(1.8rem, 1.2rem + 1.5vw, 3.5rem); /* 중간 제목 */
}
p {
font-size: calc(1.2rem + 0.4vw); /* 본문 텍스트 */
}
small {
font-size: calc(0.8rem + 0.2vw); /* 작은 텍스트 */
}
button {
font-size: calc(1rem + 0.3vw); /* 버튼 텍스트 */
}
설명
- 기본 폰트 크기 설정:
html요소의font-size를62.5%로 설정하여,1rem이10px가 되도록 하였습니다. 이를 통해rem단위를 사용할 때 더 직관적인 값을 설정할 수 있습니다. calc()** 사용**: 각 요소의 기본 크기에vw단위를 더하여, 화면 크기에 따라 폰트 크기를 동적으로 조절합니다.clamp()** 사용**: 폰트 크기의 최소 및 최대 값을 설정하여, 화면 크기가 너무 작거나 클 때도 가독성을 유지할 수 있습니다.clamp(min, preferred, max)구조를 사용하여 원하는 폰트 크기를 지정합니다.- 예를 들어,
h1요소의 폰트 크기는2rem에서4rem사이에서 뷰포트 크기에 따라 조정됩니다.
추가 팁
- 미디어 쿼리와의 결합: 특정 브레이크포인트에서 폰트 크기를 더 세밀하게 조정할 수 있습니다.
css코드 복사
@media (max-width: 600px) {
h1 {
font-size: clamp(1.5rem, 1rem + 3vw, 3rem); /* 작은 화면에서 h1 크기 조정 */
}
}