홈페이지 제작 시 영역별 폰트 사이즈 설정

홈페이지를 제작할 때 각 영역별로 적절한 폰트 사이즈를 설정하는 것은 가독성과 디자인을 최적화하는 데 매우 중요합니다.

헤더 영역

헤더 영역은 웹사이트의 첫인상을 좌우하는 중요한 부분입니다. 일반적으로 헤더에는 로고, 네비게이션 메뉴, 중요한 연락처 정보가 포함됩니다.

• 로고: 로고 텍스트는 24px 이상으로 설정하여 눈에 잘 띄게 합니다.
• 네비게이션 메뉴: 메뉴 항목은 16px에서 18px 사이로 설정하여 쉽게 읽을 수 있게 합니다.
• 연락처 정보: 중요한 연락처 정보는 14px에서 16px 사이로 설정합니다.

본문 콘텐츠

본문 콘텐츠는 웹사이트의 주요 정보가 담긴 부분으로, 가독성이 매우 중요합니다.

• 제목 (h1): 주제의 주요 제목은 32px에서 36px 사이로 설정합니다.
• 부제목 (h2): 섹션의 부제목은 24px에서 28px 사이로 설정합니다.
• 소제목 (h3): 소제목은 20px에서 24px 사이로 설정합니다.
• 본문 텍스트: 일반 본문 텍스트는 16px에서 18px 사이로 설정하여 읽기 쉽게 합니다.
• 인용문 (blockquote): 인용문은 본문 텍스트보다 약간 큰 18px에서 20px 사이로 설정하여 강조합니다.

사이드바

사이드바는 추가 정보나 링크를 제공하는 공간입니다. 사이드바의 텍스트는 본문보다 약간 작게 설정하여 시각적 계층 구조를 만듭니다.

• 위젯 제목: 사이드바 위젯의 제목은 18px에서 20px 사이로 설정합니다.
• 링크: 링크 텍스트는 14px에서 16px 사이로 설정하여 다른 텍스트와 구분되게 합니다.

푸터

푸터는 웹사이트의 마지막 부분으로, 저작권 정보, 추가 링크, 연락처 정보 등이 포함됩니다.

• 푸터 텍스트: 푸터의 일반 텍스트는 12px에서 14px 사이로 설정하여 다른 영역과 구분되게 합니다.
• 푸터 링크: 푸터의 링크 텍스트는 14px에서 16px 사이로 설정합니다.

예제 코드

다음은 위에서 설명한 폰트 사이즈 설정을 CSS로 적용한 예제 코드입니다:

h1 {
    font-size: 36px; /* h1 제목 */
    color: #333;
}

h2 {
    font-size: 28px; /* h2 부제목 */
    color: #333;
}

h3 {
    font-size: 24px; /* h3 소제목 */
    color: #333;
}

p {
    font-size: 16px; /* 본문 텍스트 */
    color: #555;
}

blockquote {
    font-size: 18px; /* 인용문 텍스트 */
    color: #666;
}

.sidebar-widget-title {
    font-size: 20px; /* 사이드바 위젯 제목 */
    color: #333;
}

.sidebar-link {
    font-size: 16px; /* 사이드바 링크 */
    color: #007BFF;
}

.footer-text {
    font-size: 14px; /* 푸터 텍스트 */
    color: #777;
}

.footer-link {
    font-size: 16px; /* 푸터 링크 */
    color: #007BFF;
}