답변 5개
게시판 폭 설정은 게시판을 감싸는 상자에 width 값만 넣어 줍니다. 가운데로 보내는 값은 들어가지 않습니다.
그래서 폭이 줄어든 만큼 왼쪽에 붙어 보입니다.
사용 중인 게시판 스킨 폴더의 style.css 맨 아래에 아래 내용을 추가해 보세요.
경로 예: /skin/board/basic/style.css (테마를 쓰시면 /theme/테마이름/skin/board/스킨이름/style.css)
#bo_list, #bo_v, #bo_w { margin-left:auto; margin-right:auto; }
#bo_list는 목록, #bo_v는 글 보기, #bo_w는 글쓰기 화면입니다. 기본 스킨은 이 이름을 쓰고, 다른 스킨은 이름이 다를 수 있습니다.
적용이 안 되면 브라우저에서 F12를 눌러 게시판을 감싸는 상자의 id를 확인한 뒤 그 이름으로 바꿔 넣으시면 됩니다.
저장한 뒤에는 Ctrl+F5로 새로고침해 주세요. 브라우저에 남은 예전 CSS 때문에 바로 안 바뀌어 보일 수 있습니다.
폭 설정이 적용되는데 왼쪽에 붙는다면, 실제로 폭이 줄어든 게시판 바깥 요소의 좌우 여백을 확인해 보세요. 일반적인 블록 요소는 좌우 margin을 auto로 주면 부모 영역 안에서 중앙 정렬됩니다.
개발자 도구(F12)의 요소 선택으로 게시판을 찍고, width가 적용된 요소에 아래 속성을 임시로 넣어 먼저 확인하시면 됩니다.
margin-left: auto; margin-right: auto; max-width: 100%; box-sizing: border-box;
동작을 확인한 다음 해당 게시판 스킨의 CSS에 실제 선택자로 적용하세요. 위아래 여백을 유지하려고 margin 전체 대신 좌우만 지정한 예시입니다. float가 설정되어 있거나 position:absolute인 요소라면 이 방법만으로 해결되지 않을 수 있어 그 속성과 부모 레이아웃도 확인해야 합니다.
또한 중앙 정렬은 부모 영역 기준입니다. 부모에 사이드바나 좌우 패딩이 있으면 화면 전체의 중앙과는 다를 수 있습니다. 사용 중인 스킨명과 URL 또는 게시판 바깥 HTML/CSS를 알려주시면 적용할 선택자까지 구체적으로 확인할 수 있습니다.
참고: MDN margin 문서
답변을 작성하려면 로그인이 필요합니다.