그누보드 게시판 목록 줄 간격 및 행 높이 CSS 조절 방법

• 목록
• 스크랩

그누보드 게시판 목록 줄 간격 및 행 높이 CSS 조절 방법

그누보드 운영 중 게시판 목록의 행 높이가 너무 넓어 답답할 때, 스킨의 style.css 파일을 수정하여 줄 간격을 알맞게 줄이는 방법을 안내합니다.

그누보드 게시판 목록 줄 간격 및 행 높이 조절 방법

그누보드 게시판 목록의 행 높이와 상단 타이틀 간격을 조절하려면 게시판 스킨 폴더에 있는 style.css 파일을 수정해야 합니다.

1. 수정 파일 위치

• 경로: 게시판 스킨 폴더 내 style.css

2. CSS 속성 수정 방법

• 목록 행 높이 줄이기 (td)목록 항목(td 클래스)에 height 값을 추가하거나 조절합니다.

  #bo_list.tbl_head01 td {
  height: 35px;
  }

• 상단 타이틀 간격 줄이기 (thead th)번호, 제목, 글쓴이, 조회, 날짜 등이 포함된 상단 타이틀 영역의 padding 값을 줄입니다.

  #bo_list.tbl_head01 thead th {
  padding: 10px 0;
  }

3. 적용 후 확인 및 주의사항

• 코드를 수정한 뒤 브라우저 화면에 바로 반영되지 않으면 브라우저 캐시를 삭제한 후 새로고침해야 합니다.
• css/default.css 파일에 기본 전역 설정(height: 60px 등)이 포함되어 있는 경우, default.css에서 수정하면 게시판 목록뿐만 아니라 new.php 페이지 목록 등 다른 곳에도 모두 반영되므로 영향 범위를 확인해야 합니다.

그누보드 게시판 목록 줄 간격 및 행 높이 조절 방법

그누보드 게시판 목록의 행 높이나 줄 간격을 줄이려면 게시판 스킨 폴더 내의 style.css 파일을 수정해야 합니다.

1. 수정 파일 및 위치

• 수정 파일: 게시판 스킨 폴더에 있는 style.css
• 목록 항목(td)의 height 값과 타이틀(th)의 padding 값을 조절하여 간격을 줄일 수 있습니다.

2. CSS 적용 예시

• 목록 행 높이 조절 (td):

  #bo_list.tbl_head01 td {
  height: 35px;
  }

• 목록 상단 타이틀 번호, 제목, 글쓴이, 조회, 날짜 부분 조절 (th):

  #bo_list.tbl_head01 thead th {
  padding: 10px 0;
  }

3. 수정 후 즉시 반영되지 않을 때 조치 사항

• style.css를 수정했음에도 브라우저 화면에 변경 사항이 바로 반영되지 않는다면, 브라우저 캐시 삭제 후 새로고침을 진행해야 합니다.

4. 주의사항 (default.css 전역 설정)

• css/default.css 파일에 기본값(height: 60px 등)이 전역 설정되어 있는 경우가 있습니다.
• default.css에서 수정할 경우 게시판 목록뿐만 아니라 new.php 페이지 목록 등 다른 곳에도 모두 반영되므로 영향을 주는 범위를 확인해야 합니다.

그누보드 5.3 및 5.4 버전별 목록 CSS 기본값과 주의사항

그누보드 게시판 목록의 행 높이 및 패딩을 조절하는 공통 규칙과 버전별 기본 설정값은 다음과 같습니다.

버전별 기본 CSS 설정값

• 그누보드 5.3 버전
  • .tbl_head01 td: color:#666; background:#fff; padding:10px 5px; border-top:1px solid #ecf0f1; line-height:1.4em; height:60px; word-break:break-all
  • .tbl_head01 thead th: padding:10px 0; font-weight:normal; text-align:center; border-bottom:1px solid #ddd; background:#fafafa; height:40px
• 그누보드 5.4 버전
  • .tbl_head01 td: color:#666; padding:10px 5px; border-top:1px solid #ecf0f1; border-bottom:1px solid #ecf0f1; line-height:1.4em; height:60px; word-break:break-all
  • .tbl_head01 thead th: padding:20px 0; font-weight:normal; text-align:center; border-bottom:1px solid #ececec; height:40px

주의사항 및 영향 범위

• css/default.css 파일에서 기본 값이 전역 설정된 경우, height:60px과 같은 설정을 수정하면 게시판 목록뿐만 아니라 new.php 페이지 목록 등 다른 곳까지 모두 반영되므로 주의해야 합니다.

그누보드 게시판 목록 줄 간격 및 행 높이 조절 가이드

• 내 상황: 그누보드 게시판 목록의 행 높이나 줄 간격이 너무 넓어 축소하고 싶음
• 선택 기준: 게시판 스킨 폴더 내의 style.css에서 #bo_list.tbl_head01 td 및 thead th 값을 수정
• 다음 행동: style.css 수정 후 브라우저 캐시 삭제 및 새로고침 수행 (css/default.css 전역 설정 수정 시 다른 페이지 영향 범위 확인)

실전 FAQ

Q. style.css를 수정했는데도 게시판 목록 줄 간격이 줄어들지 않습니다.

• 막히는 지점: 브라우저 캐시에 기존 CSS가 남아 있거나, 전역 설정 파일(css/default.css)의 우선순위나 다른 속성에 밀려 적용되지 않을 수 있습니다.
• 대안 및 해결: 브라우저 캐시를 완전히 삭제(Ctrl + F5 등) 후 새로고침하고, 개발자 도구를 통해 적용된 CSS 선택자(tbl_head01 td)가 덮어씌워지고 있는지 확인하세요.

함께 보면 좋은 글

• 그누보드 스마트에디터(SmartEditor2) 글쓰기 영역 높이 조절하기
• 그누보드 게시판 에디터 입력창 높이 조절 방법
• 그누보드 관리자 페이지 회원 완전 삭제 기능 추가 및 목록 출력 개수 조절 가이드

참고자료

기타 참고자료

• gnustudy.com — 게시판 목록 줄 간격 줄이기 - 게시판스킨강좌, 그누보드5강좌