시각적으로 명확한 이해를 돕기 위해, 이전에 문제가 있던 코드와 카카오톡 제목 중복, 모바일 화면 충돌을 한 장의 이미지로 연결

작성자:

시각적으로 명확한 이해를 돕기 위해, 이전에 문제가 있던 코드와 카카오톡 제목 중복, 모바일 화면 충돌을 한 장의 이미지로 연결했습니다.

시각적 해결 과정 안내 [cite: 18]:

  1. [cite: 왼쪽 패널 – 기존 코드 삭제] [cite: 18]:

    • 사용자 정의하기의 “추가 CSS” 화면을 보세요 [cite: 18].

    • 이전에 입력했던 aggressive한 모바일 미디어 쿼리 코드 블록 전체 [cite: 18]( image_11.png 의 하단 53-57행 부분)에 빨간색 X 표시를 하고 “과거 aggressive한 코드 블록 전체 삭제” [cite: 18] 라는 텍스트를 추가했습니다. 이 코드 블록 전체를 지워야 합니다.

  2. [cite: 중앙 – 문제의 원인 복습] [cite: 18]:

    • 삭제하는 코드 블록은 카카오톡 링크 공유 시 제목이 두 개로 중복되게 했고 cite: 18, 스마트폰에서 그래픽 헤더와 텍스트 헤더가 충돌하여 번갈아 나타나게 했습니다 [cite: 18]( image_15.png vs image_16.png ).

  3. [cite: 오른쪽 – 새로운 코드 붙여넣기] [cite: 18]:

    • 삭제된 블록 아래에 새로운 코드 입력창을 만들고 “최종 정리된 새로운 코드 붙여넣기” [cite: 18] 라는 텍스트를 추가했습니다.

    • 제가 이전 단계에서 정리한 최종 최종 (이전의 문제 코드가 제거된) 코드를 복사해서 여기에 붙여넣으면 됩니다 [cite: 18].

  4. [cite: 최종 결과] [cite: 18]:

    • 새로운 코드를 덮어씌우면, 공유 링크의 제목 중복 문제가 해결되고 [cite: 18], 스마트폰에서 충돌 없이 그래픽 모바일 헤더가 정상적으로 나오게 됩니다 [cite: 18].

코드를 덮어씌우고 공개(발행) 버튼을 누른 후, 실제 스마트폰에서 캐시를 지우고 확인하는 것을 잊지 마세요.

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 {
    background-color: #0056B3 !important; 
    color: #FFFFFF !important; /* 오버 시에도 글자색 흰색 유지 */
}

/* --- 2. 서브 메뉴(드롭다운) 배경 및 폰트 설정 --- */
.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; /* 오버 시 글자색 네이비로 반전 */
}

/* --- 3. 헤더 전체 배경 및 로고 설정 --- */
.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;
}

/* --- [cite: 삭제] 문제의 모바일 헤더 충돌 블록 전체 삭제 --- */
/*
   @media (max-width: 768px) { ... } <- 이 전체 블록은
   링크 공유 중복 제목 및 모바일 화면 충돌의 원인이므로 삭제합니다.
*/

댓글 남기기