그누보드 특정 메뉴 색상 및 스타일 개별 커스터마이징 방법

• 목록
• 스크랩

그누보드 특정 메뉴 색상 및 스타일 개별 커스터마이징 방법

그누보드 5.x 환경에서 관리자 페이지의 메뉴 설정 기능을 활용해 특정 메뉴의 색상이나 스타일을 개별적으로 변경하는 방법을 안내합니다. 테마 구조에 따라 적용 위치가 다를 수 있으므로, 수정 전 반드시 백업을 권장합니다.

특정 메뉴의 고유 코드(me_code) 확인 방법

그누보드에서 특정 메뉴의 스타일을 개별적으로 변경하려면, 해당 메뉴를 식별할 수 있는 고유 코드인 me_code를 먼저 확인해야 합니다.

1. 관리자 페이지 접속: 그누보드 관리자 모드에 로그인합니다.
2. 메뉴 설정 이동: 환경설정 > 메뉴설정 메뉴로 이동합니다.
3. 코드 확인: 메뉴 설정 화면에서 등록된 메뉴 목록을 확인합니다. 각 메뉴 항목 옆에 표시된 me_code 값을 확인하십시오.
   • 메인 메뉴는 보통 10, 20, 30과 같이 2자리 숫자로 구성됩니다.
   • 서브 메뉴는 메인 메뉴 코드 뒤에 숫자가 붙어 1010, 1020과 같이 4자리(또는 그 이상)로 구성됩니다.
   • 메뉴가 10개 이상이거나 복잡한 구조일 경우 숫자와 영문이 조합될 수 있습니다.

스타일 커스터마이징 적용 절차

확인한 me_code를 사용하여 head.php 파일에서 조건문을 통해 스타일을 적용합니다. 수정 전 반드시 head.php 파일을 백업하십시오.

