BOARD 팁·활용

그누보드 게시판 목록 상단 텍스트 분류를 이미지 버튼으로 변경하기

페이지 정보

작성자 최고관리자
댓글 0건 조회 15회 작성일 26-10-04 18:03

본문

그누보드 운영자가 게시판 상단의 기본 텍스트 형태 카테고리 메뉴를 커스텀 이미지 버튼 형태로 교체하여 시각적 완성도를 높일 수 있도록 스킨 코드 수정 및 CSS 조정 방법을 안내합니다.

그누보드 게시판 상단 분류를 이미지로 변경하기

그누보드 게시판 목록 상단의 텍스트 분류(카테고리)를 이미지 버튼 형태로 변경하려면 스킨 파일(list.skin.php)과 스타일시트(style.css)를 수정해야 합니다.

1. 이미지 준비 및 업로드

사용 중인 게시판 스킨 폴더 내의 img 폴더에 각 분류에 사용할 이미지 파일(예: cate1.png, cate2.png, cate3.png 등)을 미리 업로드합니다.

2. list.skin.php 파일 수정

사용 중인 게시판 스킨의 list.skin.php 파일 상단 ?> 안쪽에 아래의 분류 출력 로직을 추가하거나 수정합니다. 조건문을 통해 특정 분류명에 따라 이미지 태그가 출력되도록 설정합니다.

// 분류 사용 여부
$category_option = '';
if ($board['bo_use_category']) {
 $is_category = true;
 $category_href = G5_BBS_URL.'/board.php?bo_table='.$bo_table;
 
 $categories = explode('|', $board['bo_category_list']);
 for ($i=0; $i<count($categories); $i++) {
 $category = trim($categories[$i]);
 if ($category=='') continue;
 $category_option.= '<li><a href="'.($category_href."&amp;sca=".urlencode($category)).'"';
 $category_msg = '';
 if ($category==$sca) { // 현재 선택된 카테고리라면
 $category_option.= ' id="bo_cate_on"';
 $category_msg = '<span class="sound_only">열린 분류 </span>';
 }
 
 // 특정 분류를 이미지로 출력
 if ($category == "게시판스킨") {
 $category_option.= '><img src="'.$board_skin_url.'/img/cate1.png"></a></li>';
 } else if ($category == "최신글스킨") {
 $category_option.= '><img src="'.$board_skin_url.'/img/cate2.png"></a></li>';
 } else if ($category == "테마") {
 $category_option.= '><img src="'.$board_skin_url.'/img/cate3.png"></a></li>';
 } else {
 $category_option.= '>'.$category_msg.$category.'</a></li>';
 }
 }
}

3. style.css 파일 수정

basic 게시판 스킨 기준 style.css 파일에서 분류 출력 부분의 가로 고정값(width:90px; 등)을 제거하고 패딩 값을 적절히 수정합니다.

수정 전 예시

#bo_cate a {display:block;position:relative;margin-left:-1px;padding:6px 0 5px;width:90px;border:1px solid #ddd;background:#f7f7f7;color:#888;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer}

수정 후 예시

#bo_cate a {display:block;position:relative;margin-left:-1px;padding:6px 10px 5px;border:1px solid #ddd;background:#f7f7f7;color:#888;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer}

주의: 사용 중인 스킨의 CSS 구조에 따라 가로 고정값 선택자가 다를 수 있습니다.

4. 결과 확인

파일 수정 후 게시판 목록 페이지로 이동하여 상단 분류 영역의 텍스트가 지정한 이미지로 정상 출력되는지 확인합니다. 작업 전 원본 list.skin.php와 style.css 파일은 백업해 두는 것이 안전합니다.

게시판 분류 영역 가로 고정값 수정 방법

그누보드 기본(basic) 게시판 스킨에서 텍스트 분류를 이미지 버튼 형태로 변경한 후, 이미지가 잘리지 않고 올바르게 정렬되도록 하려면 style.css 파일의 분류 영역 가로 고정값을 수정해야 합니다.

1. 수정 위치 확인

대상 파일: 사용하는 게시판 스킨 폴더 내의 style.css
확인 항목: #bo_cate a 선택자 규칙

2. 코드 수정 내용

기본 스킨의 style.css에 설정된 고정 너비 속성(width:90px;)을 제거하고 패딩 값을 조정하여 이미지 크기에 맞게 영역이 가변적으로 잡히도록 변경합니다. (basic 스킨 기준)

