그누보드 게시판 본문 이미지 및 텍스트 중앙 정렬 설정 방법

• 목록
• 스크랩

그누보드 게시판 본문 이미지 및 텍스트 중앙 정렬 설정 방법

그누보드 게시판 상세 보기 페이지에서 첨부 이미지와 본문 텍스트를 중앙 정렬하는 스타일시트 수정 방법을 확인하고 레이아웃을 정돈합니다.

게시판 스킨 파일 수정 위치

그누보드 게시판의 상세 보기(view) 페이지에서 첨부 이미지와 본문 내용을 중앙 정렬하려면, 그누보드 설치 경로 내 skin/board/사용중인스킨명/style.css 파일을 수정해야 합니다.

파일을 수정하기 전에 원본 파일을 반드시 백업한 후 진행합니다.

CSS 코드 추가 방법

style.css 파일을 열고 #bo_v_img와 #bo_v_con 선택자에 text-align: center; 속성을 포함한 아래 코드를 추가합니다.

#bo_v_img {
    width: 100%;
    overflow: hidden;
    text-align: center;
    zoom: 1;
}

#bo_v_con {
    margin: 10px 0 30px;
    width: 100%;
    line-height: 1.7em;
    min-height: 200px;
    word-break: break-all;
    overflow: hidden;
    text-align: center;
}

코드 적용 후 확인 및 예외 사항

코드를 저장한 뒤 웹브라우저에서 게시판 상세 페이지를 새로고침하여 이미지와 본문 텍스트가 정상적으로 중앙 정렬되는지 확인합니다.

만약 의도대로 정렬되지 않는다면 사용 중인 스킨의 CSS 구조나 클래스명이 다를 수 있으므로 관리자 페이지나 개발자 도구를 통해 선택자 명칭을 다시 확인해야 합니다.

#bovimg와 #bovcon 선택자 CSS 속성 추가 방법

그누보드 게시판 상세 보기(view) 페이지에서 첨부 이미지와 본문 내용을 중앙 정렬하려면 사용 중인 게시판 스킨 폴더 내의 style.css 파일에 text-align: center; 속성을 추가해야 합니다.

수정할 CSS 코드

파일 수정 전 원본 파일을 백업한 후, style.css 파일에 아래의 코드를 적용합니다.

#bo_v_img {
    width: 100%;
    overflow: hidden;
    text-align: center;
    zoom: 1;
}

#bo_v_con {
    margin: 10px 0 30px;
    width: 100%;
    line-height: 1.7em;
    min-height: 200px;
    word-break: break-all;
    overflow: hidden;
    text-align: center;
}

선택자별 역할

• #bo_v_img: 첨부된 이미지가 출력되는 영역을 제어하며, text-align: center; 속성을 추가하여 이미지를 중앙에 배치합니다.
• #bo_v_con: 본문 내용 전체 영역을 제어하며, text-align: center; 속성을 추가하여 텍스트를 중앙에 배치합니다.

적용 후 확인

코드를 저장한 뒤 웹브라우저에서 게시판 상세 페이지를 새로고침하여 확인합니다. 브라우저 캐시로 인해 변경 사항이 즉시 반영되지 않는다면, Ctrl + F5를 눌러 강력 새로고침을 시도하세요. 만약 의도대로 정렬되지 않는다면 사용 중인 스킨의 CSS 구조나 클래스명이 다를 수 있으므로 개발자 도구를 통해 선택자 명칭을 다시 확인해야 합니다.

상황별 판단 및 행동 가이드

내 상황	선택 기준	다음 행동
게시판 본문 글과 첨부 이미지를 중앙에 정렬하고 싶을 때	사용 중인 스킨 폴더 내 style.css 파일 수정	원본 파일 백업 후 #bo_v_img와 #bo_v_con 선택자에 text-align: center; 속성 추가
코드를 수정하고 새로고침했으나 정렬이 바뀌지 않을 때	스킨 고유의 클래스명 또는 CSS 구조 차이	웹브라우저 개발자 도구(F12)를 열어 실제 적용된 선택자 명칭 재확인

실전 FAQ

Q. style.css 수정 후에도 정렬이 그대로입니다.

• 사용 중인 스킨의 CSS 구조나 클래스명이 기본값과 다를 수 있습니다. 브라우저의 개발자 도구(F12)를 통해 해당 영역의 정확한 선택자 명칭을 확인하여 수정하십시오.

Q. 백업은 왜 필요한가요?

• 코드 수정 과정에서 오타나 문법 오류가 발생할 경우, 원본 파일이 있어야 즉시 이전 상태로 복구하여 게시판 레이아웃이 깨지는 것을 방지할 수 있습니다.

함께 보면 좋은 글

• 그누보드 기본 게시판 본문 이미지 자동 리사이징 비활성화 방법
• 그누보드 본문 이미지 클릭 시 원본 이미지 새창 열림 방지 설정 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 게시판 본문 이미지 및 텍스트 중앙 정렬하는 방법