그누보드 관리자 페이지 좌측 메뉴 레이아웃 및 스타일 커스터마이징

• 목록
• 스크랩

그누보드 관리자 페이지 좌측 메뉴 레이아웃 및 스타일 커스터마이징

그누보드 관리자 페이지 좌측 메뉴의 크기를 키우고 아이콘과 함께 메뉴명을 함께 출력하는 방법을 안내합니다. 운영자 및 개발자가 CSS 파일을 수정하여 레이아웃을 개선할 수 있습니다.

관리자 페이지 좌측 메뉴에 아이콘만 보이고 메뉴명이 숨겨지는 원인

그누보드 관리자 페이지 좌측 메뉴에서 아이콘만 출력되고 메뉴명이 숨겨져 있는 이유는 CSS 스타일 설정에서 텍스트를 화면 밖으로 밀어내 숨기는 속성이 적용되어 있고, 메뉴의 너비가 좁게 고정되어 있기 때문입니다.

원인 관련 CSS 설정

• 원본 adm/css/admin.css 파일의 #gnb.gnb_li button 및 관련 버튼 선택자에는 text-indent:-999px (또는 text-indent:-9999em) 속성이 포함되어 있습니다.
• 이 text-indent 속성은 버튼 내부의 텍스트(메뉴명)를 화면 영역 밖으로 밀어내어 시각적으로 숨기고 아이콘만 보이게 만드는 역할을 합니다.
• 또한 기본 메뉴 너비가 좁게 설정되어 있어 메뉴명과 아이콘을 함께 출력하기에 공간이 부족한 상태입니다.

관리자 페이지 좌측 메뉴 크기 및 메뉴명 출력 수정 방법

그누보드 및 영카트 관리자 페이지 좌측 메뉴에서 아이콘만 출력되던 상태를 메뉴명까지 함께 출력되도록 변경하려면 adm/css/admin.css 파일을 수정해야 합니다.

1. 수정 파일 위치

• adm/css/admin.css

2. 스타일 수정 내용

• 원본 파일의 #gnb.gnb_li button 속성에서 텍스트를 숨기는 text-indent:-999px 속성을 삭제하고, 메뉴 너비(width)와 높이(height) 등을 원하는 크기로 늘려줍니다.
• 예제 기준(가로 70px 확대 등)으로 원본 코드와 비교하여 수정합니다.

수정 예시:

/* 변경 전 원본 예시 */
#gnb.gnb_li button{
 background-color: #ebebeb;
 border: 0;
 width: 50px;
 height: 50px;
 text-indent: -999px;
 overflow: hidden;
}

/* 변경 후 예시 (text-indent 삭제 및 너비·높이 조정) */
#gnb.gnb_li button{
 background-color: #ebebeb;
 border: 0;
 width: 120px;
 height: 60px;
 padding: 22px 0 0;
 overflow: hidden;
}

3. 적용 후 확인 및 예외 조치

• 수정한 뒤 화면에 변경 사항이 즉시 반영되지 않는다면, 웹브라우저 캐시를 삭제한 후 새로고침을 진행합니다.
• 버전에 따라 CSS 클래스나 구조가 미세하게 다를 수 있으므로, 사용 중인 환경의 원본 코드를 먼저 백업한 후 비교하여 적용하는 것을 권장합니다.

관리자 페이지 좌측 메뉴 변경 사항 미반영 시 조치 방법

CSS 파일을 수정했음에도 관리자 페이지 좌측 메뉴에 변경 사항이 반영되지 않는 경우, 웹브라우저에 이전 스타일 파일이 캐시되어 발생할 수 있습니다.

확인 및 조치 방법

1. 웹브라우저 캐시 삭제: 브라우저 설정에서 캐시 및 임시 파일을 삭제합니다.
2. 새로고침 실행: 캐시 삭제 후 관리자 페이지를 새로고침하여 변경된 메뉴 크기와 이름이 정상적으로 출력되는지 확인합니다.

관리자 페이지 좌측 메뉴 크기 및 스타일 변경 방법

좌측 메뉴 크기 및 스타일 변경은 Q2에서 안내한 adm/css/admin.css 파일 수정 절차를 따릅니다. 레이아웃을 맞추기 위해 다음 요소들의 CSS 속성도 함께 조정이 필요할 수 있습니다.

추가 조정 필요 요소

• #logo, #btn_gnb, #gnb.gnb_ul, #gnb.gnb_oparea, #container, #container_title 등

상세한 수정 수치는 사용 중인 테마와 버전에 따라 다를 수 있으므로, 반드시 원본 파일을 백업한 후 수정하시기 바랍니다.

상황별 안내

• 내 상황: 그누보드 관리자 페이지 좌측 메뉴에 아이콘만 출력되고 메뉴명이 숨겨져 있어 사용이 불편한 경우
• 선택 기준: adm/css/admin.css 파일 내 #gnb.gnb_li button 스타일의 text-indent 속성 및 메뉴 너비(width) 설정 확인
• 다음 행동: 원본 파일을 백업한 뒤 text-indent:-999px 속성을 삭제하고 너비와 높이 값을 조정하여 메뉴명을 함께 출력하고, 수정 후 반영되지 않으면 브라우저 캐시를 삭제 후 새로고침

실전 FAQ

• Q. CSS를 수정했는데도 관리자 좌측 메뉴가 변경되지 않고 그대로 아이콘만 보입니다.
  • A: 웹브라우저에 이전 스타일 파일이 캐시되어 발생할 수 있습니다. 브라우저 캐시 및 임시 파일을 삭제한 후 새로고침을 진행해 보세요.
• Q. 그누보드 버전에 따라 스타일 파일 구조나 클래스 명이 다를 수 있나요?
  • A: 버전에 따라 미세한 차이가 있을 수 있습니다. 5.3.x 및 5.3.2.6 버전 기준 외 다른 버전을 사용 중이라면 원본 파일을 먼저 백업한 후 코드를 비교하며 수정하는 것을 권장합니다.

함께 보면 좋은 글

• 그누보드 특정 메뉴 색상 및 스타일 개별 커스터마이징 방법
• PHP 조건문을 활용한 그누보드 페이지별 메뉴 레이아웃 분리 및 관리 방법
• 그누보드 슬라이드 스킨 애니메이션 및 레이아웃 커스터마이징 가이드

참고자료

기타 참고자료

• sir.kr — 관리자 페이지 메뉴 보기 편하게 변경 - SIR - 개발자 커뮤니티
• gnustudy.com — 관리자 페이지 좌측 메뉴 크기 변경 - 그누보드팁