요약 로고의 화려한 무지개색을 돋보이게 하면서 언론사의 신뢰감을 주기 위해, 메인 메뉴바는 로고의 펌프/지구본 색상과 연결되는 ‘딥 네이비(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초 만에 완벽하게 세팅됩니다. (글자 겹침 현상 및 서브메뉴 두 줄 현상 해결 완료!)
/* --- 메인 메뉴바 배경 및 폰트 설정 --- */
.main-navigation {
background-color: #1A365D; /* 메인 배경색 딥 네이비 */
}
.main-navigation .main-nav > ul > li > a {
color: #FFFFFF !important; /* 메인 글자색 흰색 (테마 기본값 무시) */
font-size: 17px;
font-weight: 700;
padding-top: 15px;
padding-bottom: 15px;
}
/* 메인 메뉴 마우스 오버 시 */
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
background-color: #0056B3 !important;
color: #FFFFFF !important; /* 오버 시에도 글자색 흰색 고정 (무적 버전) */
}
/* --- 서브 메뉴(드롭다운) 배경 및 폰트 설정 --- */
.main-navigation ul ul {
background-color: #F8F9FA;
border-top: 3px solid #0056B3;
width: auto !important; /* 상자 크기를 글자 길이에 맞춰 자동 조절 */
white-space: nowrap !important; /* 서브메뉴 글자 줄바꿈 강제 방지 (한 줄로 표시) */
}
.main-navigation ul ul li a {
color: #333333 !important;
font-size: 14px;
font-weight: 500;
padding: 12px 20px;
}
/* 서브 메뉴 마우스 오버 시 */
.main-navigation ul ul li:hover > a {
background-color: #E9ECEF !important;
color: #1A365D !important; /* 오버 시 글자색 네이비로 반전 */
}
/* --- 헤더 전체 배경 이미지 적용 --- */
.site-header {
background-image: url('https://webkidsnews.com/wp-content/uploads/2026/06/Gemini_Generated_Image_fm6k16fm6k16fm6k-scaled.png');
background-size: cover;
background-position: center right; /* 모바일에서 우측 슬로건이 잘리지 않도록 정렬 */
background-repeat: no-repeat;
/* 로고와 슬로건이 너무 붙지 않도록 위아래 여백을 조금 줍니다 */
padding-top: 20px;
padding-bottom: 20px;
}
/* 로고 뒤의 기본 배경색(흰색) 투명하게 만들기 */
.inside-header {
background-color: transparent !important;