중급자를 위한 티스토리 스킨 팁 - body ID 활용하기

많이들 아시겠지만 티스토리에는 body 자체에 ID를 부여해 주는 유용한 치환자가 있습니다.
보통 body ID를 블로그 메뉴(블로그,미디어로그,지역로그,태그로그,방명록)에 활용하는 것을 많이 보셨을 겁니다.
제 블로그 상단 메뉴에도 쓰인 것이 보이시죠?
하지만 이 body ID 기능은 블로그 메뉴에만 쓰기 아깝씁니다. body ID를 style.css에 잘만 활용하면
티스토리 블로그도 여느 홈페이지 처럼 어느정도 다이나믹하게 구현할 수 있습니다.

티스토리 스킨 편집 화면에서 skin.html의 스크롤바를 내려보면
<body id="[샵샵_body_id_샵샵]"> 라는 부분이 있습니다. (샵샵 → ##)
경우에 따라 id부분이 없는 스킨도 있을텐데 <body>안에 위 처럼 id="[샵샵_body_id_샵샵]" 을 입력해주면 됩니다.

이 [샵샵_body_id_샵샵]라는 치환자는 블로그의 페이지마다 다른 아이디를 body에 자동으로 생성해주는데,
그 종류는 아래와 같습니다. (더보기를 클릭하세요)

body ID 종류 더보기

현재 제 블로그의 공지사항 글은 총 4개 입니다.
상단 로고 오른쪽의 'Blog, 악보소개'와 '내소개' 그리고
좌측 CCM악보 하단의 'Key별 악보 분류'와 '가나다순 악보 분류'가 그것입니다.

티스토리 블로그에서 이렇게 네 개의 공지사항이 있을 때는
각각의 공지사항 화면 하단에 1부터 4까지의 페이지 넘버가 표시됩니다.
페이지 치환자 하나로 모든 검색결과와 포스트화면, 방명록과 공지사항에 페이지 넘버를 표시해주기 때문이지요.

그렇지만 제 블로그의 특성상 공지사항 하단의 페이지 넘버가 필요 없어서 저는 과감히 없앴습니다.
바로 body ID를 이용한 방법인데요,
블로그 내의 모든 요소들(div, table, li, img 등)이 body 안에 속해 있다는 것은 너무나도 잘 아실 겁니다.
그러므로 스타일시트에서 '공지사항 body ID'에 속한 '페이지 레이어 ID' 의 복합선택자를 만들어
display속성으로 공지사항 페이지에서만 페이지 레이어를 화면에 보이지 않게 할 수 있는 것입니다.

말이 좀 복잡하죠? ^^; 제 블로그를 예로 들어 설명하겠습니다.
listentomyheart.net의 공지사항 화면에서만 페이지 넘버가 출력되지 않게 하기로 결정했습니다.
먼저 skin.html에서 페이지 넘버를 출력하는 레이어의 ID가 'paging' 인 것을 확인했습니다.
그리고 저 위에 있는 'body ID 종류' 에서 공지사항 페이지의 ID는 tt-body-notice라는 것도 확인했습니다.
style.css에 아래 소스를 입력하니 공지사항 페이지에서만 페이지 넘버가 출력되지 않습니다. ^^

#tt-body-notice #paging {display:none}

이러한 방법으로 열한 가지 body ID를 활용해서 복합선택자를 만들고 자유롭게 스타일시트를 꾸미면
블로그 디자인에 대한 제약이 많이 줄어들것입니다.

http://99design.tistory.com
위 주소는 구작가언니와 제가 준비하고 있는 아직 미완성인 디자인가게입니다.
들어가보시면 메인화면에서는 글이 노출되지 않습니다. 태터데스크를 사용한 것이 아니라 body ID를 활용한 것입니다.
'홈으로'를 제외한 각 메뉴를 클릭하면 메인화면에 있던 디자인가게 그림 대신 글의 내용이 노출됩니다.

메인 화면(tt-body-page) 에서는 글 내용을 노출하지 않고 디자인가게 그림을 노출했습니다.
글 내용 레이어의 ID가 'article', 디자인가게 그림 레이어의 ID가 'picture'이라면
style.css에 아래와 같이 입력할 수 있습니다.

#tt-body-page #article {display:none}
#tt-body-page #picture {width:가로크기; height:세로크기; background:url('그림주소') left top no-repeat}

또한 각 메뉴 화면(tt-body-entry) 에서는 디자인가게 그림을 노출하지 않는 대신 글 내용을 노출했습니다.
style.css에 아래와 같이 입력할 수 있습니다.

#tt-body-entry #article {font:글꼴속성; color:글씨색깔; line-height:줄간격; padding:여백값}
#tt-body-entry #picture {display:none}

그리고 쓰지 않는 메뉴들인 방명록, 태그로그 등은 style.css에서 위 방법으로 모두 display:none 처리해주었습니다.
http://99design.tistory.com/guestbook 에 들어가서 확인해보세요.

저는 레이어를 숨기거나 노출하는 작고 쉬운 방법으로 body ID를 활용했을 뿐이고,
여러분들은 각각의 페이지마다 서로 다른 디자인이나 효과로
과하지 않고 아기자기한 재미가 있는 블로그를 꾸미시길 바래요. ^^

ps.) 과한 것 : 방명록 배경색은 빨간색, 지역로그 배경색은 파란색, 글 보기 화면 배경색은 초록색.
ps.) 과한 것 : 공지사항의 사이드바는 왼쪽, 미디어로그의 사이드바는 오른쪽, 태그로그의 사이드바는 아래쪽. ㅋㅋㅋㅋ

