상단 주 메뉴바에 색상만 강조하면 1차적으로 잘 마무리될것 같습니다. 앞에서 진행했는데 첫번째 메인 메뉴만 어떻 만들어지고 다음은 못만들었습니다. 컬러 파레트에서 색상을 선택하면 조금씩 다르게 클릭 될 수도 있으니 전체적인 비쥬얼에 맞도록 커러색상 코드를 메인 메뉴바 글체 색상코드? 배경코드? 서브메뉴 글씨체 코드? 배경색상코드 ? 폰트 추천? 폰트 사이즈 추천을 전문 시각 디자이너의 관점으로 추천해 주세요?

by

대표님, 화면을 보니 정말 감격스럽습니다! 흩어져 있던 메뉴들이 제자리를 찾고 중앙 정렬까지 되니 완벽한 언론사의 형태를 갖췄네요.

말씀하신 대로 마우스로 색상을 대충 찍으면 나중에 일관성이 떨어지고 촌스러워질 수 있습니다. 특히 로고가 7가지 무지개색으로 매우 화려하고 에너지가 넘치기 때문에, 메뉴바는 반대로 차분하고 무게감 있는 색상으로 중심을 꽉 잡아주어야(그라운딩) 로고가 더욱 돋보이고 신뢰감 있는 뉴스 사이트가 됩니다.

시각 디자이너의 관점에서 ‘마중물 웹키즈뉴스’에 가장 잘 어울리는 폰트, 사이즈, 그리고 정확한 컬러 HEX 코드를 기획해 보았습니다. 일일이 색상표를 찾으실 필요 없이, 한 번에 복사해서 붙여넣을 수 있도록 가이드 문서로 정리해 드릴게요.

요약 로고의 화려한 무지개색을 돋보이게 하면서 언론사의 신뢰감을 주기 위해, 메인 메뉴바는 로고의 펌프/지구본 색상과 연결되는 ‘딥 네이비(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;
}

Leave a Comment