그누보드 메인 최신글 글 수 부족 시 여백 및 높이 문제 해결 방법

• 목록
• 스크랩

그누보드 메인 최신글 글 수 부족 시 여백 및 높이 문제 해결 방법

그누보드 메인페이지에서 최신글의 등록된 글 수가 적을 때 하단 빈 공간과 높이 불균형이 발생하는 원인과 CSS min-height 속성을 활용해 세로 길이를 일정하게 맞추는 구체적인 해결 방법을 안내합니다.

메인 페이지 최신글 영역 빈 공간 원인

그누보드 메인 페이지의 최신글 영역에 출력되는 글 수가 적을 때 아래쪽에 빈 공간이 생기는 이유는 최신글 컨테이너에 고정 높이(min-height)가 설정되어 있지 않기 때문입니다. 최신글 영역은 기본적으로 출력되는 글의 양에 따라 세로 높이가 가변적으로 변하기 때문에, 설정한 글 개수보다 실제 출력된 글의 수가 적으면 컨테이너 높이가 줄어들면서 빈 여백이 발생합니다.

최신글 영역 세로 높이 고정 및 여백 문제 해결 방법

그누보드 메인 페이지의 최신글 영역에 출력되는 글 수가 적을 때 아래쪽에 빈 공간(여백)이 생기는 현상은 최신글 컨테이너에 고정 높이(min-height)가 설정되어 있지 않아 발생합니다. 이를 해결하려면 스킨의 스타일시트 파일을 수정하여 최소 높이 값을 지정해야 합니다.

1. 수정할 파일 위치 확인

• 기본 경로: skin/latest/basic/style.css
• 주의: 테마를 사용 중인 경우에는 테마 폴더 내에 있는 스킨 폴더의 파일을 수정해야 합니다.

2. CSS 코드 수정 방법

skin/latest/basic/style.css 파일을 열어 .lat 클래스를 찾아 min-height 속성을 추가합니다.

• 수정 전 기존 코드

.lat {
 position: relative;
 margin-bottom: 20px;
 overflow: hidden;
 border: 1px solid #c6cacc;
 background: #fff;
}

• 수정 후 코드 (min-height 추가)

.lat {
 position: relative;
 margin-bottom: 20px;
 overflow: hidden;
 border: 1px solid #c6cacc;
 background: #fff;
 min-height: 223px;
}

참고 사항

• min-height: 223px 값은 글 6개 출력 기준으로 설정된 적당한 값이며, 사이트 디자인과 출력하려는 글 개수에 따라 높이 값을 조절하여 적용할 수 있습니다.

그누보드 메인 최신글 글 수 부족 시 여백 및 높이 불균형 해결 방법

그누보드 메인페이지의 최신글 영역에 출력되는 글 수가 적을 때, 아래쪽에 빈 공간(여백)이 생기며 세로 높이가 달라지는 문제는 최신글 컨테이너에 고정 높이(min-height)가 설정되어 있지 않아 발생한다.

수정 파일 경로

• 기본 경로: skin/latest/basic/style.css
• 테마 사용 중인 경우: 테마 폴더 내에 있는 해당 스킨의 style.css 파일 수정

CSS 코드 수정 방법

skin/latest/basic/style.css 파일에서 .lat 클래스를 찾아 min-height 속성을 추가한다.

수정 전 코드:

.lat {
 position: relative;
 margin-bottom: 20px;
 overflow: hidden;
 border: 1px solid #c6cacc;
 background: #fff;
}

수정 후 코드 (min-height 추가):

.lat {
 position: relative;
 margin-bottom: 20px;
 overflow: hidden;
 border: 1px solid #c6cacc;
 background: #fff;
 min-height: 223px;
}

• 글 6개 출력 기준으로는 223px 값이 적당하며, 운영 중인 환경의 출력 글 수에 맞춰 높이 값을 조절하여 세로 길이를 통일할 수 있다.

그누보드 메인 최신글 여백 및 높이 불균형 문제 해결 방법

그누보드 메인페이지 최신글 영역에서 출력되는 글 수가 적을 때 아래쪽에 빈 공간(여백)이 생기며 세로 길이가 달라지는 문제는 최신글 컨테이너에 고정 높이(min-height)가 설정되어 있지 않아 발생합니다. 이를 해결하려면 CSS 파일을 수정하여 최소 높이 값을 지정해야 합니다.

수정 파일 경로

• 기본 경로: skin/latest/basic/style.css
• 테마 사용 시: 테마 폴더 내에 있는 스킨 폴더의 style.css 파일을 수정합니다.

CSS 수정 코드

skin/latest/basic/style.css 파일 안에서 .lat 클래스를 찾아 min-height 속성을 추가합니다.

수정 전 코드:

.lat {position:relative;margin-bottom:20px;overflow:hidden;border: 1px solid #c6cacc;background:#fff}

수정 후 코드:

.lat {position:relative;margin-bottom:20px;overflow:hidden;border: 1px solid #c6cacc;background:#fff;min-height:223px}

참고 사항

• min-height 값은 글 6개 출력 기준으로 223px가 적당하며, 운영 중인 사이트의 디자인이나 폰트 크기에 따라 적절한 픽셀 값으로 조정하여 적용할 수 있습니다.

상황별 판단 및 대응 가이드

내 상황	선택 기준	다음 행동
메인 최신글 영역에 글 수가 적어 아래쪽 빈 공간(여백)이 발생함	최신글 컨테이너의 세로 높이가 가변적인지 확인	skin/latest/basic/style.css (테마 사용 시 테마 폴더 내 스킨)의 .lat 클래스에 min-height 속성 추가
출력 글 개수나 디자인 변경으로 기본 높이값이 맞지 않음	현재 출력되는 글 개수와 레이아웃에 맞는 적정 높이 산정	산정한 픽셀 값으로 min-height 수치를 수정하고 메인 페이지 새로고침하여 정렬 확인

실전 FAQ

Q. 테마를 사용 중일 때 수정할 파일 위치가 다른가요?

• 답변: 네, 기본 스킨 경로(skin/latest/basic/style.css)가 아닌, 현재 적용 중인 테마 폴더 내의 스킨 경로에 위치한 style.css 파일을 수정해야 합니다.

Q. min-height 값을 어떻게 조절해야 하나요?

• 답변: 223px는 글 6개 출력 기준의 예시입니다. 출력 글 수가 다르거나 폰트 크기 등 스타일이 변경된 경우, 브라우저 개발자 도구(F12)를 통해 컨테이너의 적정 높이를 측정하여 값을 조정하십시오.

함께 보면 좋은 글

• 그누보드5 메인 화면 특정 게시판 최신글 설정 및 노출 가이드
• 그누보드 메인 페이지 최신글에서 특정 게시판 제외하는 방법

참고자료

기타 참고자료

• gnustudy.com — 메인페이지 최신글에서 글 수가 적을 때 여백 문제 - 최신글스킨강좌, 그누보드5강좌
• rebuilder.co.kr — 모듈 세로 높이 차이가 발생하는데 뭐가 문제일까요? > 질문과 답변 | 그누보드 리빌더