티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ

지난 강에서 타이틀과 메뉴 레이어를 완성했습니다.
이번 강에서는 우측레이어에 사이드바를 출력해봅시다.

먼저 크림슨에디터를 실행하여 simple 폴더 안의 skin.html 을 엽니다.

'우측레이어' 부분에 아래 내용을 입력합니다.


<s_sidebar>의 아랫줄에 주석으로 사이드바 그룹의 이름을 입력하면
관리화면 - 스킨 - 사이드바설정에서 아래와 같은 모습을 확인할 수 있습니다.




3단 스킨에서는 사이드바 그룹을 반드시 나누어야 하지만
현재와 같은 2단 스킨에서 사이드바 그룹을 나눈 것은 단지 관리자 모드 상에서의 편의를 위한 것입니다.

상단 사이드바 그룹에는 블로그이미지와 설명, RSS와 관리자화면 링크, 공지사항, 검색모듈, 카테고리, 태그모듈, 최근글, 최근댓글, 최근트랙백, 글 보관함, 달력, 링크모듈을 출력하고
하단 사이드바 그룹에는 카운터, 다음&티스토리 링크, 카피라이트를 출력하면 되겠군요.

각각의 사이드바는 <s_sidebar_element>과 </s_sidebar_element>사이에 html과 치환자를 사용하여 출력합니다.

아래의 내용을 주석처리된 '상단 사이드바 그룹' 바로 밑줄에 입력해주세요.
('샵샵'을 '##'으로 바꾸는 것 잊지 마세요.)

<s_sidebar_element> 아랫줄에 주석처리된 부분 역시 관리자화면에서 나타나는 사이드바 이름입니다.
아래 이미지를 보세요. 텅 비어있던 상단 사이드바 그룹에 '블로그 이미지와 설명' 모듈이 하나 생겨났죠?



브라우저에서 확인해보겠습니다.
와우, 엉망진창이군요. ㅋㅋ 제 아무리 엉망이어도 style.css에서 다듬어주면 된다는 것, 이제 아시죠? ^^

자. 크림슨에디터에서 style.css를 열고 지난 강에서 입력한 내용 밑에 아래와 같이 입력해줍니다.


내용을 살펴볼게요.
1. blogImage 레이어에 위,아래,좌,우 간격을 10px 줬어요.
2. 그리고 blogImage 레이어 안의 이미지 가로 크기를 200px로 주었어요. (가로 사이즈만 지정해주면 세로사이즈는 원본 비율로 자동으로 바뀝니다.)
sidebar(우측)레이어의 가로 크기가 220px인데, 그 안의 blogImage레이어에 간격을 10px 주고
이미지 가로크기를 200px로 정해주니 정 가운데에 위치하게 되겠죠?
blogImage레이어에 좌우 padding값 대신 text-align:center 를 입력해도 같은 결과를 볼 수 있어요.
3. blogDesc 레이어의 아래,좌,우 간격을 각각 10px로 주었고 글씨체와 글씨크기를 굴림체 8pt로 설정했어요.
4. 그리고 blogDesc 레이어 안에 있는 <span>과 </span>사이의 글씨를 굵게 하고 흰색으로 설정했어요.
skin.html에서 <span>과 </span>사이에 블로거 이름 치환자를 입력했지요.


과연 깔끔하게 잘 바뀌었을지 기대가 됩니다. +_+ 브라우저에서 확인해보겠습니다.
어때요, 어렵지 않죠?

오늘은 피곤해서 여기까지 할게요.ㅠ_ㅠ 다음시간에는 꼭 사이드바를 마무리 짓도록 하겠습니다.
보너스로 지금까지 작업물의 크림슨에디터 상의 모습을 캡쳐해서 올릴게요.
클릭해서 본인의 작업물과 비교해 보세요. ^^

보시는 것 처럼 css에서는 /* 내용 */ 과 같이 주석처리를 할 수 있습니다.

마지막으로 공연홍보 :)

project 달콤한

오늘(금요일) 저녁 8시, 함께 즐겨요. 클릭
 중급자를 위한 티스토리 스킨 수정 팁 보러가기