앞으로도 초보자를 위한 티스토리 스킨 강의를 계속 하면서, 중급자를 위한 티스토리 스킨 팁을 종종 올리겠습니다.

게시물에 관한 질문은 댓글로 해주시고,
티스토리 스킨에 관한 질문은 티스토리 스킨 포럼에서,
티스토리에 관한 질문은 티스토리 고객센터나 티스토리 가이드 블로그 HELP메뉴에서,
웹디자인이나 웹코딩 관련 질문은 네이버 지식인이나 수 많은 웹 관련 카페에서 하실 수 있습니다.

중급자를 위한 티스토리 스킨 팁 목록으로 보기

초보자를 위한 티스토리 스킨 제작 강의 보러가기

TRACKBACK 0 COMMENT 37

yureka01 Edit/Del Reply
아 이건 좀 어려운..
저도 제블로그 상단에 글씨 써놨는데.넣을수 있는 공부중인데 어렵더만요 ㅋ~
2009/11/16 19:17

yureka01
- Grace* Edit/Del
  
  2009/11/16 19:22
  
  유레카님도 언젠가는 중급자의 대열에~ ^^
함차가족 Edit/Del Reply
멋지네요..전 메뉴에 단순히 주소만 링크했는데..단일페이지로 보일수 있다는 매력이 맘에 드네요
2009/11/16 21:29

함차가족
- Grace* Edit/Del
  
  2009/11/16 22:02
  
  함차가족님 블로그 메뉴 부분이 깔끔하고 예쁘네요.
용진씨 Edit/Del Reply
어딘가 했더니 어제 밤에 잠깐 들렀던 곳이네요. ㅎㅎ

그림은 직접 그리신건가요? 나중에 스킨 고칠 때 컨닝 좀 하러 오겠습니다. ㅎㅎ
2009/11/17 08:19

용진씨
- Grace* Edit/Del
  
  2009/11/17 08:30
  
  제가 그린 거 아니예요. ㅎㅎ
퐈비오 Edit/Del Reply
오우
전 아직 중급자가 아닌가봐요 ㅠㅜ
역시 기초도 없이 아무대나 만지는것만으로는 그래이스님의 스킬을 따라갈수는 없군효 ㅠ
2009/11/17 08:27

퐈비오
- Grace* Edit/Del
  
  2009/11/17 08:30
  
  오, 실시간 댓글이네요. 신기..
rosyelisa Edit/Del Reply
네 이런 강좌 좋아요!
우선 게임 몇판 하고 커피도 마시고 음악도 듣고 난 뒤에 할래요...
사실 디자인 가게 메인을 보고 감탄하다가...생각회로가 멈췄어요^^;
공부 열심히 해야지!!
2009/11/17 15:46

