반응형 폰트크기

coalacoding.com

예시 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 사이에서 뷰포트 크기에 따라 조정됩니다.

추가 팁

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

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