08 반응형 폰트크기

예시 CSS 코드

아래 예제는 vw 단위를 사용하여 다양한 요소의 폰트 크기를 설정한 것입니다. 이 예제에서는 calc()와 clamp()를 함께 사용하여 다양한 화면 크기에서의 최적의 폰트 크기를 제공합니다.

1
css코드 복사
2
html {
3
    font-size: 62.5%; /* 1rem = 10px */
4
    font-family: 'Pretendard', sans-serif;
5
}
6

7
body {
8
    font-size: calc(1rem + 0.5vw); /* 기본 텍스트 크기 */
9
}
10

11
h1 {
12
    font-size: clamp(2rem, 1.5rem + 2vw, 4rem); /* 큰 제목 */
13
}
14

15
h2 {
16
    font-size: clamp(1.8rem, 1.2rem + 1.5vw, 3.5rem); /* 중간 제목 */
17
}
18

19
p {
20
    font-size: calc(1.2rem + 0.4vw); /* 본문 텍스트 */
21
}
22

23
small {
24
    font-size: calc(0.8rem + 0.2vw); /* 작은 텍스트 */
25
}
26

27
button {
28
    font-size: calc(1rem + 0.3vw); /* 버튼 텍스트 */
29
}

설명

기본 폰트 크기 설정: html 요소의 font-size를 62.5%로 설정하여, 1rem이 10px가 되도록 하였습니다. 이를 통해 rem 단위를 사용할 때 더 직관적인 값을 설정할 수 있습니다.
calc()** 사용**: 각 요소의 기본 크기에 vw 단위를 더하여, 화면 크기에 따라 폰트 크기를 동적으로 조절합니다.
clamp()** 사용**: 폰트 크기의 최소 및 최대 값을 설정하여, 화면 크기가 너무 작거나 클 때도 가독성을 유지할 수 있습니다.
- clamp(min, preferred, max) 구조를 사용하여 원하는 폰트 크기를 지정합니다.
- 예를 들어, h1 요소의 폰트 크기는 2rem에서 4rem 사이에서 뷰포트 크기에 따라 조정됩니다.

추가 팁

미디어 쿼리와의 결합: 특정 브레이크포인트에서 폰트 크기를 더 세밀하게 조정할 수 있습니다.

1
css코드 복사
2
@media (max-width: 600px) {
3
    h1 {
4
        font-size: clamp(1.5rem, 1rem + 3vw, 3rem); /* 작은 화면에서 h1 크기 조정 */
5
    }
6
}