rosyelisa
- Grace* Edit/Del
  
  2009/11/19 07:30
  
  화이팅 ^^
mark Edit/Del Reply
이런걸 한번 죽~ 읽어 알게되는 것도 아니고(저의 경우에는..) 아무튼 이해하고 응용하고 싶은데 그게 잘 안되네요. 쩝
2009/11/17 22:37

mark
- Grace* Edit/Del
  
  2009/11/19 07:29
  
  넴.. 어렵지 않게 응용할 수 있는 중급자를 위한 팁이예요.
  언젠가 그 대열에 합류하시기를. ^^
드자이너김군 Edit/Del Reply
음.. 전 언제나 이런 멋진 스킨관련글을 쓸수 있을지..
회사 홈피 만드는데도 완전 힘들고..ㅠㅠ
표준화는 노가다에효~~ ㅠㅠ
2009/11/18 15:42

드자이너김군
- Grace* Edit/Del
  
  2009/11/19 07:29
  
  표준화.. ㅠ_ㅠ
  맞아요. 머리 아픔.
용의자 Edit/Del Reply
우왕~ 정말 유용한 정보에요. ㅎㅎ
2009/11/19 22:48

용의자
- Grace* Edit/Del
  
  2009/11/22 10:03
  
  감사합니다. ^-^

MoreCreative Edit/Del Reply

좀 자세히 읽어봤는데
좀 어려운;;
설명에 결과물 스샷이 있으면 이해가 빠를거 같아요;
번거로우시겠지만;;ㅎㅎ

항상 잘 보고 있습니다~

2009/11/21 11:57

MoreCreative

Grace* Edit/Del

2009/11/22 12:32

이 팁을 초보자에게 일일이 캡쳐하며 풀어서 설명하기엔 시간적, 정신적으로 여유가 없네요. ㅎㅎ

중급자를 위한 팁입니당.

popeye Edit/Del Reply

오웃 좋은 공부입니다.
근데, 텍스트큐브닷컴에서도 body ID가 지원되는 가요?
해 봐야겠어요^^

2009/11/23 05:32

popeye

Grace* Edit/Del

2009/11/25 15:27

텍큐를 안써봐서 모르겠어요. ^-^
Edit/Del

2010/01/17 23:02

비밀댓글 입니다

Grace* Edit/Del

2010/01/18 11:36

글쎄요;; 치환자라서 말씀하신 주소에선 안 나타나는 게 아닐지.

skin.html과 style.css 같은 경로에 있는 것 맞구요..

말씀하신 그 경로에서 소스보기를 하면 원본 소스와 흡사한 소스가 나오고, 원래의 url (ㅁㅁㅁ.tistory.com)에서 소스보기를 하면 당연히 첫번째 페이지의 소스만 나오는 거죠..

말씀하신 경로의 주소에서 소스보기 한 것과 원래 소스의 다른 부분은
head의 자바스크립트 부분과 body의 ID와 onload 부분 뿐인 것 같네요.

텍큐에도 body 아이디를 지원한다고 들었는데
저 위의 방법대로 안 된다면
텍큐를 사용하는 블로거가 올린 팁이 있는지 검색해보시는 게..

그리고 소스보기로는 원래 원본소스와 완벽히 똑같이 볼 수 없답니다.
이유는 저도 잘 모르나 검색해 보시면 나오지 않을까요..

popeye Edit/Del

2010/01/18 18:16

ㅎㅎ 원인을 알았습니다. 다르게 보이도록 할 수도 있다는 것을... ㅋ
참고만 하도록 위 가게의 위 상태.. html을 부탁드립니다.

popeye Edit/Del

2010/01/22 07:43

텍큐닷컴에서는 body 아이디를 지원하지 않습니다.
치환되지 않는 것을 확인했습니다. ^^

ddd Edit/Del Reply

유용한 자료 감사합니다! ^^ 정말 필요했던 팁이였어요ㅠㅠ
그런데 초보라 잘 이해가 안되는데 #tt-body-notice #paging {display:none}를
style.css의 어디에 어떻게 넣어야 하나요?
style.css에 넣어도 공지사항 하단의 페이지넘버가 안없어져서요 ㅠ.ㅠ

