티스토리 스킨 만들기 (초보) - 13강. 포스트 내용

이제 드디어 포스트를 다룰 차례입니다.
이번 강에서는 포스트 본문 내용을 다루고, 다음 강에서 포스트 하단에 들어갈 트랙백과 댓글을 출력하도록 하겠습니다.

완성된 모습을 먼저 보겠습니다. 아래 이미지를 클릭해서 보세요.

구조를 대략적으로 나타내면 아래와 같습니다.

<div class="admin">관리자설정</div>

본문내용

</div>

</div>

이해가 되시죠?
녹색 부분은 다음 강에서 다룰 내용입니다.

그럼 먼저 skin.html 에 다음 소스를 입력합니다. 검색결과가 끝나는 </s_list> 아래에 입력하시면 됩니다.

<s_article_rep>

<h2><a href="[샵샵_article_rep_link_샵샵]">[샵샵_article_rep_title_샵샵]</a></h2>

<div class="category"><a href="[샵샵_article_rep_category_link_샵샵]">[샵샵_article_rep_category_샵샵]</a></div>

<div class="date">[샵샵_article_rep_date_샵샵]</div>

<s_ad_div>

<a href="[샵샵_s_ad_m_link_샵샵]">수정</a> |

<a href="javascript:;" onclick="[샵샵_s_ad_m_onclick_샵샵]">새창에서 수정</a> |

([샵샵_s_ad_s1_label_샵샵])→<a href="javascript:;" onclick="[샵샵_s_ad_s2_onclick_샵샵]">[샵샵_s_ad_s2_label_샵샵]</a> |

<a href="javascript:;" onclick="[샵샵_s_ad_t_onclick_샵샵]">관련글(트랙백)</a> |

</div>

</s_ad_div>

[샵샵_article_rep_desc_샵샵]

</div>

<s_tag_label>

<span>TAG//</span> [샵샵_tag_label_rep_샵샵]

</div>

</s_tag_label>

</div>

</s_article_rep>

<s_ad_div>와 </s_ad_div>로 감싸져 있는 admin 레이어는 관리자 로그인을 했을 때만 보여집니다.
<s_tag_label>과 <s_tag_label>로 감싸져 있는 tagTrail 레이어는 태그가 있을 경우에만 보여지구요.

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

.post {margin:12px; padding-bottom:10px}

