[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 스타일을 내맘대로

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 2009.11.09 09:27  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2009.11.09 09:57 신고  댓글주소  수정/삭제

      ㅋㅋ 어디서 검색이 되던가요? ㅎㅎ
      저도 어디서 검색이 되는지 확인안해봤거든요!
      별로 기대도 안하고요! ㅋㅋㅋ
      그런데 제휴 하긴 했는데 글 하나 달랑 올려놓다 보니..
      아직 실적은 없답니다. 좀더 본격적으로 뿌려놓으면 될것 같은 느낌이지만.. 음.. 아직 시간이.. ㅋㅋ

  2. BlogIcon 영웅전쟁 2009.11.09 11:49 신고  댓글주소  수정/삭제  댓글쓰기

    뷰는 발행 안하셨군요.
    좋은 참고자료
    잘 보고갑니다.
    멋진 이번주 되시길 바라면서...

  3. BlogIcon HEPI 2009.11.09 11:53 신고  댓글주소  수정/삭제  댓글쓰기

    점점 기대치가 높아지고 있습니다.
    그렇다고 부담은 갖지 마세요.
    너무 좋은 정보 잘 보고 갑니다.

  4. 2009.11.09 15:36  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2009.11.09 21:32 신고  댓글주소  수정/삭제

      ㅋㅋㅋ
      다음뷰에 물어보세요!
      전 다음하고 전혀 관련 없는 사람입니다. ㅋㅋ
      아 그런데 시간적 여유가 좀 있으신가요?
      막강블로거로 우뚝 서고 있는데 제 입지가 자꾸만 줄어드는 것 같아 경계가 됩니다. ㅎㅎㅎ

      일단 경험하셨다시피 당근 안됩니다.
      안된다니 안되는 것이죠.. ㅋㅋ
      그리고 예상하고 있겠지만 아이디를 한개 더 만드시면 됩니다. ㅎㅎ

  5. BlogIcon 구차니 2009.11.09 22:16 신고  댓글주소  수정/삭제  댓글쓰기

    오 이러다가 css 자동 생성기 하나 만드셔도 되겠어요 ㅎ

    • BlogIcon Kay~ 2009.11.10 08:42 신고  댓글주소  수정/삭제

      css 생성기요? ㅋㅋ
      구차니님이 하나 만들어주세요!
      아무래도 저보다야 구차니님이 적격일것같은데요! ^^

  6. BlogIcon 보시니 2009.11.09 22:32 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 카이님 스타일시트 강좌 프린트 해서 차곡차곡 모으고 있는 중입니다.~
    정말 큰 도움이 되고 있습니다.

  7. BlogIcon 둥이 아빠 2009.11.09 23:44 신고  댓글주소  수정/삭제  댓글쓰기

    오늘도 여전히 좋은 글 잘보고 가요...

    저도 댓글창에 배경그림 넣어봤습니다.. 오래전부터 한다고 하구선 이제야 올렸네요...

    • BlogIcon Kay~ 2009.11.10 08:54 신고  댓글주소  수정/삭제

      예. 보니까 예상대로 쌍둥이 사진으로 멋지게 배경을 넣으셨네요! ㅎㅎ ^^
      해놓고 보면 마음이 흡족하시죠? ㅋㅋ

    • BlogIcon 둥이 아빠 2009.11.10 16:30 신고  댓글주소  수정/삭제

      댓글 창에 이미지를 넣었는데요..

      자꾸 오류가 발생하네요..

      방문자들이 글을 쓰면 ..

      내용을 적어도...

      " 본문을 적어주세요 " 이렇게 나오더라구요..

      소스를 아무리 살펴봐도 도무지...ㅠ.ㅠ.

      어찌 해결을 해야할까요?

    • BlogIcon Kay~ 2009.11.11 13:14 신고  댓글주소  수정/삭제

      일단 댓글 다는 부분은 수정이 된것 같은데
      여전히 스크립트 오류가 있네요! ^^

  8. BlogIcon Sakai 2009.11.10 02:02 신고  댓글주소  수정/삭제  댓글쓰기

    왠지 저런 작업을 하고는 싶은데.왠지 귀차니즘 그리고 왠지 알게 모르게 다가오는 두려움 떄문에 망설이고 있습니다.그래도 html 기본을 알고 시작 할떄 한번 도전해볼 생각입니다.

    • BlogIcon Kay~ 2009.11.10 08:57 신고  댓글주소  수정/삭제

      ㅎㅎ 스킨 저장하고 마구 마구 만져보세요!
      그리고 저장한 스킨 적용하면 간단.. ㅎㅎ
      연습해보면 의외로 쉽죠.. 문제는 마음이 동해야겟죠? ㅋㅋ

  9. BlogIcon 넷테나 2009.11.10 08:32 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 많은 도움이되고 있습니다^^
    즐거운 하루되시길요

  10. BlogIcon 라이너스™ 2009.11.10 10:51 신고  댓글주소  수정/삭제  댓글쓰기

    오늘도 잘 공부하고갑니다^^
    요즘 공부 팁을 많이 올려주시네요^^

  11. BlogIcon 드자이너김군 2009.11.10 11:07 신고  댓글주소  수정/삭제  댓글쓰기

    오~ 정말 자동으로 CSS를 바꿔주는 프로그램 하나 만드셔도 될듯 한데요..ㅋ
    잘 지내시죠? 요즘은 김군이 잘 찾아 뵙지도 못하고 .. 죄송할 뿐 입니다.
    하시는일 잘 되시고 책 나오면 꼭 알려주세요~

  12. 2009.11.10 16:53  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  13. BlogIcon ageratum 2009.11.11 08:56 신고  댓글주소  수정/삭제  댓글쓰기

    계속 좋은 정보 올려주시네요..^^
    나중에 스킨 바꿀때 많은 도움이 될 거 같습니다..^^
    즐거운 하루 보내세요~

  14. BlogIcon 하리카 2011.11.06 19:01 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ 죄송하지만 뭐 하나 물어보고싶습니다ㅠ_ㅠ
    제가 마음에 드는 스킨을 골랐는데요, 포스트 제목을 이제 바꿀수있을거 같은데요~
    포스트제목 위치는 어떻게 바꾸나요?
    이 스킨이 포스트 옆에 제목이 표시가 되는바람에 포스트영역이 710인데 정작 450밖에 사용을 못하네요ㅠ_ㅠ
    그래서 제목은 위에 올리고 댓글은 포스트 밑에 내리고싶은데 아무리 해도 안되서요~ 방법을 아신다면 설명을 좀 해주셨으면 좋겠어요~

    • BlogIcon Kay~ 2011.11.12 01:19 신고  댓글주소  수정/삭제

      현재 스킨이 말씀하신 스킨이죠?
      제가 보니까 원래 그런것이 아닌가 합니다.
      아니면 스킨 변경을 잘못 하셨나요?

      아무래도 일정영역을 우측정렬한것처럼 보이는데..
      포스트 본문폭을 넓혀주면 되지 않을까 합니다.

      저도 처음 보는 스킨이라 좀 뜯어봐야 알듯 한데...
      에궁.. 지금 당장은 시간이 없네요!

    • BlogIcon 하리카 2011.12.01 14:57 신고  댓글주소  수정/삭제

      Kay님말 듣고 다시 확인해보니 Kay님 말대로 우측정렬이 되있는거더라구요~ㅠ_ㅠ 전 아에 테이블 위치를 바꾸는지 알았는데 것도 모르고 계속 딴거만 움직였나봐요;;