[마중물 웹키즈뉴스 메뉴 디자인 가이드] 문서 맨 아래에 있는 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초 만에 완벽하게 세팅됩니다. (글자 겹침 현상 및 서브메뉴 두 줄 현상 해결 완료!)
/* --- 메인 메뉴바 배경 및 폰트 설정 --- */