CSS for 티스토리

[CSS] 티스토리 포스트 제목 스타일(style)

Kay~ 2009. 11. 8. 23:08

[CSS] 티스토리 포스트 제목 스타일(style)

이글은 style.css 완전정복 3 <블로그 본문 영역 css> 에서 이어집니다.

오늘은 티스토리의 포스트 제목부 (title, 카테고리, 날짜) 대한 스타일 구성 및 스타일 수정에 대해서 알아보겠습니다.
편의상 존칭은 생략하겠습니다.

포스트 제목부와 스타일

포스트의 제목스타일을 알기 위해서는 skin.html 파일을  먼저 확인해야 한다. skin.html에서 제목에 사용하는 스타일이 어떤 이름으로 선언되어 있는지 알아야 한다.

아래의 내용은 skin.html 소스중 포스트 제목과 카테고리, 날짜 부분이다.

위의 내용중 빨강 테두리 부분이 포스트제목 부분이며 그 아래로 카테고리와 날짜가 배치되어 있으며 사용된 스타일(class)를 확인할 수 있다. 

포스트  제목부로 선언된 스타일시트(class)

entry : 포스트 전체에 적용되는 스타일
titleWrap : 포스트 제목, 카테고리, 날짜에 적용되는 스타일
category : 카테고리명 표시 스타일
date : 포스팅 일자 표시 스타일

그런데 위에서 보면 포스트 제목(article_rep_title)은 특별히 스타일시트가 정의되어 있지 않고 <h2>태그만 사용이 되었다. 아니 좀더 자세히 본다면 <h2> 태그안에 <a> 태그로 감싸져 있다. 정리하면 아래와 같다.

포스트의 제목은 <a>태그 > <h2>태그 > titleWrap > entry  순으로 스타일이 적용된다.

이제 style.css에서 titleWrap 및 titleWrap의 하위 스타일이 있는지 확인해보자.

style.css 내용중 entry와 titleWrap part

 /* entry */
.entryNotice h2,
.entryProtected h2,
.entry h2                { font-size:1.4em;  line-height:1.4em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 16px /*@*/; font-family: /*@post-title-font-family=*/ dotum /*@*/; color: /*@post-title-color=*/ #2A2B6C /*@*/;  line-height:1.2em; padding:8px 0 6px 0;}

.titleWrap               { width:/*@post-width=*/ 620px /*@*/; border-bottom:1px solid #ccc;  padding-bottom:5px;  margin-bottom:20px; overflow:hidden; }
.titleWrap .category a   { font:12px Dotum, Arial, sans-serif;  color:#333;  margin-right:6px;}
.titleWrap .date         { font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#888;}

포스트 제목은 titleWrap에는 선언되어 있지 않고 그 상위 클래스인 entry에 정의되어 있다.
위 소스에서 빨강색으로 표시된 부분중 .entry h2 a의 스타일이 적용이 된다.

그러므로 포스트 제목의 크기나 글자색등 위아래 줄간등의 스타일을 변경하기 위해서는 .entry h2 a의 스타일을 수정하면 된다.

포스트 제목 스타일

결과적으로 포스트제목을 수정하기 위해서는 .entry h2 a 스타일을 수정하면 된다.
.entry h2 a 스타일을 다시 한번 확인하면 아래와 같다. (주석제거)

.entry h2 a { font-size:16px ; font-family: dotum; color: #2A2B6C;
                  line-height:1.2em;   padding:8px 0 6px 0;} 

위 스타일은 제목 크기는 16픽셀, 글꼴은 돋움, 글자색은 #2A2B6C, 줄간격은 1.2em, 위쪽공백 8픽셀, 아래쪽 공백 6픽셀로 선언되어 있다.

카테고리  및 날짜 스타일은 매우 간단하며 위에서 달아놓은 팁만으로도 충분히 이용할 수 있을것이다.

2009/09/03 - [CSS for 티스토리] - 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
2009/10/20 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 1
2009/10/21 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 2
2009/10/23 - [CSS for 티스토리] - [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리2009/11/03 - [CSS for 티스토리] - style.css 완전정복 3 <블로그 본문 영역 css>
2009/11/05 - [CSS for 티스토리] - [CSS] 본문중에 사용되는 인용문, 이미지, moreless 스타일을 내맘대로