티스토리(텍스트큐브)스킨 body id 치환자를 이용하여 현재 위치(포스트, 방명록, 공지사항 등) 확인시켜주기
제 블로그 오른쪽에 있는 메뉴를 봐 주세요. 포스트를 읽을 때는 blog라는 메뉴에 분홍색 꽃모양이 나타나고, about페이지를 클릭하면 about메뉴에 꽃모양이 나타납니다.
 BLOG페이지 |  ABOUT 페이지 |
이것은 티스토리(텍스트큐브)에서 제공하는 body id 치환자를 이용하여 만든 것입니다.
body id 치환자가 뭐야?
body id 치환자는 특정 페이지 마다 그 페이지에 해당하는 id name을 부여해 줍니다.
skin.html에 들어가 있는 body id 치환자
<body id="[샵샵_body_id_샵샵]">
body id 치환자 입니다. 샵샵은 ##으로 변경하여 넣어주셔야 합니다. 요런식으로 들어간 치환자는 직접 스킨에 적용이 되면 각 페이지에 해당되는 id name으로 변하여 출력됩니다. 치환자가 어떻게 변하는 지는 오른쪽마우스클릭 - 소스보기에서 확인할 수 있습니다.
BLOG페이지에서 소스보기를 했을 때의 body id
ABOUT페이지에서 소스보기를 했을 때의 body id
지금부터 페이지마다 다르게 나타나는 body id를 이용하여 각 페이지로 이동 시에 그 페이지의 위치(포스트, 방명록 공지사항 등)를 확인시켜주는 방법을 알아보도록 합시다.
어떻게 적용시키는 지 배우기 위해 기본 페이지의 body id="tt-body-page"와 방명록 페이지(제 블로그의 about페이지)의 body id="tt-body-guestbook" 두 가지를 가지고 설명을 하도록 하겠습니다. 더 많은 텍스트큐브 body id의 종류를 알고 싶으신 분은 그레이스님의 body id관련 포스트를 참고해 주세요~
style.css 스타일 지정방법 이해하기
먼저 div class가 "basic"으로 지정되어 있는 HTML문서를 한 번 생각해 봅시다.
이 basic이라는 class네임에 스타일을 설정하려면 어떻게 해야 될까요?
CSS 예시 1번을 봐주세요. div스타일로 배경색이 #777이 설정되어 있고 div.basic의 스타일로 #222가 설정되어 있습니다. 이럴경우 div의 배경색은 #222로 출력이 됩니다.
CSS 예시 2번을 봐주세요. div스타일로 배경색이 #777이 설정되어 있고 .div의 스타일로 #333이 설정되어 있습니다. 이럴 경우 div의 배경색은 #777로 출력이 되고 border의 색상은 #333으로 출력이 됩니다. 이름 앞에 .(점)이 붙지 않는 것 - 태그이름(body, div, a, span 등) - 에 해당하는 스타일이 제일 우선시 되며 div.basic과 같이 태그이름 뒤에 해당 class명을 붙여주면 div에서 설정해 준 것보다 div.basic이 더 우선시 되어 출력이 됩니다. 다만 div에서 설정되지 않은 내용(위 코드에서는 border-color)의 경우는 그대로 적용이 됩니다.
직접 만들어 보기
스킨파일 중 style.css를 열어보면 상단 어디쯤에 body라고 적힌 부분을 찾을 수 있을 겁니다. 바로 skin.html에 있는 <body>와 </body> 사이의 스타일을 지정해 주는 부분입니다.
body{
margin:0;
font:13px NanumGothic, 나눔고딕, Malgun Gothic, Dotum, 돋움, Gulim, 굴림;
color:#1f1f1f;
background-color:#3e3e3e;
text-align:center;
}
위 코드는 제 스킨 real blogger에 적용되어 있는 body스타일입니다. 상관은 없는 내용이지만 body 스타일을 보여드리고자 한 번 써 보았습니다. :)
skin.html에 아래와 같은 형태의 메뉴를 만들어 봅시다.
<div id="menu"> <a href="블로그링크" class="blog">블로그</a> <a href="방명록링크" class="guestbook">방명록</a> </div>
블로그와 방명록이라는 두개의 메뉴가 있습니다. 블로그의 링크에는 class명을 blog라고 주고 방명록 링크에는 class명을 guestbook이라고 줬습니다. 텍스트큐브 body id를 이용하여 기본페이지에서는 "블로그"라는 글가 굵게 변하도록, 방명록에서는 "방명록"이라는 글자가 굵게 변하도록 만들어 보겠습니다.
두 페이지에서 출력되는 각각의 body id
#menu{
메뉴레이어 스타일
}
#menu a{
color:#333;
font:14px Dotum, 돋움;
}
/*블로그메뉴*/
body#tt-body-page #menu a.blog{
font-weight:bold;
}
/*방명록메뉴*/
body#tt-body-guestbook #menu a.guestbook{
font-weight:bold;
}
블로그메뉴부분을 봅시다. body id가 기본페이지 tt-body-page일 때 class명이 blog로 지정된 메뉴가 굵게(font-weight:bold;)보이도록 설정해 줬습니다.
방명록메뉴부분을 봅시다. body id가 방명록페이지 tt-body-guestbook일 때 class명이 guestbook으로 지정된 메뉴가 굵게(font-weight:bold;)보이도록 설정해 줬습니다.
이해를 돕기 위한 그림입니다.
부족한 설명에 감이 잡히셨는지 잘 모르겠네요. 마우스오버 버튼을 만드는 원리나 기타 다양한 스타일을 응용해서 적용한다면 현재 위치를 표시해 줄 수 있는 멋진 메뉴를 만들 수 있을 거에요~~ ^ ^
http://yongja.tistory.com/trackback/103
- 티스토리 body id 별로 이미지 바꾸기 // MAHORAGA 2010/01/03 15:39 [Del]
-
바람나그네
새해 강의가 시작되었군요 ^^ 정말 명품 강의를 보여주시는군요~
울 용의자님 덕분에 많은 분들이 좋은 공부하네요~
행복 가득한 새해 둘째 날 되세요~ ㅎ -
popeye
강의실에 이착~!!
배워도 배워도 끝이 없는 배움의 길...
그래도 재미가 만땅입니다^^
오늘 강의도 고마와요. -
씨디맨
굿 강의에요. 티스토리가 근데 직접 유저가 만든 메뉴에도 아이디를 부여해주면 좋겠어요. 그럼 더 많은 메뉴를 넣고 저렇게 효과를 줄 수 있을텐데.. 그쵸
좋은 팁 잘 봤습니다. ^^-
용의자
카테고리 별 body id도 생기면 좋을텐데 말이죠 ㅎ
xxx1_1, xxx2_1 이런식으로..?
근데 있으면 좋긴 하겠지만 고급사용자 말고는 거의 손도 못 댈 것 같네요. ^ ^;;
-
-
진모씨
HISTORY는 글이긴 하나, script를 이용하여 글 주소를 파악한 뒤 HISTORY 버튼을 활성화시키면 되지 않을까요.
-
용의자
아..history부분은 notice와 연결하려고 페이지와 스타일을 만들어 뒀는데
예전 디자인 관련 포스팅을 하는 차에 임시로 거기에 연결 해 뒀어요~
-
-
-
938호
와 여러번 와서 보지만 html은 정말이지 저에게 너무 먼곳 같네요. 그냥 다운 가능한 스킨중에 좋은 거 없나 들러보는데, 정말 수고 많으십니다 ㅜ.ㅜ
-
용의자
938호님 안녕하세요~
아직 html이 익숙하지 않으셔서 그럴 거에요.
계속 보다보면 하나하나씩 눈에 보이는 것들이 생길겁니다..^ ^
-
-
하늘다래
역시 좋은 강좌 ^-^
css 에 익숙치 않으신 분들께 정말 많은 도움을 주신다죠 ^^
새해 복 많이 많이 받으세요! ^^ -
-
우치타
스킨만드는거 다음강의 올라온줄알고 에디터를 켜놓고 멍때렸습니다.. ㅋㅋㅋㅋㅋㅋㅋㅋ 이걸 찾으려고 다 읽어 본거같아요.. 무식하면 몸이 고생한다더니 ㅠㅠ
-
용의자
에고.. 그 심정 저도 잘 일죠~ ㅎㅎ
에디터는 뭐 쓰세요?
개인적으로 HTML/CSS편집기는
드림위버(CS3이상)이 제일 좋은 것 같더라구요
-
-
-
-
-
용의자
에디트 플러스 써보긴 했는데..
저는 드림위버가 더 편하더라구요.
일반적으로 코딩하시는 분들은 대게 에디트플러스를 쓰긴하는데 그게..예전에 드림위버에서 디자인 모드로 작업했을 때 코드가 지맘대로 엉키는 것 때문에 그런 것 같아요.
드림위버 코더 모드로 하면 에디트플러스 처럼 작업할 수 있는데...사람들이 드림위버에 가지는 편견이죠 ㅎ
또 자동완성기능이 있기 때문에 에디트플러스 보다 훨씬 효과적이고 빠르게 작업할 수 있어요.
뭐 그래도 손에 익은 툴이 가장 좋긴하겠죠? ^ ^
-
-
-
용의자
간단합니다.
본문과 사이드바를 감싸주는 레이어에 배경을 이미지로 넣어 주면 됩니다. y축으로 반복되게 넣어 줘야겠죠?
http://yongja.tistory.com/53
제 스킨 중에 real blogger라는 스킨인데 그런 형태로 만든 것이니 한 번 살펴보시면 도움이 될 것 같습니다.
그리고 float된 레이어를 감싸는 레이어에 버그가 생기는데 그 부분은
http://yongja.tistory.com/48
게시물을 참고해 주세요.
-
-
-
머니야 머니야
간만에 들렸어요^^
일전에 오류난다고 하셔서..뭔지 잘몰랐었는데..ㅋㅋ
일전에 사촌동생이 하는 피씨방에서 낮은버젼6으로 보니까...심히 황당스럽더군요..ㅋㅋ
그래서..서둘러..잘알지도 모르면서 끙끙대고 몇개 손대다보니..얼떨결에 잡힌것 같습니다^^
항상 관심주셔서 감사하구요!
즐거운 하루보내시구요~!! -
연습장
용의자님은 대단하신것 같아요 ^^
지식을 알고 있는 사람은 많을 것입니다. 그러나 이렇게 이해하기 쉽게 설명하기는 쉽지 않거든요.
덕분에 블로그 디자인이 이제 한 10%는 된 것 같네요. ㅋㅋ -
부스카
정말 관심을 가지고 공부해 보고 싶은 분야인데 차분히 정리해서 들여다 볼 시간이 안 나네요. ㅠㅠ
바쁜 일들이 정리가 되면 용의자님 강의를 처음부터 찬찬히 정독을 해야겠습니다. ^^
좋은 저녁 시간 되세요~ -
-
최성국
용의자님, real blogger 배포 더이상 안하시나요?
제가 부동산관련 블로그를 운영중인데 고급스런 분위기가 나는 스킨이 필요한데 님께서 제작하신 리얼블로거가 딱이더라구요..ㅠㅜ
그래서 여기저기 다 뒤저봤는데 못찾겠네요..ㅠㅜ 그래서 마지막으로 글 남겨 봅니다. 저한테 주실 수 있으신지요..ㅠㅜ 부탁드립니다.^^ -
Blue hill
용의자님!!
안녕하세요...^^
가끔 와서 눈팅만 하다가 가곤 했는데...오랜만에 인사 드립니다.
예전에 그레이스님 블로그에서 body id 활용 하는 법을 본적이 있었어요. 그떄는 그 내용이 뭔 소리인가? 하며 이해 난망 이었는데 얼마전 용의자님이 포스팅 하신 이 내용을 보고 오늘 한번 해보았습니다.
결과는 굿입니다..ㅎㅎ
생각나시는지 모그겠네요.
오래전...용의자님께서 "딜리셔스"에 대해 개인적으로 제게 알려 주신적이 있지요. 그를 계기로 html 과 css에 대해 많이 알게 되었답니다.
태그 검색만 하면 많은 정보를 보게끔 해주더군요...
이점 또한 감사 드립니다.
나이먹고 소일거리로 하다보니 블로그 포스팅 보다는 스킨분야에 재미가 붙었습니다. 스킨도 한 열번쯤 바꾸었을겁니다...ㅎㅎ
프리로 테마 다운 받을 수 있는곳이 많더군요...테마 다운받아 치환자만 넣어 스킨변경을 해보니 적용이 되더군요...그런데 코멘트 분야에서 항상 애를 먹습니다 . 댓글 테스트를 해 봐도 어딘가 모르게 엉성하고..뭔가 하나 빠진것 같기도 하고...그래서 그런지 어느 한분의 댓글도 없는 블로그가 바로 제 블로그랍니다.ㅋㅋ
쓰다보니 쓰잘데기 없는 말이 길었습니다.
그런데 그레이스님 블로그는 예전 블로그가 아니던데...
티스토리에서 블로깅을 안 하시는지...?
그분 때문에 스킨 분야에 재미를 붙이게 되었는데...다시는 뵙지 못하는거나요?
그럼...용의자님! 항상 건강하시고 행복하세요..^^-
용의자
그레이스님도 계속 블로깅을 하시는데..
이번에 디자인이 바껴서 몰라보셨나봐요 ㅋ
말씀감사합니다~ 스킨 꾸미는거 재미나죠? ^^
-
-
잘난척사과
안녕하세요 용의자님. 포스트를 보다보니 궁금증이 생겨서요..태터툴즈때는 body id 를 수정할수 있었다고 하는데요 티스토리에서는 미리 만들어진 body id밖엔 쓸수없는건가요? 예를 틀면 특정 포스트를 메뉴에 연결시킨다던지 하는것 말인데 ^^; 방법이 없는것이 궁금하네요. 용의자님 블로그도 옆의 about을 누르면 해당 포스트로 이동하던데 어떤 방식인지도 궁금합니다. 즐거운 저녁되세요~
-
용의자
넵. 미리만들어진 body id밖에 사용할 수 없답니다. ^^;
제 about페이지는 guestbook페이지를 이용한거구요.
history페이지는 따로 스크립트를 써서 만들었습니다.
(body아이디를 쓴건 아니고 일종의 편법??으로 ㅋ)
-
