[square second] 스킨 옵션 적용 방법과 미리보기
square second 스킨에는 몇 가지 스킨 옵션이 있습니다.
특정 문구만 추가하면 바로 사용할 수 있구요.
어떤 기능들을 어떻게 사용하고, 어떻게 표시되는지 알아보겠습니다.
1. 사이드바 고정 <html class="sidebar-fixed">
<html> 에 class="sidebar-fixed" 를 추가하면 square 스킨처럼 사이드바를 고정시킬 수 있습니다.
square 스킨 에서는 사이드바의 스크롤이 끝나면 본문이 스크롤 되었었는데요, square second 스킨에선 사이드바 따로, 본문 따로 스크롤 됩니다.
(사이드바 스크롤이 끝났다 해서 본문이 스크롤 되지 않습니다)
사용법
<!DOCTYPE html> <html lang="ko" class="no-js sidebar-fixed">
2. 우측 사이드바 <html class="sidebar-right">
<html> 에 class="sidebar-right" 를 추가하면 사이드바가 우측으로 이동하고 본문 레이어 또한 우측에 붙게됩니다.
사용법
<!DOCTYPE html> <html lang="ko" class="no-js sidebar-right">
3. 사이드바 숨기기 <html class="sidebar-off">
<html> 에 class="sidebar-off" 를 추가하면 사이드바가 숨겨지고 본문 레이어가 중앙 정렬되며, 사이드바를 열고/닫는 버튼이 활성화됩니다.
사용법
<!DOCTYPE html> <html lang="ko" class="no-js sidebar-off">
4. 본문 레이어 중앙 정렬 <html class="content-center">
본문 레이어만 중앙정렬 하고싶다면 <html> 에 class="content-center" 를 추가하면 됩니다.
사용법
<!DOCTYPE html> <html lang="ko" class="no-js content-center">
5. 작성일 리본 디자인 되돌리기 <html class="ribbon-original">
square 스킨의 리본은 끝이 뾰족합니다.
반면 square second 스킨의 리본은 끝이 접힌 모습이죠.
<html> 에 class="ribbon-original" 을 입력하면 square 스킨의 리본 모양을 사용할 수 있습니다.
사용법
<!DOCTYPE html> <html lang="ko" class="no-js ribbon-original">
6. 최근 게시글 이미지 높이, 자동 조절 <html class="recent-auto-height">
※ 최근 게시글 위젯을 사이드바로 이동한 경우에만 적용됩니다.
사이드바의 최근 게시글 썸네일 높이는 150px입니다. 이미지 높이가 길던, 작던, 이미지가 있던, 없던 150px 고정이죠.
만약 세로로 긴 이미지의 높이를 그대로 출력하고 싶다면 <html> 에 class="recent-auto-height" 를 추가하면 됩니다.
비교를 위해 두 장의 스크린샷을 준비했습니다.
 적용 전 고정된 높이의 썸네일 |  적용 후 높아진 썸네일 |
사용법
<!DOCTYPE html> <html lang="ko" class="no-js recent-auto-height">
7. 새 글 작성시 나오는 NEW 아이콘 변경
블로그에 새 글 작성시 사이드바 카테고리 위젯에 NEW 아이콘이 나옵니다.
하지만 square second 스킨에선 아이콘 대신 텍스트를 출력합니다.
이 텍스트는 글자와 색상을 원하는 값으로 변경 가능합니다. skin.html 파일 제일 하단에 있는 다음 소스를 사용하면 됩니다.
<script> var new_text = "N" var new_text_color = "#ff9595"; </script>
var new_text = "N" 새 글 작성시 나타나는 글자
var new_text_color = "#ff9595"; 글자 색상
질문 답변
Q. 옵션은 한번에 하나만 적용할 수 있나요?
A. 아닙니다. class="sidebar-right sidebar-fixed" 처럼 두 가지 동시에 사용 가능합니다.
Q. 옵션을 적용할 때 사용하는 class에 순서가 있나요?
A. 없습니다. 순서 상관없이 중복 적용 가능합니다.
Q. 사이드바를 숨기면 나오는 버튼을 오른쪽으로 보내고싶어요.
A. sidebar-off 와 sidebar-right 를 같이 사용하면 됩니다.