2009/11/23 13:12

ddd

Grace* Edit/Del

2009/11/25 15:27

사용하시는 스킨의 페이지 표시 부분 레이어 ID가 paging 이 맞는지 확인하셔야 합니다.
style.css의 아무데나 넣으시면 됩니다.

마늘 Edit/Del Reply

안녕하세요 어쩌다보니 그레이스님 블로그에 들어와서 스킨 만들기 강좌를 쭉 보고 나름 스킨을 만들어 보게 된 마늘이라고 합니다. 정말 유용한 정보 너무너무너무너무 감사합니다.
앞으로도 꼬박꼬박 들러서 공부 많이 하겠습니다. ^^
아참 지금 제 블로그 스킨은 강좌 보고 만든거니까 들러보시구 조언좀 부탁 드릴게요 ^^

2010/01/04 19:09

마늘

Grace* Edit/Del

2010/01/04 22:17

깔끔한 블로그네요. ^^
그런데 지금 구글 크롬에서 보구 있는데요, 메뉴가 header 영역 아래로 밀려나보인답니다.

마늘 Edit/Del

2010/01/05 17:07

헤더 height 높이를 조절했더니 그 현상은 사라졌습니다. 갈 길이 너무 멀어요 댓글,트랙백 등등
게다가 뷰,믹시 이런 버튼들 깔끔하게 정리하고 그런거있죠~~
궁금한 것들에 대한 포스팅을 기대하면서 즐거운 마음으로 기다리겠습니다. ^^

YYY Edit/Del Reply

저는 언제쯤 그레이스 블로그처럼..ㅠㅠ

아, 한가지 궁금한 사항이..
공지사항에 (사이드바에 나타나는 것처럼) 최근글 목록을 노출시킬 수는 없을까요?
그리고 첫페이지를 최근글이 아닌 제가 원하는 페이지로 설정할 수는 없는건지..
여기저기 헤매다가 답이 안나와서요..ㅠㅠ 앗.. 궁금한 것이 한가지가 아니군요..^^;;

2010/01/24 23:45

YYY

Grace* Edit/Del

2010/02/05 10:40

첫페이지 꾸미는 건 플러그인 태터데스크로 가능합니다.
공지사항에 최근글 목록 노출시키는 건 안 해봤는데
한번 사이드바 치환자를 공지사항 안에 넣어보세요.

YYY Edit/Del

2010/02/07 00:22

고맙습니다. ^^

솜다리 Edit/Del Reply
안녕하세요^^ 어쩌다 블로그를 만들게 되었는데 잘안되는게 있어서 고민하다가
여기까지 왔습니다. http://www.sktstory.com/ 여기 메인에 나오는 움직이는 화면은 어떻게 하나요?
괜히 블로그 만들어준다고 했다가 헤메기만 합니다.
sohmdari@hanmail.net
2010/02/05 17:11

솜다리
- Grace* Edit/Del
  
  2010/02/06 01:29
  
  글쎄요..
하늘 Edit/Del Reply
좋은 강의 고맙습니다. ^^
저도 body Id를 좀 이용해보고 싶은데.. 살펴보니 제 스킨에는 말씀하신 <body id="[샵샵_body_id_샵샵]">, 이 부분이 없더라구요. 그래서 <body>밑부분에 복사해서 넣고 style에 가르쳐주신 것들을 입력해봤는데 아무런 변화가 없더라구요. ㅡㅡ; 저는 첫페이지를 꾸미려는 것이 아니라 누군가 제 블로그에 들어왔을때 제가 원하는 페이지가 화면 첫 부분에 보여지게 하고 싶어서요.. 방법이 없을까요? 여기저기 헤매다가 혹시나 싶은맘에 여쭤봅니다..^^;
2010/05/16 19:51

하늘
- Grace* Edit/Del
  
  2010/05/17 10:23
  
  블로그 주소가 없으니 저도 알 길이 없어요..
  참고로 티스토리 블로그만 됩니다.
그리믈 Edit/Del Reply
감사합니다! 잘배우고가요
2010/06/16 18:28

그리믈