팁·활용

• 목록
• 스크랩

그누보드 게시판 기본 폰트 크기 변경 필요성

모니터 해상도가 커짐에 따라 그누보드 기본 스킨의 폰트 크기가 작아 가독성이 떨어질 수 있습니다. 스킨 CSS와 에디터 설정을 수정하여 글자 크기와 줄 간격을 원하는 형태로 변경할 수 있습니다.

스마트에디터를 사용하지 않을 때 스킨 수정하기

스마트에디터를 쓰지 않는 환경에서는 게시판 스킨 폴더 내의 style.css 파일을 수정합니다. 사용 중인 그누보드 버전에 따라 글쓰기 입력폼 선택자가 다를 수 있습니다.

• 그누보드 5.2.x 버전: #bo_w .tbl_frm01 textarea {font-size:14px}
• 그누보드 5.3.x 버전 이상: #bo_w .wr_content textarea {font-size:14px}

본문 내용 보기(view) 페이지의 폰트 크기와 줄 간격을 변경하려면 #bo_v_con 속성을 수정합니다.

#bo_v_con {
    margin-bottom: 30px;
    width: 100%;
    font-size: 14px;
    line-height: 1.7em;
    word-break: break-all;
    overflow: hidden;
}

스마트에디터 사용 시 추가 수정 방법

스마트에디터를 사용하는 경우 에디터 내부 파일만 수정하면 실제 본문 페이지에는 반영되지 않으므로, 앞서 설명한 스킨 폴더의 style.css 수정과 에디터 파일 수정을 함께 진행해야 합니다.

스마트에디터 설정 파일 경로에서 font-size를 조절합니다.

• 예전 버전: plugin/editor/smarteditor2/css/smart_editor2_in.css
• 최근 버전: plugin/editor/smarteditor2/css/ko_KR/smart_editor2_in.css

body, .se2_inputarea {
    margin: 0;
    padding: 0;
    font-family: '돋움', Dotum, Helvetica, Sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
}

아미나 빌더 스킨 적용 방법

아미나 빌더 기본 스킨을 사용하는 경우 그누보드 기본 스킨과 클래스명이 다르므로 게시판 스킨 폴더 내 style.css 파일에서 다음 클래스를 수정합니다.

.view-content {
    padding: 0px 15px 20px;
    font-size: 14px;
}

수정 후 확인 및 주의사항

수정 작업을 마친 후에는 브라우저 캐시를 삭제하고 변경된 화면을 확인해야 합니다. 사용 중인 스킨이나 빌더 종류에 따라 클래스명이 다를 수 있으므로 실제 적용된 환경의 요소를 점검하는 것이 좋습니다.

함께 보면 좋은 글

• 그누보드 스마트에디터 이미지 경로를 상대 경로로 변경하는 방법
• 그누보드 게시판 본문 글자 수 제한 해제 및 DB 필드 타입 변경 방법