그누보드 메인 메뉴 3차 서브메뉴 수동 추가 방법과 디자인 적용 요령

• 목록
• 스크랩

그누보드 메인 메뉴 3차 서브메뉴 수동 추가 방법과 디자인 적용 요령

그누보드 관리자 페이지의 기본 2차 메뉴 제한을 넘어 3차 서브메뉴를 직접 추가하고 디자인을 적용하려는 운영자와 개발자를 위한 수동 코딩 및 스타일 설정 방법입니다.

그누보드 3차 서브메뉴 수동 추가 방법

그누보드 관리자 페이지의 기본 메뉴 설정 기능은 2차 메뉴까지만 지원하므로, 3차 서브메뉴를 구성하려면 head.php 파일에 코드를 직접 수정해 넣어야 합니다. 그누보드 5.3 버전 환경을 기준으로 작업할 때 적용할 수 있는 구체적인 절차는 다음과 같습니다.

1. head.php 수정하기

head.php 파일에서 아래의 2차 메뉴 출력 코드를 찾습니다.

<li class="gnb_2dli"><a href="<?php echo $row2['me_link'];?>" target="_<?php echo $row2['me_target'];?>" class="gnb_2da"><?php echo $row2['me_name']?></a></li>

찾은 코드를 전체적으로 아래와 같이 수정하여 특정 2차 메뉴 코드($row2['me_code']) 조건에 따른 3차 메뉴 ul/li 구조가 포함되도록 합니다.

<li class="gnb_2dli">
 <a href="<?php echo $row2['me_link'];?>" target="_<?php echo $row2['me_target'];?>" class="gnb_2da"><?php echo $row2['me_name']?></a>
 <?php if ($row2['me_code'] == 1020) {?>
 <ul class="gnb_3dul">
 <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> 서브메뉴1-2-1</a></li>
 <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> 서브메뉴1-2-2</a></li>
 </ul>
 <?php }?>
 <?php if ($row2['me_code'] == 1030) {?>
 <ul class="gnb_3dul">
 <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> 서브메뉴1-3-1</a></li>
 <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> 서브메뉴1-3-2</a></li>
 </ul>
 <?php }?>
</li>

2. 2차 메뉴 코드 확인 방법

작업하려는 2차 메뉴의 고유 코드를 정확히 모를 경우, 코드 내에 <?php echo $row2['me_code']?>를 삽입하여 화면에서 직접 값을 확인할 수 있습니다.

3. 스타일(CSS) 적용하기

default.css 파일에 3차 메뉴가 올바르게 표시되도록 아래의 스타일을 추가합니다.

