티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그

이번 강 부터는 본문 레이어를 채워보겠습니다. ^^
10강에서는 미디어로그, 지역로그, 태그로그를 만들어보겠습니다.

*미디어로그

skin.html에서 <div id="content">안의 '좌측레이어' 부분에 아래 소스를 삽입합니다.

<s_media>

<div id="media">[샵샵_media_content_샵샵]</div>

</s_media>

그리고 style.css에는 아래 내용을 삽입합니다.

#media {width:550px; margin-left:12px}
#mediaLogNest {height:850px !important}

미디어로그 상단의 select box와 아래 썸네일과 제목 플래시 부분은 따로 설정할 수 없습니다.
다만 #mediaLogNest 의 height 값을 조절하면 한 페이지당 보여질 썸네일의 줄 수를 조절할 수 있습니다.
저는 850px로 설정해보았는데, 여러분의 사이드바 길이에 맞추어 적당히 바꾸시면 됩니다.

굵게 표시한 !important 속성에 대해 궁금하시면 아래 포스트를 참고하세요.
http://blog.naver.com/reewr7677?Redirect=Log&logNo=87534464

미디어로그는 이것으로 완료했습니다.
소스가 몇 줄 안되죠? 티스토리에서 자체적으로 플래시를 생성해 줘서 그런가봅니다.
브라우저에서 미리보겠습니다.

*지역로그

skin.html에 다음 소스을 삽입합니다. 미디어로그의 아랫부분이나 윗부분 중 어디든 상관 없어요.

<s_local>

<s_local_spot_rep>

<span>▶</span>[샵샵_local_spot_샵샵]

</div>

</s_local_spot_rep>

<s_local_info_rep>

<span>▶</span><a href="[샵샵_local_info_link_샵샵]">[샵샵_local_info_title_샵샵]</a>

</div>

</s_local_info_rep>

</div>

</s_local>

spot 레이어에는 지역 이름이, info 레이어에는 링크된 글 제목이 들어가는 거예요.
끝에 px가 써 있는 치환자로 왼쪽 여백값이 자동으로 조절돼요.

이제 style.css에 아래 내용을 삽입합니다.

#localog {margin:12px}
#localog .spot {font:9pt Dotum; color:#777777; height:20px}
#localog .spot span {color:#DDDDDD; padding-right:3px}
#localog .info {font:9pt Dotum; height:20px}
#localog .info a {color:#333333; text-decoration:none}
#localog .info a:hover {font-weight:bold}
#localog .info span {color:#999999; padding-right:3px}

span 안에 있는 ▶의 색깔을 spot과 info 각각 다르게 설정했어요.
이제 많은 부연설명 없이도 찬찬히 보시면 모두 이해하시리라 믿습니다. :)

브라우저에서 미리보겠습니다.

*태그로그

skin.html에 아래 소스를 삽입합니다. 어디에 삽입하는지는 이제 잘 아시죠? ^^

<s_tag>

<ul>

<s_tag_rep>

</s_tag_rep>

</ul>

</div>

</s_tag>

그리고 style.css에 아래 내용을 삽입합니다.

#taglog {margin:12px}

#taglog ul {margin:0px; padding:0px; text-align:justify; line-height:25px}

#taglog ul li {list-style:none; display:inline; padding-right:3px}

#taglog ul li .cloud1 {font:14pt Dotum; background-color:#666666; color:#E1EBF9; padding:0px 2px 2px 2px; font-weight:bold}

#taglog ul li a:hover.cloud1 {background-color:#333333; color:#FFFFFF}

#taglog ul li .cloud2 {font:11pt Dotum; background-color:#E1EBF9; padding:0px 2px 2px 2px; color:#333333}

#taglog ul li a:hover.cloud2 {background-color:#DDDDDD}

#taglog ul li .cloud3 {font:10pt Dotum; font-weight:bold; color:#333333}

#taglog ul li a:hover.cloud3 {border-bottom:1px dashed #333333}

#taglog ul li .cloud4 {font:8pt Batang; color:#666666}

#taglog ul li a:hover.cloud4 {text-decoration:underline}

#taglog ul li .cloud5 {font:8pt Gulim; color:#999999}

#taglog ul li a:hover.cloud5 {text-decoration:underline}

사이드바의 태그부분과 마찬가지로
cloud1부터 cloud5까지의 클래스에 많이 쓴 태그부터 적게 쓴 태그까지 스타일을 설정했구요,
각 cloud 클래스 마다 a:hover 스타일을 다르게 준 것이 눈에 띄죠?
마우스오버했을 때의 모양도 자유롭게 지정하세요. ^^

태그로그도 완료했습니다. 브라우저에서 확인해보겠습니다.

11강에서는 방명록을 만들어 보겠습니다. ^^

중급자를 위한 티스토리 스킨 수정 팁 보러가기

TRACKBACK 1 COMMENT 20

