그누보드 게시판 목록 tr 홀짝 배경색(줄무늬) 다르게 주는 방법

페이지 정보

작성자 최고관리자
댓글 0건 조회 5회 작성일 26-10-09 16:45

그누보드 게시판 목록의 행(tr) 배경색을 홀수와 짝수가 교차하도록 줄무늬 디자인으로 변경하여 가독성을 높이는 방법을 알아봅니다.

그누보드 게시판 목록의 각 행(tr) 배경색을 교차로 출력하여 줄무늬 디자인을 적용하려면 list.skin.php 파일과 style.css 파일을 수정해야 합니다.

게시글 목록을 출력하는 반복문 안에서 홀수와 짝수 인덱스를 판별하는 식을 추가하고, <tr> 태그에 동적으로 클래스를 부여합니다.

for ($i=0; $i<count($list); $i++) { 구문 아래에 아래 코드를 추가합니다.

$bg = $i%2? 0: 1;

바로 밑에 있는 <tr> 태그를 찾아 다음과 같이 class 속성을 수정합니다.

<tr class="<?php if ($list[$i]['is_notice']) echo "bo_notice";?> bg<?php echo $bg?>">

게시판 스킨 폴더 내의 style.css 파일에 교차로 적용할 배경색 스타일을 추가합니다.

#bo_list tr.bg0 {background:#fafafa}
#bo_list tr.bg1 {background:#ffffff}

Q1에서 설명한 줄무늬 적용 절차를 마친 후, 마우스 오버 시 색상 변경이 필요한 경우 아래 내용을 참고하세요.

bg0과 bg1 클래스가 지정된 상태에서 마우스를 올렸을 때 색상이 정상적으로 변경되지 않는다면, 선택자에 :hover를 추가하여 스타일을 재정의할 수 있습니다.

#bo_list tr.bg0:hover,
#bo_list tr.bg1:hover {
 background: #eff3f9;
}

내 상황: 그누보드 게시판 목록의 각 행(tr) 배경색을 교차로 지정하여 가독성을 높이고자 할 때
선택 기준: list.skin.php 파일의 반복문 내에서 홀짝 인덱스를 판별해 동적 클래스를 부여하고, style.css에서 배경색을 일괄 정의하는 방식
다음 행동: list.skin.php에서 $bg = $i%2? 0: 1; 코드를 추가하고 <tr> 태그에 클래스를 넣은 뒤, style.css에 #bo_list tr.bg0, #bo_list tr.bg1 스타일을 반영

예외 및 대안: 웹브라우저 캐시 또는 그누보드 자산 파일 버전 문제로 이전 CSS가 유지될 수 있습니다. 브라우저 강력 새로고침(Ctrl + F5)을 진행하거나, CSS 수정 후 캐시 삭제 또는 관련 버전 설정 파일을 확인해 보세요.

등록된 댓글이 없습니다.