Section 6 - 티스토리 반응형 스킨 만들기 - sidebar 넌 누구냐?

저번 section 5에서는 헤더를 만들었고, 이번에는 sidebar를 만듭니다.

그리고 footer까지 완성하면 앞으로 포스트를 담을 그릇이 어느정도 완성이 되는 것이지요. ㅡ/,.ㅡ;;

이번 sidebar는 다른 영역과 다르게 블로그의 글 관련된 정보들을 모아서 보여주는 기능이 들어가므로 많은 티스토리 치환자가 들어가게 됩니다.

사이드바 영역에 들어가는 예 : 

공지사항, 최근에 올라온 글, 최근에 달린 댓글, 링크, 달력, 태그 클라우드, 글 보관함, 방문자 카운트, 배너 등등 우리가 넣고 싶은것들 모두다 ㅡ/.,ㅡ;;

그렇다고 한번에 다 입력하는 것이 아닌 필요한 모듈에 따라 치환자가 달라지므로 부담을 가질 필요는 없습니다.

본격적으로 사이드바 작업을 시작하기전에 기초적인 이해를 먼저하고 프론트엔드 작업을 시작하겠습니다.

DESCRIPTION. SIDEBAR의 기본

티스토리 관리자 모드 -> 꾸미기 -> 사이드바 메뉴로 접근하면 사이드바 관련 설정을 하실 수 있습니다.

여기서 기본 모듈과 사용자 모듈 두가지의 모듈 형태로 나눠지는데

기본 모듈은 티스토리에서 기본적으로 제공하는 모듈이고, 사용자 모듈은 우리가 앞으로 추가할 모듈입니다.

위 그림은 현재까지 작업한 스킨파일을 적용 후 사이드바 관리 화면입니다.

기본 모듈도 없고 사용자 모듈도 없습니다.

이유는 사이드바 영역을 만들지 않았고, 사이드바 영역안에 사이드바 모듈을 만들지 않았기 때문에 하나도 안나오는 겁니다.

앞으로 우리가 만들어야 하는 것들이죠. ㅡ/,.ㅡ;;

STEP 1. SIDEBAR 영역 만들기

티스토리 관리자 모드에서 사이드바를 컨트롤 할 수 있도록 하려면 모듈을 담을 사이드바 영역을 지정해줘야 합니다.

skin.html 파일에서 div id="sidebar" 을 찾아서 사이드바 영역을 지정합니다.

#sidebar

<s_sidebar></s_sidebar>이렇게 치환자를 열고 닫으면 영역 지정 끝!!

사이드바 영역 지정은 하고 싶은 곳에서 하면 됩니다. 꼭 <div id="sidebar"> 안에다가 할 필요가 없습니다.
id값도 꼭 sidebar라고 지정을 안해도 된다는 거죠.
id는 그냥 html 요소의 id를 지정하는 것입니다. 티스토리와는 전혀~관련이 없다는 것이죠.
하지만~ 스킨 만들기에서 사이드바 영역은 <div id="sidebar">에다가 할 것이기 때문에 위처럼 지정합니다.

위와 같이 소스를 입력했다면 다시 관리자 -> 꾸미기 -> 사이드바 설정으로 가서 화면을 확인하면 아래와 같이 확인이 되실겁니다.

짜잔~사이드바 영역이 없었을땐 안나왔던 것들이 나오기 시작합니다.

기본 모듈을 사이드바 영역으로 넣으려면 기본 모듈에서 " + " 버튼을 누르면 사이드바 영역으로 들어갑니다.

사이드바 1에 적용 된 플러그인의 순서도 마찬가지로 드래그로 수정이 가능합니다.
이렇게 적용해서 "변경사항 저장" 버튼을 누르고 블로그 화면을 확인하면 아래와 같은 결과를 얻습니다.

와~ 진짜 허접한 모듈이 나왔네요......

ㅡ/.,ㅡ;;

STEP 2. SIDEBAR 영역 여러개 만들기

대충 사이드바를 이해하셨나요?

걍 <s_sidebar></s_sidebar>를 만들면 영역이 만들어 지는 겁니다.
그런데, 사이드바1 이라고 써이는건 왜 일까요?
사이드바2, 사이드바3도 있다라는걸 간접적으로 알려주는 것처럼 후후훗 ㅡ/,.ㅡ)+
눈치 빠른 사람은 이미 눈치채셨겠지만 <s_sidebar>는 하나만 넣을 수 있는게 아니고 원하는 곳에 계속 넣을 수 있습니다.
(제가 사이드바 21개까지 추가해봤는데 그 이상으로도 계속 되는거 같습니다..;;)

소스 테스트!!

.
.
.

그렇다고 너무 많이 넣지 마세요~ 아래와 같은 부작용이 ㅎㅎ

드래그로 추가하면 한방에 해결되지만요~ㅎㅎ

이 많은 사이드바는 왜 필요할까요?
웹에서 자주 접하는 디자인을 보시면 sidebar, bottom(footer)부분에도 최신글이나 블로그 정보, 최신 댓글 목록등이 나옵니다.
한마디로 모듈 영역이 모두 다 분리되어 있다는 거죠, 티스토리는 그 모듈 영역에 사이드바라는 영역을 지정하여 "기본 모듈 / 사용자 모듈"을 추가하거나 빼기가 가능하게 하여 관리의 용이성을 높혀 주는것이죠~

※ 깨알 정보 : 모듈은 각 사이드바 영역에 중복으로 넣을 수 있다는거 참고하시고요.(검색창을 사이드바1,2,3,4 등등에 다 넣을 수 있음)

다음엔 본격적으로 사이드바 영역 안에 들어가는 사용자 모듈을 추가하는 방법을 알아보도록 하겠습니다.