장어군 Edit/Del Reply
정말 좋은정보 알아가네요^^
앞으로도 이런글 올려주시기 바랍니다.
자주 방문할께요^^
2009/11/13 11:52

장어군
- Grace* Edit/Del
  
  2009/11/13 12:02
  
  네. 감사합니다. ^^
수피아 Edit/Del Reply
드디어 새로운 강의가 올라 왔군요.
Grace님의 강의가 어려운 편도 아닌데...
전 도통 이해를 못하고 있으니...ㅠㅠ
하지만 언제가 스킨을 만들수 있는 그날까지
화이팅 할것임... ㅎㅎ
강의 올려주셨어 감사합니다.^0^
2009/11/13 14:10

수피아
- Grace* Edit/Del
  
  2009/11/13 14:38
  
  네. ^^ 멋진 스킨 만드세요.
yureka01 Edit/Del Reply
오예 미디어 로그 하나 넣고 싶었는데..적절한 타이밍에서 강의가 아주 요긴합니다^^감사드려요 ㅋ^^
2009/11/13 14:18

yureka01
- Grace* Edit/Del
  
  2009/11/13 14:38
  
  오, 요긴하다니 보람되네요.ㅋㅋ
드자이너김군 Edit/Del Reply
음.. 요즘 자주 스킨을 바꿔버리고 싶다는 충동에 휩싸이곤 합니다.
제입맛에 맞는것을 찾을수가 없어서.. Grace님 강의를 열심히 보고 있습니다.^^;;
2009/11/13 17:46

드자이너김군
- Grace* Edit/Del
  
  2009/11/14 07:51
  
  ^^ 멋진 스킨 만드세요.
MoreCreative Edit/Del Reply
이런강의 꾸준히 올리시기 힘드실텐데 꾸준히 올려주셔서 정말 감사합니다.;
일단 처음부터 싹 짚어주시니 구도가 잘 잡히는것 같아서 굉장히 좋아요.
화이팅!

아, 오늘은 제글에도 댓글을 달아주셨네요 ^^
감사합니다~
2009/11/13 17:49

MoreCreative
- Grace* Edit/Del
  
  2009/11/14 07:51
  
  네. 저도 고맙습니다. 힘이 생기네요.
쿨쿨 Edit/Del Reply
우와~ 이런스킨 첨봤습니다.
대단합니다.

티스토리 2년전에 가입해두고 이제 꾸며볼까합니다. 초대해준 분에게는 너무 죄송하네요
일상생활이 바쁘게 지내다보니...
많은걸 여기서 배워야 되겠네요 ...감사합니다.
2009/11/14 03:41

쿨쿨
- Grace* Edit/Del
  
  2009/11/14 07:51
  
  네. 화이팅
유리 Edit/Del Reply
그럼 이 스킨도 직접 만드신거군요????? +_+
2009/11/16 18:59

유리
- Grace* Edit/Del
  
  2009/11/16 19:18
  
  디자인은 구작가님이, 코딩은 제가 했습니다.
First_ReSet Edit/Del Reply
아 정주행 힘드러 ㅎㅎ
전반적으로 개념은 이해 된듯한데 ㅎㅎㅎ 먼가 2% 모자란.ㅠㅠ

나중에 시간되시면 이 블로그에 대해서 파헤쳐보는(?^^;

시간을 가질수 있는 기회를 주세요ㅎ
2009/11/17 05:09

First_ReSet
- Grace* Edit/Del
  
  2009/11/17 08:31
  
  첫 술에 배부를 수 없죠. ㅋㅋ
  찬찬히 복습해보시길..
콩콩 Edit/Del Reply
강의 너무 좋아요~
잘보고이고 도움도많이되고있습니다^^
근데 여기까지해서 적용해봤더니..
첫페이지에는 아무것도 안나와요 ㅠㅠ본문이.....
글구 링크클릭하면 사이드바가 내려가는 문제가 ㅠㅠ..
제가 뭘 잘못한건가요?

아!그리고 메인화면에서
html로 테이블짜고 코딩해서도
화면을 띄울 수 있나요?
궁금한 점이 너무 많네요 ..ㅎㅎ
2009/11/25 12:06

콩콩
- Grace* Edit/Del
  
  2009/11/25 15:29
  
  아직 본문 부분을 안 다뤘기 때문에
  본문에 아무것도 안 나오는 게 맞습니다..
겔랑 Edit/Del Reply
저도 뭔가 색다르게 바꿔보고싶어서
메뉴에 프로필을 추가로 넣어봤는데요
이렇게요
<s_profile>
<div id="profile" class="nonEntry">
<h3>제목....</h3>
<ul>

</ul>
</div>
</s_profile>
이런식으로 넣었는데

프로필메뉴는 추가가 됬는데 연결이 안되네요 ㅋㅋ어디가 문제인지요;;
css에도 내용을 추가해야되는거예요?
2010/02/14 17:56

겔랑
- Grace* Edit/Del
  
  2010/03/08 20:56
  
  티스토리에는 s_profile 이라는 치환자가 없어요.