1. CSS 클래스 정의: default.css 파일에 원하는 색상이나 스타일을 정의한 클래스를 추가합니다.

   .color_red { color: #ff0000!important; }

2. 조건문 적용: 테마의 head.php 파일 내 메뉴 출력 루프 구간을 찾습니다.
   • 하위 메뉴까지 일괄 변경 시: $row['me_code']를 조건문으로 사용하여 클래스를 적용합니다.
   • 개별 메뉴만 변경 시: $row2['me_code']를 사용하여 특정 서브 메뉴만 선택적으로 클래스를 적용합니다.

주의사항

• 테마에 따라 head.php의 구조가 다를 수 있으므로, 원문의 코드를 그대로 붙여넣기보다 현재 테마의 메뉴 출력 루프 구조를 먼저 파악해야 합니다.
• 하위 메뉴 일괄 변경과 개별 변경은 조건문 적용 대상($row vs $row2)이 다르므로 구분하여 적용하십시오.

특정 메뉴 스타일을 위한 CSS 클래스 추가 방법

특정 메뉴에만 개별적인 디자인을 적용하려면, 먼저 테마의 스타일시트 파일에 해당 스타일을 정의하고, 이를 메뉴 출력 코드에서 조건부로 호출해야 합니다.

1. CSS 클래스 정의

테마 폴더 내의 default.css 파일(또는 테마에서 사용하는 주요 CSS 파일)을 열어 원하는 스타일을 정의합니다. 기존 메뉴 스타일과 충돌하여 색상이 변경되지 않는 경우 !important 속성을 추가하여 우선순위를 높일 수 있습니다.

/* default.css 파일 하단에 추가 예시 */
.custom_menu_style {
 color: #ff0000!important;
 font-weight: bold!important;
}

2. 스타일 적용 원리

정의한 클래스(.custom_menu_style)는 head.php 파일 내의 메뉴 출력 루프 안에서 특정 메뉴 코드(me_code)를 식별하는 조건문을 통해 적용됩니다.

• 위치: 테마의 head.php 파일 내에서 메뉴 데이터를 불러와 반복문(for 또는 foreach)으로 출력하는 구간을 찾습니다.
• 적용: 특정 메뉴의 me_code가 일치할 때만 클래스 변수에 정의한 클래스명을 할당하여, 메뉴 링크 태그(<a>)의 class 속성에 출력합니다.

주의사항

• 파일 백업: head.php를 수정하기 전 반드시 원본 파일을 백업하십시오.
• 테마 구조: 사용 중인 테마에 따라 메뉴 출력 방식이 다를 수 있습니다. 원문의 예시 코드를 그대로 적용하기보다, 현재 테마의 head.php 파일 내에서 실제 메뉴 출력 루프가 어디에 있는지 먼저 확인해야 합니다.
• 우선순위: CSS 적용이 되지 않는다면 브라우저 개발자 도구(F12)를 사용하여 기존 메뉴 클래스(gnb_1da 등)의 우선순위를 확인하고, 필요 시 !important를 활용하십시오.

head.php 내 메뉴 스타일 적용 방법

그누보드 5.x 환경에서 특정 메뉴의 스타일을 개별적으로 적용하려면, 관리자 페이지에서 확인한 메뉴 코드(me_code)를 조건문으로 활용하여 메뉴 출력 루프 내에서 CSS 클래스를 동적으로 삽입해야 합니다. 테마에 따라 head.php의 구조가 다르므로, 아래 절차를 참고하여 현재 테마의 코드를 확인하십시오.

1. 메뉴 출력 루프 식별

head.php 파일 내에서 메뉴를 생성하는 foreach 루프를 찾습니다. 일반적으로 다음과 같은 형태를 띱니다.

<?php foreach ($menu_list as $row) {?>
 <!-- 메뉴 항목 출력 -->
<?php }?>

2. 조건문 삽입 및 클래스 적용

루프 내부에서 메뉴 코드($row['me_code'])를 확인하여 특정 클래스를 변수에 담고, 이를 링크 태그(<a>)의 class 속성에 추가합니다.

적용 예시:

<?php 
foreach ($menu_list as $row) { 
 // 특정 메뉴 코드(예: 20, 40)일 경우 클래스 부여
 $menu_color = ($row['me_code'] == '20' || $row['me_code'] == '40')? ' color_red': '';
?>
 <a href="<?php echo $row['me_link'];?>" class="gnb_1da<?php echo $menu_color;?>">
 <?php echo $row['me_name'];?>
 </a>
<?php }?>

3. 주의사항 및 확인 단계

• 파일 백업: head.php 수정 전 반드시 원본 파일을 별도로 복사하여 백업하십시오.
• CSS 정의: 테마 폴더 내 css 디렉토리의 default.css 파일에 .color_red { color: #ff0000!important; }와 같이 스타일을 미리 정의해야 합니다.
• 테마 구조: 사용 중인 테마에 따라 메뉴 출력 루프가 head.php가 아닌 별도의 파일(예: theme/테마명/head.php 등)에 있을 수 있습니다. 파일 내에서 foreach ($menu_list as $row) 구문을 검색하여 위치를 확인하십시오.
• 하위 메뉴: 서브 메뉴를 개별적으로 수정하려면 $row2 루프를 찾아 동일한 방식으로 조건문을 적용하십시오.

특정 메뉴 색상 및 스타일 개별 커스터마이징 가이드

그누보드 5.x에서 특정 메뉴의 스타일을 개별적으로 변경하려면 관리자 페이지에서 부여된 고유 코드(me_code)를 활용해야 합니다. 수정 전 반드시 head.php 파일을 백업하십시오.

내 상황	우선할 판단	다음 행동
특정 메뉴의 색상을 바꾸고 싶음	관리자 페이지에서 해당 메뉴의 me_code 확인	환경설정 > 메뉴설정에서 코드 확인
하위 메뉴까지 일괄 변경하고 싶음	메인 메뉴 루프($row)에 조건문 적용	head.php 내 $row['me_code'] 조건문 삽입
특정 서브 메뉴만 개별 변경하고 싶음	서브 메뉴 루프($row2)에 조건문 적용	head.php 내 $row2['me_code'] 조건문 삽입
스타일이 적용되지 않음	CSS 우선순위 확인	default.css에 !important 속성 추가

실전 FAQ

Q. 메뉴 코드(me_code)가 복잡한 영문 조합일 때는 어떻게 하나요? 관리자 페이지의 '환경설정 > 메뉴설정' 화면에서 직접 확인하는 것이 가장 정확합니다. 메뉴가 10개 이상일 경우 시스템이 자동으로 생성한 코드를 그대로 복사하여 조건문에 사용하십시오.

Q. head.php에서 메뉴 출력 루프를 찾기 어렵습니다. 테마마다 구조가 다르므로 head.php 파일 내에서 foreach ($menu_list as $row) 또는 foreach 구문을 검색하십시오. 해당 루프 내부가 메뉴를 생성하는 구간입니다.

Q. 하위 메뉴 개별 변경 시 $row2를 사용했는데도 안 바뀝니다. $row2 루프가 존재하는지 확인하십시오. 일부 테마는 서브 메뉴를 별도 파일로 관리할 수 있습니다. 또한, CSS 클래스가 기존 메뉴 클래스(gnb_1da 등)에 의해 덮어씌워지지 않았는지 브라우저 개발자 도구(F12)로 확인하십시오.

함께 보면 좋은 글

• 그누보드 새글(new.php) 페이지 스킨 아이콘 출력 및 커스터마이징 방법
• 아미나빌드 위젯에서 게시판 여분 필드(wr6) 출력 및 커스터마이징 방법
• 그누보드 게시판 조회수 증가 로직 커스터마이징 (고정값 또는 랜덤)

참고자료

기타 참고자료

• sir.kr — 선택된 메뉴만 다른 css 적용하는 방법 조언부탁드립니다..! - SIR - 개발자 커뮤니티
• velog.io — 그누보드와 PHP
• haeun-haku.tistory.com — 그누보드 파일구조 :: HAUEN
• sir.kr — 그누보드 메뉴 질문이요 - SIR - 개발자 커뮤니티
• gnustudy.com — 메뉴 설정에서 메뉴코드 me_code 출력하기 - 그누보드팁