Section 7 - 티스토리 반응형 스킨 만들기 - sidebar element 넌 또 뭐야?

저번 섹션에선 사이드바에 대한 개념 및 영역 지정 방법을 알아봤습니다.

이제 우리는 사이드바 영역을 지정했으니 그 안에 모듈을 하나하나 채워나가면 되는 것이죠.

우선 간단하게 매번 반복하는 치환자 없이 간단한 배너나 안내글을 html 코드를 이용하여 사이드바 영역에 고정시키는 모듈을 만들어보겠습니다.

STEP 1. SIDEBAR element 영역 지정

사이드바 영역 지정은 <s_sidebar> 이지만 사이드바 안에 들어가는 모듈들의 영역 지정은 <s_sidebar_element>라는 태그를 사용해야 합니다.
말 그대로 사이드바 요소라는 거죵~
그럼 복습!! 티스토리 치환자가 돌아가는 영역 지정은 <s_t3></s_t3> 사이드바는 <s_sidebar></s_sidebar> 사이드바 모듈은 <s_sidebar_element></s_sidebar_element> s_ 이게 핵심인듯하네요.

구조는

<s_t3>

<s_sidebar>

<s_sidebar_element>

</s_sidebar_element>

</s_sidebar>

</s_t3>

우선 위처럼 따라 만들어 봅시다.
그 후 관리자 -> 꾸미기 -> 사이드바 화면으로 이동하면 아래와 같이 변화 된 모습을 볼 수 있습니다.

<s_sidebar_element> 바로 아래 html 주석이 사이드바 설정화면의 모듈명이 되는 것입니다!!
이제 sidebar_element가 어떻게 돌아가는지 알았으니 실전 투입!!

STEP 2. 사이드바 모듈 실전 만들기

현재 블로그 스킨을 만들고 있으니 당분간은 이 모듈을 이용하여 사이드바에 "블로그 스킨 제작중입니다"라고 안내문구를 넣도록 하겠습니다.

위 처럼  skin.html 파일을 수정하시고 "관리자 -> 꾸미기 -> 사이드바"로 가셔서 모듈을 사이드바 1 영역으로 추가 합니다.

추가하시고 "변경사항 저장" 버튼을 눌러서 꼭 저장하세요.

그리고 잘 나오는지 블로그로 이동해서 보면~ 아래와 같이 뙇!!!!!

잘 나오네요 ㅡ/,.ㅡ 후훗

※ 깨알 팁 : 모듈을 이용하여 사이드바에 안내문구를 넣었습니다. 꼴 보기 싫다고 skin.html 삭제보다는 사이드바 관리에서 "빼기"를 이용하여 안보이게 할 수 있답니다. 사람일은 모르는 겁니다.
나중에 다시 쓸 수 있으니 소스 삭제보다는 모듈 빼기를 이용하도록 하는걸 추천 드립니다. ㅡ/,.ㅡ)b

기초적인 사이드바는 여기까지입니다.
다음 부터는 치환자를 이용하여 사이드바에서 꼭 필요한 모듈들을 하나하나 만들도록 하겠습니다.

고생하셨습니다.