이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[square second] 스킨 옵션 적용 방법과 미리보기


square second 스킨에는 몇 가지 스킨 옵션이 있습니다.


특정 문구만 추가하면 바로 사용할 수 있구요.



어떤 기능들을 어떻게 사용하고, 어떻게 표시되는지 알아보겠습니다.



1. 사이드바 고정 <html class="sidebar-fixed">

<html>class="sidebar-fixed" 를 추가하면 square 스킨처럼 사이드바를 고정시킬 수 있습니다.

square 스킨 에서는 사이드바의 스크롤이 끝나면 본문이 스크롤 되었었는데요, square second 스킨에선 사이드바 따로, 본문 따로 스크롤 됩니다.

(사이드바 스크롤이 끝났다 해서 본문이 스크롤 되지 않습니다)


sidebar-fixed사이드바가 고정되고 나타난 스크롤바



사용법

<!DOCTYPE html>
<html lang="ko" class="no-js sidebar-fixed">



2. 우측 사이드바 <html class="sidebar-right">

<html>class="sidebar-right" 를 추가하면 사이드바가 우측으로 이동하고 본문 레이어 또한 우측에 붙게됩니다.


sidebar-right우측에 붙은 사이드바


사용법

<!DOCTYPE html>
<html lang="ko" class="no-js sidebar-right">



3. 사이드바 숨기기 <html class="sidebar-off">

<html>class="sidebar-off" 를 추가하면 사이드바가 숨겨지고 본문 레이어가 중앙 정렬되며, 사이드바를 열고/닫는 버튼이 활성화됩니다.


sidebar-off사이드바가 숨겨지고 나타난 버튼


사용법

<!DOCTYPE html>
<html lang="ko" class="no-js sidebar-off">



4. 본문 레이어 중앙 정렬 <html class="content-center">

본문 레이어만 중앙정렬 하고싶다면 <html>class="content-center" 를 추가하면 됩니다.


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 스킨의 리본 모양을 사용할 수 있습니다.


ribbon-original되돌아온 리본


사용법

<!DOCTYPE html>
<html lang="ko" class="no-js ribbon-original">



6. 최근 게시글 이미지 높이, 자동 조절 <html class="recent-auto-height">

※ 최근 게시글 위젯을 사이드바로 이동한 경우에만 적용됩니다.


사이드바의 최근 게시글 썸네일 높이는 150px입니다. 이미지 높이가 길던, 작던, 이미지가 있던, 없던 150px 고정이죠.

만약 세로로 긴 이미지의 높이를 그대로 출력하고 싶다면 <html>class="recent-auto-height" 를 추가하면 됩니다.


비교를 위해 두 장의 스크린샷을 준비했습니다.


recent-auto-height none적용 전 고정된 높이의 썸네일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-offsidebar-right 를 같이 사용하면 됩니다.