h 태그 사이즈 조정: 업계 표준 폰트 크기 조정 방법

by
h 태그 크기 조정

웹 디자인에서 헤딩 태그(h1~h6)의 크기를 정의할 때, 일반적으로 h1부터 h6까지 크기가 점진적으로 줄어드는 방식으로 설정합니다. 만약 h1의 크기를 33px로 설정한다면, h2부터 h6까지의 크기는 각각 일정한 비율로 줄어드는 방식으로 설정할 수 있습니다.

비율에 따른 헤딩 크기 설정

보통 헤딩 태그 크기 설정에서는 일정한 비율을 적용하는 것이 일반적입니다. 예를 들어, 1.25의 비율로 줄어들게 설정할 수 있습니다. 이 비율은 디자인의 일관성을 유지하면서도 명확한 계층 구조를 제공합니다. 여기서는 각 헤딩 태그의 크기를 비율로 줄여 설정하는 방법을 보여드리겠습니다.

비율 적용

  1. h1: 33px
  2. h2: 33px ÷ 1.25 ≈ 26.4px
  3. h3: 26.4px ÷ 1.25 ≈ 21.1px
  4. h4: 21.1px ÷ 1.25 ≈ 16.9px
  5. h5: 16.9px ÷ 1.25 ≈ 13.5px
  6. h6: 13.5px ÷ 1.25 ≈ 10.8px

이렇게 하면 각 헤딩 태그 크기가 점진적으로 줄어드는 계층 구조를 만들 수 있습니다.

CSS로 정의하기

다음은 위의 비율을 기반으로 한 헤딩 태그 크기를 CSS로 정의한 예입니다:

h1 {
    font-size: 33px;
}

h2 {
    font-size: 26.4px;
}

h3 {
    font-size: 21.1px;
}

h4 {
    font-size: 16.9px;
}

h5 {
    font-size: 13.5px;
}

h6 {
    font-size: 10.8px;
}

다른 비율 적용 예

각 프로젝트의 디자인 요구 사항에 따라 비율은 달라질 수 있습니다. 예를 들어, 1.2나 1.3의 비율을 적용할 수도 있습니다. 다음은 1.2 비율을 적용한 예입니다:

비율 적용

  1. h1: 33px
  2. h2: 33px ÷ 1.2 ≈ 27.5px
  3. h3: 27.5px ÷ 1.2 ≈ 22.9px
  4. h4: 22.9px ÷ 1.2 ≈ 19.1px
  5. h5: 19.1px ÷ 1.2 ≈ 15.9px
  6. h6: 15.9px ÷ 1.2 ≈ 13.3px

이 비율을 CSS로 정의하면 다음과 같습니다:

h1 {
    font-size: 33px;
}

h2 {
    font-size: 27.5px;
}

h3 {
    font-size: 22.9px;
}

h4 {
    font-size: 19.1px;
}

h5 {
    font-size: 15.9px;
}

h6 {
    font-size: 13.3px;
}

반응형 폰트 크기 설정: 미디어 쿼리 이용

웹 디자인에서 반응형 디자인을 적용하려면 미디어 쿼리를 사용하여 모바일, 태블릿, PC에서 각각 다른 폰트 크기를 설정할 수 있습니다. 다음은 다양한 기기에서의 헤딩 태그 크기를 설정하는 예시입니다:

기본 폰트 크기 설정 (모바일 우선)

먼저, 모바일 기기에서 기본 폰트 크기를 설정합니다:

h1 {
    font-size: 33px;
}

h2 {
    font-size: 26.4px;
}

h3 {
    font-size: 21.1px;
}

h4 {
    font-size: 16.9px;
}

h5 {
    font-size: 13.5px;
}

h6 {
    font-size: 10.8px;
}

태블릿과 PC를 위한 미디어 쿼리 추가

이제 태블릿과 PC를 위한 미디어 쿼리를 추가합니다. 일반적으로 태블릿은 768px 이상, PC는 1024px 이상으로 설정할 수 있습니다.

/* 기본 폰트 크기 설정 (모바일) */
h1 {
    font-size: 33px;
}

h2 {
    font-size: 26.4px;
}

h3 {
    font-size: 21.1px;
}

h4 {
    font-size: 16.9px;
}

h5 {
    font-size: 13.5px;
}

h6 {
    font-size: 10.8px;
}

/* 태블릿용 폰트 크기 설정 */
@media (min-width: 768px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 17px;
    }

    h6 {
        font-size: 14px;
    }
}

/* PC용 폰트 크기 설정 */
@media (min-width: 1024px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 33px;
    }

    h3 {
        font-size: 27px;
    }

    h4 {
        font-size: 23px;
    }

    h5 {
        font-size: 19px;
    }

    h6 {
        font-size: 16px;
    }
}

결론

위의 CSS 설정을 사용하면 모바일, 태블릿, PC 각 기기에서 적절한 헤딩 태그 폰트 크기를 정의할 수 있습니다. 이를 통해 모든 기기에서 일관된 사용자 경험을 제공할 수 있으며, 콘텐츠의 가독성도 향상됩니다.

Leave a Comment