style.css 완전정복 3 <블로그 본문 영역 css>
지금까지의 css 관련글에서는 css 관련 속성이나 선택자들 중에서 기본적이면서 가장 많이 사용하는 속성위주로 설명을 드렸으며 기본적인 사항은 어느정도 마무리가 된것 같습니다.
그래서 오늘은 티스토리에서
블로그의 포스트와 관련된 스타일시트(css)에 대해서 설명을 하도록 하겠습니다.
설명할 내용을 요약하자면 다음과 같습니다.
- 포스트내의 글자크기, 글꼴, 글자색에 대한 스타일시트
- 포스트내의 링크색 및 표현방법
- 포스트 영역의 넓이 지정
PARTICIPATION, or 37 pieces of library flair (also a 365days shot) by cindiann
블로그 포스트영역
스킨 구조(skin.html) 이해하기 에서 설명했지만 티스토리는 크게 header 영역, content 영역, side 영역, footer 영역으로 구성되어 있습니다. content 영역은 제목영역, 포스트영역, 댓글과 트랙백영역으로 다시 구분이 되는데 이 글에서는 포스트영역에 대한 스타일시트에 대해서 제가 아는 범위만큼만 알아보도록 하겠습니다.
블로그에 표시되는 내용 및 순서는 skin.html에 저장이 되어 있으며 글자색이나 크기, 표시위치등은 style.css에 정의되어 있습니다. 그러므로 표시위치를 바꾸거나 표시되는 내용을 가감할때는 skin.html의 내용을 수정해야 합니다.
skin.html을 수정하기 위해서는 전체적인 내용을 모두 알면 스킨 수정이 더 편리하겠지만 일부만 알아도 대부분 수정이 가능하니다.
skin.html의 내용중 포스트영역은 어느부분인지, 어떻게 어떤 이름으로 되어 있는지 알아보겠습니니다.
<body>
<s_article_rep>
<div class="entry">
<div class="titleWrap">
제목/카테고리/수정/삭제/트랙백
</div><!-- titleWrap close -->
<div class="article"> <- 포스트 영역
[ ##_article_rep_desc_## ] <- 포스트 본문 치환자
</div>
태그 리스트
댓글입력폼
트랙백리스트, 댓글리스트
</div><!-- entry close -->
</s_article_rep>
</body>위에서 보는것처럼 녹색으로 표시된 부분이 포스트영역입니다.
포스트의 본문은 치환자 "##_article_rep_desc_##" 이며 사용시는 앞뒤에 대괄호([])를 붙여야 합니다.
본문 치환자는 "<div class="article">"과 "</div>"으로 쌓여 있고
이것은 다시 "<div class="entry">" 과 "</div>"에 쌓여있습니다.
즉 스타일시트의 적용은 가장 안쪽에 있는 블록의 스타일이 우선순위가 가장 높고
가장 바깥쪽에 있는 블록이 우선순위가 가장 낮다.
블로그 포스트의 본문은
- .article에서 선언한 스타일시트의 적용을 받으며
- .article에서 선언되지 않은 내용은 .entry 에서 정의한 스타일시트의 영향을 받습니다.
- 그외의 스타일은 body 스타일을 따르게 됩니다.
본문에 적용되는 스타일시트
그럼 여기서 본문은 어떤 스타일이 선언이 되어 있는지
클래스 .article 스타일을 확인해보겠습니다.
|
.article { width:/*@post-width=*/ 620px /*@*/; font-size:/*@post-body-font-size=*/ 12px /*@*/; font-family: /*@post-body-font-family=*/ gulim /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden;} .article a:link { color:#0060C8; text-decoration:none;} |
<< 설명 >>
.article에 지정된 스타일시트는 매우 간단하게 선언되어 있습니다.
녹색글자 부분을 보면 앞에 .article이 있는데 이는 .article(본문 스타일) 내에서는 적용이 되도록 선언한것입니다.
link, visited등 속성 대한 자세한 내용은 "티스토리 스킨 style.css 완전정복 1"의 링크부분을 참조하세요!
<< .article 에 선언된 스타일시트 설명 >>
|
/* .... */ : 주석이므로 설명에서 빼겠습니다. width: 620px => 포스트 본문폭을 620px로 지정 |
참고로 <body>와 공통 링크 스타일은 아래와 같습니다.
|
body{ /* 공통링크 스타일 */ |
<< 설명 >>
<body> 및 link 스타일에 대한 의미를 모르시면 "티스토리 스킨 style.css 완전정복 1"를 참고하세요!위의 내용을 이해 했다면 이제부터는 블로그 포스트의 글자크기나 색, 줄간격(line-height), 링크된 글자의 색이나 크기등을 수정할 수가 있을것입니다.
스킨이 다른 경우 본문이나 body 스타일도 다르겠지만 위에서 사용된 css의 의미를 알면 어디든 적용이 가능합니다. 무엇이든 직접해보는 것이 가장 빨리 배우는 지름길입니다.
다음에는 본문중에 사용되는 인용부호나 이미지, more less에 대해서 알아보도록 하겠습니다.
2008/10/21 - 스타일시트(CSS) 이해하기 for 티스토리
2008/10/24 - 스타일시트(CSS)의 선언방법 1
2008/10/27 - 스타일시트의 선언방법 및 사용 예제 2
2009/10/21 - 티스토리 스킨 style.css 완전정복 2
2009/10/23 - [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리
'CSS for 티스토리' 카테고리의 다른 글
| [CSS] 티스토리 포스트 제목 스타일(style) (31) | 2009.11.08 |
|---|---|
| [CSS] 본문중에 사용되는 인용문, 이미지, moreless 스타일을 내맘대로 (20) | 2009.11.05 |
| [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리 (24) | 2009.10.23 |
| 티스토리 스킨 style.css 완전정복 2 (32) | 2009.10.21 |
| 티스토리 스킨 style.css 완전정복 1 (27) | 2009.10.20 |