/* 수정 전 */
#bo_cate a {display:block;position:relative;margin-left:-1px;padding:6px 0 5px;width:90px;border:1px solid #ddd;background:#f7f7f7;color:#888;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer}

/* 수정 후 */
#bo_cate a {display:block;position:relative;margin-left:-1px;padding:6px 10px 5px;border:1px solid #ddd;background:#f7f7f7;color:#888;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer}

3. 조건 및 예외 사항

사용 중인 스킨의 CSS 구조 및 디자인 형태에 따라 가로 고정값이나 선택자명이 다를 수 있으므로 운영 중인 스킨의 코드를 먼저 확인해야 합니다.
이미지 파일명과 스킨 폴더 내 img 경로가 올바르게 연결되어 있는지 함께 점검합니다.

게시판 전체 탭 영역 이미지 적용 및 주석 처리 방법

그누보드 기본 게시판 스킨에서 분류(카테고리) 영역의 '전체' 탭은 기본적으로 주석 처리되어 있거나 텍스트로 출력될 수 있습니다. 전체 탭을 이미지 버튼 형태로 변경하거나 필요에 따라 제어하려면 list.skin.php 파일 상단의 분류 출력 로직을 수정해야 합니다.

1. 전체 탭 주석 해제 및 이미지 출력 코드 적용

list.skin.php 파일 상단의 ?> 안쪽 코드를 확인하여 전체 탭 관련 주석 처리된 부분을 해제하고 이미지 출력 구문을 추가할 수 있습니다.

기본 주석 형태 예시:

//$category_option.= '<li><a href="'.$category_href.'"';
//if ($sca=='')
// $category_option.= ' id="bo_cate_on"';
//$category_option.= '>전체</a></li>';

수정 방법:

주석을 해제(// 제거)한 뒤, '전체' 텍스트 대신 이미지 태그를 포함하도록 수정합니다.

$category_option.= '<li><a href="'.$category_href.'"';
if ($sca=='')
 $category_option.= ' id="bo_cate_on"';
$category_option.= '><img src="'.$board_skin_url.'/img/all.png"></a></li>';

img 폴더 안에 전체 탭에 사용할 이미지 파일을 추가하고 경로를 연결합니다.

2. style.css 가로 고정값 조정

이미지가 깨지지 않도록 style.css에서 분류 영역의 패딩과 가로 고정값을 조정합니다. 자세한 수정 코드는 Q2의 안내를 참고하십시오.

상황별 적용 가이드

이미지 준비: 스킨 내 img 폴더에 분류별 이미지 파일을 업로드합니다.
코드 수정: list.skin.php 상단 분류 루프문에 조건문을 추가하여 특정 분류명에 맞는 이미지 태그를 출력하도록 수정합니다.
스타일 조정: style.css에서 #bo_cate a의 고정 너비(width) 속성을 제거하고 패딩(padding)을 조정하여 레이아웃을 최적화합니다.
전체 탭 수정: 필요 시 list.skin.php 내 주석 처리된 전체 탭 코드를 해제하고 이미지 태그를 삽입합니다.

*작업 전 수정 대상 파일(list.skin.php, style.css)을 백업하는 것을 권장합니다.

FAQ

Q: 이미지가 깨지거나 영역을 벗어납니다.
- 원인: style.css에 고정된 width 값이 이미지 크기보다 작을 때 발생합니다.
- 대안: width 속성을 제거하고 padding 값을 조정하세요. 스킨마다 선택자명이 다를 수 있으므로 개발자 도구(F12)로 해당 영역의 클래스명을 확인하세요.
Q: 전체 탭이 보이지 않습니다.
- 원인: 기본 스킨은 전체 탭이 주석 처리되어 있을 수 있습니다.
- 대안: list.skin.php에서 //로 시작하는 전체 탭 관련 주석을 해제하고 이미지 출력 코드를 추가하세요.

참고자료

기타 참고자료

gnustudy.com — 게시판 목록페이지 상단 분류를 이미지로 변경 - 게시판스킨강좌, 그누보드5강좌

이전글HTML 프레임셋 환경에서 target top 및 프레임 해제 구성 방법 26.10.05
다음글그누보드 게시판 및 최신글 목록 비밀글 제목 숨김 처리 방법 26.10.04

댓글목록

등록된 댓글이 없습니다.