그누보드 전체 게시판 틀(레이아웃) 가운데 정렬 방법

• 목록
• 스크랩

그누보드 게시판 전체 레이아웃을 화면 가운데로 정렬하면서 내부 글 내용과 작성일 등 콘텐츠의 기존 정렬 상태를 유지하는 실용적인 방법을 안내합니다.

그누보드 게시판 레이아웃 정렬 시 <center> 태그 대신 <div>와 CSS를 써야 하는 이유

그누보드에서 게시판 레이아웃을 가운데로 정렬하기 위해 <center> 태그를 사용하면, 게시판 내부의 작성자, 작성일, 조회수 등 모든 하위 요소까지 가운데로 정렬되는 문제가 발생합니다. 따라서 전체 틀만 중앙으로 옮기고 내부 콘텐츠는 기존 정렬 상태를 유지하려면 <center> 태그 대신 <div> 태그와 CSS의 margin: 0 auto 속성을 사용해야 합니다.

적용 방법

전체 게시판 일괄 적용은 _head.php와 _tail.php를, 특정 게시판만 적용하려면 해당 스킨 폴더 내 list.skin.php, view.skin.php, write.skin.php 파일을 수정합니다. 상세한 적용 절차는 아래 각 항목을 참고하십시오.

head.php와 tail.php를 이용한 전체 게시판 일괄 가운데 정렬 방법

그누보드 전체 게시판 레이아웃을 화면 중앙으로 정렬하면서 내부 콘텐츠의 기존 정렬 상태를 유지하려면 <center> 태그 대신 <div> 태그와 CSS margin: 0 auto 속성을 사용해야 합니다. <center> 태그를 사용할 경우 작성자, 작성일, 조회수 등 내부 요소까지 모두 가운데로 정렬되는 문제가 발생하기 때문입니다.

일괄 적용 절차

전체 게시판에 일괄적으로 적용하려면 _head.php와 _tail.php 파일을 수정합니다.

• _head.php 파일 상단: <div style="margin:0 auto;width:1000px"> 코드를 추가합니다.
• _tail.php 파일 하단: </div> 코드를 추가합니다.

※ width 값은 사이트 디자인에 맞춰 조절할 수 있습니다.

수정 전후 확인 및 주의사항

• 파일을 수정하기 전 반드시 원본 파일을 백업해 두어야 합니다.
• 수정 후 브라우저에서 게시판 페이지를 새로고침하여 전체 틀이 중앙에 위치하는지, 그리고 내부 글 목록이나 본문 내용이 기존의 왼쪽 정렬을 유지하는지 확인합니다.

게시판 파일 백업 및 수정 후 확인 방법

그누보드 게시판 파일을 수정하기 전과 후에는 안전한 적용을 위해 다음 절차를 거쳐야 합니다.

1. 수정 전 원본 파일 백업

파일을 수정하기 전 반드시 원본 파일을 백업해 두어야 합니다.

2. 수정 후 적용 여부 확인

수정 후에는 브라우저에서 게시판 페이지를 새로고침하여 다음 사항을 확인합니다.

• 전체 틀이 화면 중앙에 위치하는지 확인합니다.
• 내부 글 목록이나 본문 내용이 기존의 왼쪽 정렬을 유지하고 있는지 확인합니다.

함께 보면 좋은 글

• 그누보드 기본 메뉴 GNB 가운데 정렬 및 배경색 설정 방법
• PHP 조건문을 활용한 페이지별 메뉴 레이아웃 분리 및 관리
• 그누보드 스마트에디터 툴바 아이콘 삭제 시 레이아웃 오류 해결 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 전체 게시판 틀(레이아웃) 가운데 정렬 방법