[게시판 목록 리스트 글자 크기, 본문 글자 크기 CSS로 조절하기 - 스킨 수정]
그누보드 스킨 수정 경로
한동안 한국의 사이트들은 작은 글씨, 오밀조밀한 배치가 유행했었습니다.
지금 보면 눈이 아파서 어떻게 사용했을까 할 정도로 촘촘하고 글자도 작습니다.
물론 당시엔 모니터 해상도가 낮아서 지금보다 상대적으로 글자가 컸던 이유도 있습니다.
그러나 그런 점을 감안하더라도 현재의 사이트들은 글자 크기가 많이 커졌습니다.
대부분의 게시판 목록과 본문 글자 크기는 CSS를 사용하여 한 번에 조절하고 있습니다.
그누보드의 경우에도 마찬가지 입니다.
특정 부분에 CSS를 적용하는 것은 굳이 그누보드가 아니더라도 다 같으니, 스킨에 대해서 알아보도록 합시다.
그누보드에서 기본으로 적용된 스킨은 "그누보드5"를 기준으로 봤을 때 theme폴더 아래의 skin폴더에 있습니다.
그누보드 스킨 폴더의 경로를 다 적으면 아래와 같으니 FTP로 접속하여 따라가 보길 바랍니다.
그누보드 테마 적용 시의 스킨 경로 : www/theme/basic/skin/board/basic
여기서 열어봐야 하는 것은 두 개의 파일입니다. 이 두 개로 게시판 목록 글자 크기와 본문 글자 크기를 CSS로 조절할 수 있습니다.
게시판의 목록과 내용을 고칠 것이니 board스킨으로 이동해서 작업을 합니다.
게시판 글자 크기, 본문 글자 크기 조절
list.skin.php과 view.skin.php에 있는 제목 부분과 본문 부분을 CSS파일에서 고치는 것이 목적입니다.
만약 비슷한 그누보드 버전을 사용한다면 bo_tit라는 class와 bo_v_con라는 id가 같을 것이니 바로 CSS파일을 열어서 편집해도 됩니다.
같은 폴더 안에 있는 style.css 파일을 엽니다. 스킨의 CSS파일은 CSS폴더가 아니라 각각의 스킨 폴더 안에 있으니 헷갈리면 안 됩니다.
style.css에서 에디터의 찾기기능으로 bo_tit와 bo_v_con를 찾습니다.
이 두 개에는 글자 크기에 대한 어떤 CSS도 없습니다. 그래서 글자가 작게 보이는 것입니다. 여기에 font-size:숫자em;를 추가하면 됩니다. 또는 상대값인 %를 이용해서 글자의 크기를 조절해도 됩니다.
예를들어 bo_tit를 조절해서 게시판 리스트 글자 크기를 조절하는 것은 아래와 같습니다.
원래 제목 CSS 코드 : .bo_tit{display:block;color:#000; font-weight:bold;}
수정 제목 CSS 코드 : .bo_tit{display:block;color:#000; font-size:1.3em;}
게시판 목록 글자 크기를 크게 하니 너무 두껍게 보여서 bold를 삭제하고 1.3em정도로 지정해 주었습니다. %로는 130% 정도를 넣어줘도 됩니다.
#bo_v_con도 마찬가지로 수정하면 합니다. 같은 style.css 파일에 들어 있습니다.
그누보드 이외의 다른 HTML문서도 위와 원리가 같습니다. 어디서나 같은 원리로 사용할 수 있습니다.
다만, 제목에 그누보드를 붙인 것은 스킨파일을 고치는 것이기 때문에 그리했습니다.
게시판 본문 글자 크기와 게시판 목록 리스트 글자 크기는 CSS로 가볍게 수정할 수 있으니 금방 적용시킬 수 있습니다.