.gnb_3dul {padding:0;text-align:left;}
.gnb_3dul li a {display:block;color:#fff;padding:0 0 0 15px;line-height:35px;background:#253dbe;border-top:1px solid #2b47dd}

주의사항 및 다음 행동

• 수정 전 head.php 파일을 반드시 백업하시기 바랍니다. 사용 중인 테마의 구조나 CSS 클래스명이 다를 경우 레이아웃이 깨질 수 있으므로, 적용 후 화면을 확인하며 조정이 필요합니다.

3차 서브메뉴 스타일 설정 방법

그누보드 메인 메뉴에 수동으로 추가한 3차 서브메뉴(.gnb_3dul)의 디자인과 레이아웃을 정렬하기 위해 default.css 파일에 아래의 CSS 스타일을 추가합니다.

.gnb_3dul {padding:0;text-align:left;}
.gnb_3dul li a {display:block;color:#fff;padding:0 0 0 15px;line-height:35px;background:#253dbe;border-top:1px solid #2b47dd}

• .gnb_3dul: 3차 서브메뉴 목록 전체의 여백(padding)을 없애고 텍스트 정렬을 왼쪽으로 지정합니다.
• .gnb_3dul li a: 3차 메뉴 링크 항목을 블록 요소로 지정하고, 글자색, 왼쪽 여백, 줄 간격(line-height), 배경색, 상단 테두리 선을 설정하여 시인성을 높여줍니다.

주의: 사용 중인 테마의 구조나 기존 CSS 클래스명에 따라 레이아웃이 깨질 수 있으므로, 적용 후 화면 출력 상태를 확인하며 필요에 따라 스타일 값을 조정해야 합니다.

그누보드 2차 메뉴 고유 코드($row2['me_code']) 확인 방법

그누보드 메인 메뉴 설정은 기본적으로 2차 메뉴까지만 지원하므로, 특정 2차 메뉴 하위에 3차 서브메뉴를 수동으로 연결하려면 대상 2차 메뉴의 고유 코드($row2['me_code'])를 정확히 파악해야 합니다.

메뉴 코드 확인 방법

1. 테마의 head.php 파일에서 메뉴 출력 구문 중 2차 메뉴 코드가 헷갈릴 때 아래 코드를 직접 삽입하여 화면에서 확인할 수 있습니다.

   <?php echo $row2['me_code']?>

2. 위 코드를 head.php 내부에 삽입한 뒤 웹페이지를 새로고침하면 해당 2차 메뉴에 부여된 고유 숫자 코드(예: 1020, 1030 등)가 화면에 출력됩니다. 이를 통해 3차 메뉴를 연결할 위치의 정확한 me_code 값을 특정할 수 있습니다.

주의사항: 코드 확인을 위해 삽입한 <?php echo $row2['me_code']?> 코드는 확인 후 반드시 삭제해야 합니다. 또한, 테마 구조에 따라 레이아웃이 달라질 수 있으므로 수정 전 파일을 백업하십시오.

테마 구조 및 CSS 차이에 따른 레이아웃 깨짐 대처 방법

사용 중인 테마의 마크업 구조나 CSS 클래스명이 자료의 기본 예시와 다를 경우 화면 레이아웃이 깨질 수 있습니다. 이를 해결하기 위한 대처 방법은 다음과 같습니다.

• 테마 마크업 구조 확인: 테마별로 메뉴를 구성하는 HTML 태그(ul, li 등)와 클래스명이 다를 수 있습니다. 제공된 예시 코드를 그대로 붙여넣지 말고, 현재 사용 중인 테마의 GNB 구조에 맞게 코드를 조정해야 합니다.
• CSS 스타일 조정: .gnb_3dul 및 하위 선택자(.gnb_3dul li a)의 패딩, 배경색, 테두리 등 디자인 속성이 현재 테마와 충돌하는지 확인하고 CSS 파일을 수정해야 합니다.
• 개발자 도구 활용: 브라우저의 개발자 도구(F12)를 사용하여 현재 적용된 클래스명과 스타일을 확인하고, 레이아웃이 깨지는 원인이 되는 CSS 속성을 찾아 수정하십시오.

그누보드 3차 서브메뉴 추가 판단 및 행동 기준

내 상황	우선할 판단	다음 행동
관리자 메뉴 설정의 2차 메뉴 제한을 넘어 특정 메뉴에만 3차 서브메뉴를 수동으로 추가하려는 경우	그누보드 5.3 버전 환경을 기준으로 삼고, 관리자 설정 대신 head.php 파일 수동 수정 방식을 선택	1. head.php 파일 백업<br>2. 대상 2차 메뉴의 me_code 확인 및 조건문 추가<br>3. default.css에 스타일 정의
테마의 마크업 구조나 CSS 클래스명이 예시와 달라서 레이아웃이 깨질 우려가 있는 경우	원본 예시 코드를 그대로 적용하지 않고 사용하는 테마의 GNB 구조에 맞춰 마크업 조정	1. 브라우저 개발자 도구를 통해 현재 테마의 클래스명 확인<br>2. ul/li 중첩 구조와 CSS 속성값 수정 후 출력 확인

실전 FAQ

Q. 3차 서브메뉴 코드를 head.php에 추가했는데 화면에 아무런 변화가 없습니다.

• 원인 및 예외: 코드를 삽입한 위치가 잘못되었거나, 사용 중인 테마가 기본 head.php 구조를 다르게 변형하여 2차 메뉴 출력 루프가 다른 파일이나 함수로 분리된 경우 발생할 수 있습니다.
• 대안 및 다음 행동: head.php 내에서 2차 메뉴를 출력하는 gnb_2dli 관련 코드가 정확히 존재하는지 재확인하고, 헷갈릴 경우 <?php echo $row2['me_code']?>를 임시로 삽입해 해당 위치가 올바르게 호출되는지 점검하세요.

Q. 메뉴 개수가 늘어나면서 설정 저장 시 오류가 발생하거나 일부가 반영되지 않습니다.

• 원인 및 예외: 서버 설정의 max_input_vars 제한으로 인해 대량의 메뉴 폼 변수가 한 번에 전송되지 못하고 누락되는 현상입니다.
• 대안 및 다음 행동: php.ini 파일에서 max_input_vars 값을 기본값보다 상향 조정하거나, 전체 저장 버튼 대신 개별 메뉴 항목의 변경 버튼을 활용해 갱신하세요.

함께 보면 좋은 글

• Stylebot을 활용한 그누스터디 대문 및 최신글 디자인 커스텀 방법과 적용 확인
• 배추빌더 사이드바 서브메뉴 위치 및 출력 설정 가이드
• 그누보드 그룹별 서브메뉴 조건부 노출 설정 방법

참고자료

기타 참고자료

• sir.kr — 관리자 메뉴설정 3차이상등록 순서로정렬(수정본 다시 올립니다) - SIR - 개발자 커뮤니티
• gnustudy.com — 메인 메뉴 3차까지 추가하기 - 그누보드팁
• sir.kr — 그누보드 메뉴설정 최대제한 개수? - SIR - 개발자 커뮤니티