.post h2 {padding:0px 0px 10px 0px; margin:0px 0px 10px 0px; border-bottom:#CCCCCC 3px solid}

.post h2 a {font:13pt verdana,Dotum; font-weight:bold; color:#555555}

.post h2 a:hover {text-decoration:underline}

.post .category {float:left}

.post .category a {font:8pt verdana,Dotum; color:#91B3E3; font-weight:bold}

.post .category a:hover {text-decoration:underline}

.post .date {float:right; font:8pt Trebuchet MS; color:#AAAAAA}

.post .article {clear:both; padding:10px; font:9pt verdana,Dotum; color:#555555; text-align:justify; line-height:18px; border-bottom:#CCCCCC 1px solid}

.post .article .admin {font:8pt Dotum; color:#888888; padding-bottom:10px}

.post .article .admin a {color:#888888; font-weight:normal; border-bottom:0px}

.post .article .admin a:hover {text-decoration:underline}

.post .article .moreless_fold, .post .article .moreless_top, .post .article .moreless_bottom {padding:5px; border:#CCCCCC 1px dashed; background-color:#E1EBF9; text-align:center}

.post .article blockquote {border-left:#EEEEEE 15px solid; padding-left:5px; margin:20px}

.post .article a {border-bottom:#91B3E3 1px dashed; color:#91B3E3; font-weight:bold}

.post .article a:hover {color:#888888}

.post .article .imageblock, .post .article .dual, .post .article .triple {margin:5px}

.post .article .cap1 {margin:0px; padding-top:5px; font:8pt verdana,Dotum; color:#888888}

.post .tagTrail {padding-top:10px; font:8pt verdana,Dotum; color:#888888; line-height:15px}

.post .tagTrail span {color:#91B3E3; font-weight:bold}

.post .tagTrail a {color:#888888}

.post .tagTrail a:hover {text-decoration:underline}

찬찬히 살펴볼까요?

12번째 줄의 .post .article .admin a 에 border-bottom:0px와 font-weight:bold를 넣은 까닭은
아래에서 8번째 줄의 .post .article a 에 border-bottom 값과 font-weight 값을 설정해주었기 떄문입니다.
11강에서도 다뤘던 내용이니 어렵지 않게 이해하시리라 믿습니다.

아래에서 11번째 줄의 moreless_fold, moreless_top, moreless_bottom은 '더보기' 기능과 관련하여
티스토리에서 자동으로 생성해 주는 클래스입니다.
아래 이미지를 보시면 이해가 쉬울 거예요.

저는 moreless_fold와 moreless_top, moreless_bottom을 다 똑같이 설정해 두었지만
배경 색이나 이미지, 글씨 정렬 등을 각각 다르게 해서 본인만의 스타일로 꾸며보세요.

아래에서 9번째 줄의 blockquote는 인용문을 위한 설정입니다.

아래에서 6번째 줄의 imageblock, dual, triple은 이미지 기능과 관련하여 티스토리에서 자동으로 생성해주는 클래스입니다.
imageblock은 하나의 이미지, dual은 가로로 두 개의 이미지 정렬, 트리플은 가로로 세 개의 이미지 정렬에 대한 클래스입니다.
혹시 티스토리의 글쓰기 모드에서 듀얼 이미지와 트리플 이미지를 삽입하는 방법을 모르시면 아래 스크린샷을 참고하세요.

아래에서 다섯번째 줄의 cap1은 이미지 하단의 자막에 대한 클래스입니다.

포스트의 본문 부분을 마무리했습니다.
다음 강에서는 트랙백과 댓글을 다루도록 하겠습니다.

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

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

TRACKBACK 0 COMMENT 37

sogam0 Edit/Del Reply

강의가 차곡차곡 싸여서 하나가 되어 가는 것 같아요. 이런 본인은 워드프레스로 옮겼습니다만;; 느낀게 워드프레스 스킨이 많다 많다 하지만, 정작 한국형 스킨(?)은 찾기가 힘들어요. 아무래도 취향이 많이 달라서 그런가봐요. 하지만, 기능면에는 확실히 워드프레스를 써보니.. 왜 최고의 블로그 툴이라고 하는지 뼈저리게 느끼게 되네요. ㅎ_ㅎ;

그럼 수고하세요!

2009/12/27 00:09

sogam0

Grace* Edit/Del

2009/12/27 00:14

워드프레스 써보지 못했지만, 워드프레스를 사용하는 블로그를 보면 부러울 때가 많더라구요.
지금 소감공님이 사용하고 계신 스킨의 Latest Posts, Latest Comments, Tags를 각각 탭으로 사용한 사이드바는 꼭 한 번 티스토리로 흉내내보고 싶어요. +_+

yureka01 Edit/Del Reply
강의 자료..스크랩해둬야 겟습니다..이거 꼭 쓰야할일이 생길듯하거든요 ㅋㅋ
2009/12/27 08:41

yureka01
- Grace* Edit/Del
  
  2009/12/27 17:04
  
  네넹^^
씨디맨 Edit/Del Reply
그동안 써둔 글을 보니 정성이 엄청 나네요. 저거 일일이 하나하나 설명하려면 어후
저도 개념 정립을 위해서 처음부터 끝까지 쑥 봐야겠어요. 음악프로시고 , 스킨도 프로시고 정말 전문가이심 +_+
2009/12/27 10:03

씨디맨
- Grace* Edit/Del
  
  2009/12/27 17:04
  
  감사합니다.
  이제 끝이 보이고 있어요. ^^
원덜 Edit/Del Reply
와 엄청 디테일한 강의 넘 좋아요 히힛
2009/12/27 16:55

원덜
- Grace* Edit/Del
  
  2009/12/27 17:04
  
  감사해요. ^^
안지용 Edit/Del Reply
안녕하세요...

제 블로그 오셨더라구요... 스킨 저작권문제요.ㅎㅎㅎ

우선 제가 죄송하다고 말씀드리고 싶습니다.

수정한다고 했는데. 카피라이트 부분을 생각하지 못했습니다...
그래서 다시 수정해서 잘 보이도록 했습니다.. 죄송합니다.
2009/12/27 20:50

안지용
- Grace* Edit/Del
  
  2009/12/29 16:34
  
  네~ 감사합니다.
용의자 Edit/Del Reply
드디어 마지막이 보이는 것 같네요~
요거 끝내면 속이 후련하겠어요 ㅎㅎ
2009/12/28 01:45

용의자
- Grace* Edit/Del
  
  2009/12/29 16:34
  
  네네. 그럴 것 같아요. ^--^
드자이너김군 Edit/Del Reply
아.. 저 듀얼이미지 정렬.. 몰라서 맨날 포토샵으로 작업했는데 .. ㄷㄷㄷ
감사합니다.ㅋ
2009/12/29 15:16

드자이너김군
- Grace* Edit/Del
  
  2009/12/29 16:34
  
  와. 듀얼이미지 올리는 법 스크린샷 찍기를 잘했네여. ^^

Edit/Del Reply

비밀댓글 입니다

2010/01/07 00:06

Grace* Edit/Del

2010/01/07 10:34

1강부터 보신다면 지역로그와 미디어로그 없애는 정도는 충분히(x100)하실 수 있습니다..
사이드바도 노력하면 원하시는 대로 스스로 위치 바꾸실 수 있구요..

트위즈 Edit/Del Reply

왼쪽 컨텐츠창과 오른쪽의 사이드바의 세로 길이를 똑같이 하고 싶은데 어떻게 해야할까요?

수정하다보니 생각하게 되었는데, 둘중 하나가 더 길게 되더군요...

아직 부족한 부분이 많아서인지... 엉성하게 수정하네요...ㅠ

2010/01/10 00:04

트위즈

Grace* Edit/Del

2010/01/11 11:46

table로 하면 간단합니다.
<table cellspacing="0" cellpaccing="0" border="0">
<tr>
<td class="해당클래스">컨텐츠</td>
<td class="해당클래스">사이드바</td>
</tr>
</table>

Edit/Del Reply

비밀댓글 입니다

2010/01/13 23:57

Grace* Edit/Del

2010/01/14 11:11

원하는 가로 굵기 X 세로 1픽셀의 분홍색 블록 이미지를 만들어서
스타일시트에서 body에 배경으로 넣되 세로로만 반복되게 하는거예요.

background:url('이미지주소') repeat-y left top

위 처럼 넣으시면 돼요. body 안에요.

만약 왼쪽이 아니라 오른쪽 한 부분에만 반복되게 하려면
left top 대신 right top을 쓰면 돼요.

그리고 sidebar 부분에 분홍색으로 배경을 주면 알려주신 블로그와 똑같이 구현되는거죠. ^^

Edit/Del Reply
비밀댓글 입니다
2010/01/24 16:25
- Grace* Edit/Del
  
  2010/02/05 10:38
  
  화이팅~
Edit/Del Reply
비밀댓글 입니다
2010/01/26 22:44
- Grace* Edit/Del
  
  2010/02/05 10:38
  
  댓글과 익스6오류등 아직 남은 부분들이 있어요
콩다발 Edit/Del Reply
정말 감사합니다ㅜㅜ
오늘 1강부터 13강까지 정신없이 보다가
여기 와서야 뎃글올리는 저를 용서하세욥ㅎ
알찬 강의 넘 잘봤어요~~
열심히 연습해서 실력을 길러봐야겠어요^^
2010/01/30 23:39

콩다발
- Grace* Edit/Del
  
  2010/02/05 10:39
  
  화이팅 ^^
Edit/Del Reply
비밀댓글 입니다
2010/02/09 15:43
- Grace* Edit/Del
  
  2010/03/12 00:16
  
  모든 div의 가로 사이즈를 늘였다 줄였다 해보세요.
베네트 Edit/Del Reply
블로그 스킨 편집하면서.. 요며칠 계속 살고 있습니다. ^^ 이제사 정체를 드러내는군요.ㅋ
좋은 정보 덕분에 진행이 잘 되어서 정말 다행이예요.

아직은 헤매는 중이라 질문 할 것도 없다며;;

명절 즐겁게 보내시구요.
^^ 앞으로 자주 들락거릴께요.
나중에 궁금한 것 있음 꼭 물어보러 올께용..*^^*

블로그 넘 예뻐요. 저도 요런 블로그 만들고 싶네욧.ㅋ

행복하세요.
2010/02/10 13:12

베네트
- Grace* Edit/Del
  
  2010/03/12 00:17
  
  댓글이 늦었네요. 활기찬 하루하루 되세요. ^^
Lupus Edit/Del Reply
저기 궁금한게 있는데요

뭐 이런것들 있잖아요 그걸 어떻게 아나요?
링크 걸고 하는것 같던데 우선 기본적으로 listconform 이 무슨역할을 하는지 알아야하고
이렇게정의되어있다는걸 알아야 쓰는거 아닌건가요?
2010/02/27 22:04

Lupus
- Grace* Edit/Del
  
  2010/03/12 00:17
  
  댓글에 html을 쓰셨는지 내용이 짤린 것 같네욤..
태훈 Edit/Del Reply
강의 잘보고 있습니다~
어서 강의보고 만든 티스토리블로그를 구동시켜보고싶네요~
다음 강의 기다리겠습니다~
2010/03/07 10:59

태훈
- Grace* Edit/Del
  
  2010/03/12 00:17
  
  14강 올렸습니다.
시노부 Edit/Del Reply
그레이스님 강좌 정말 감사히 잘 따라한 1인입니다.

근데 제껀 제가 잘못 따라했는지
방명록과 포스트에 사이드바가 아래로 밀려버리는 현상이 생기네요 =_=;

코딩할떄 사이드바 레이어의 위치를 잘못입력한걸까요??

블로그링크 걸어두었습니다, 한번만 봐주세요 -_-;;;;
2010/07/07 16:06

시노부
ㅇ Edit/Del Reply
왜 님은 티스토리안쓰시고?ㅋ 그냥한번물어봄.ㅋㅋ
2010/07/18 18:52

ㅇ
- Grace* Edit/Del
  
  2010/07/19 14:28
  
  ?? 쓰고 있습니다.