마중물 웹키즈뉴스 메뉴 디자인 가이드

[마중물 웹키즈뉴스 메뉴 디자인 가이드] 문서 맨 아래에 있는 CSS 코드를 이 두 가지 문제가 완벽하게 해결된 최종 무적 버전으로 업데이트했습니다

요약 로고의 화려한 무지개색을 돋보이게 하면서 언론사의 신뢰감을 주기 위해, 메인 메뉴바는 로고의 펌프/지구본 색상과 연결되는 ‘딥 네이비(Deep Navy)’로 설정합니다. 서브 메뉴는 가독성을 위해 ‘밝은 그레이 & 다크 폰트’를 추천합니다.

1. 색상 코드 (Color Palette)

A. 메인 메뉴 (1차 메뉴)

• 배경 색상 코드: #1A365D (신뢰감을 주는 깊고 짙은 네이비)
• 글자 색상 코드: #FFFFFF (순백색 – 네이비 배경에서 가독성 최고)
• 마우스 올렸을 때(Hover) 배경: #0056B3 (웹키즈의 활기를 담은 밝은 블루)

B. 서브 메뉴 (2차 드롭다운 메뉴)

• 배경 색상 코드: #F8F9FA (눈이 편안한 아주 연한 회색)
• 글자 색상 코드: #333333 (완전한 검은색보다 세련된 진한 쥐색)
• 마우스 올렸을 때(Hover) 글자색: #1A365D (메인 메뉴 배경색과 통일)

2. 타이포그래피 (폰트 추천 및 사이즈)

A. 폰트 추천: Pretendard (프리텐다드)

• 최근 네이버, 토스 등 국내 1위 IT 기업들과 주요 언론사들이 가장 많이 사용하는 폰트입니다.
• 가독성이 뛰어나고, 숫자가 특히 예쁘게 떨어져 교육/뉴스 사이트에 완벽합니다. (GeneratePress 타이포그래피 설정에서 System Font 또는 Noto Sans KR을 선택하셔도 무방합니다.)

B. 폰트 사이즈 추천

• 메인 메뉴 폰트:17px / 두께: Bold (700)
  • 이유: 한 줄에 5개의 메뉴가 들어가야 하므로 너무 크면 줄 바꿈이 생깁니다. 17px에 두께감을 주어 띠(Bar) 안에서 묵직하게 자리 잡게 합니다.
• 서브 메뉴 폰트:14px / 두께: Medium (500) 또는 Regular (400)
  • 이유: 세부 항목이므로 시선을 뺏지 않도록 작고 얇게 처리하여 읽기 편하게 만듭니다.

💡 한 번에 적용하는 마법의 CSS 코드 (최종 무적 버전)

메뉴에서 일일이 색상을 찾을 필요 없이, 아래 코드를 복사해서 $$사용자 정의하기$$

-> $$추가 CSS$$

란에 기존 코드를 지우고 다시 붙여넣기만 하시면 디자인이 1초 만에 완벽하게 세팅됩니다. (글자 겹침 현상 및 서브메뉴 두 줄 현상 해결 완료!)

/* --- 메인 메뉴바 배경 및 폰트 설정 --- */