티스토리 스킨 구조 이해하기

수개월전부터 올리려고 했던 내용인데 이제서야 막을 열었습니다.

티스토리는 블로그를 임의로 꾸밀수 있도록 스킨파일(skin.html)과 웹문서 양식파일인 스타일시트파일(style.css)을 제공합니다. 블로그가 운영되기 위해서는 이 2개의 파일외에도 훨씬 많은 파일들이 필요하지만 블로거에게는 별로 필요없는 파일이기 때문에 보일 필요가 없습니다.

그러므로 티스토리로 블로그 운영을 하기 위해서는 이 2개의 파일내용만 이해를 한다면 본인이 원하는 형태로 자유롭게 꾸밀 수가 있습니다. 하지만 html 이나 css를 전혀 모르는 분이라면 조금의 어려움이 있습니다.

하지만 어려워도 알아야 하는 내용이고 모르면서도 소스를 들여다 봐야 하는 것이 티스토리입니다.
그렇기 때문에 아는만큼 쉽게 관리할 수 있고 대충이라도 알아두는 것이 관리에 도움이 된다는 말이지요! ^^

티스토리 스킨구조를 알면 쉽다.

skin.html 이나 style.css를 이해하기 위해서는 티스토리의 스킨 구조를 모르면 이해하기 어렵습니다.  

티스토리 스킨의 구조 (skin.html)

skin.html에는 블로그의 제목이나 본문, 댓글의 위치, 사이드바, 메뉴등의 내용이 순서에 의해서 작성되어 있습니다.

즉 웹에(블로그에) 표시되는 내용들이 들어있는 파일입니다.

이 skin.html의 내용에 따라서 화면에 표시되는 내용의 배치를 바꿀 수도 있고 가감할 수도 있습니다.

기본적으로 스킨의 구조는 왼쪽 그림과 같이 container라는 용기속에 header영역, content 영역, sideinfo영역, footer 영역으로 구성이 되어 있습니다.

 

skin.html 의 소스구성

skin.html 의 구조는 크게 아래와 같이 구성이 되어 있습니다.

<div id="container">
  <div id="header"></div> <!-- header close -->
  <div id="content"></div> <!-- content close -->
  <div id="sidebar"></div> <!-- sidebar close -->
  <div id="footer"></div> <!-- footer close -->
</div> <!-- container close -->

각 영역에 표시되는 내용

  • container : 블로그 레이아웃, 전체 틀
  • header 영역 : 블로그 제목 부분(제목, 배경이미지), 설명, 블로그메뉴가 위치
  • content 영역 : 포스트가 표시되는 영역으로 포스트외에 검색결과나 방명록, 공지사항등이 모두 이 영역에 표시가 되며, 애드센스나 애드클릭스 등도 이곳에 삽입하여 표시할 수 있음.
  • sideinfo 영역 : 카테고리나 최근글, 최근댓글, 공지사항, 링크등의 표시되는 영역
  • footer 영역 : 블로그 하단영역으로 보통 copyright등이 표시됨
각각의 모든 영역들은 사용자가 변경이 가능함.

header 영역

아래 소스는 제 블로그의 header 영역입니다.
skin.html의 대부분의 내용은 시작이 <div></div>로 구성되며 div에 ID가 붙어 있습니다. <div id="header">와 같은 방식인데요. 이 태그는 줄전체에 대해서 영역을 준비하고 해당 영역에 대한 이름으로 ID를 붙이며 이 ID를 이용하여 style.css에서 영역에 표시되는 내용의 속성(글자색, 위치, 줄간격, 정렬방식, 배경색등등)을 지정할 수가 있습니다. (div와 span, ID와 class 에 대해서는 나중에 다시 설명드리겠습니다.)

content 영역


<div id="content"> 
   <div id="searchList">검색 결과가 표시됨</div>
   <div id="searchRplist">검색 결과 댓글 리스트</div>
   <div id="locallog">지역로그가 표시됨</div>
   <div id="taglog"> 태그 클라우드</div>

   <div id="guestbook"> 방명록
       <div id="guestWrite">방명록 글쓰기 창 </div>
       <div id="guestList"> 방명록 리스트가 표시됨 </div>
   </div><!-- guestbook close -->


   <div id="entryNotice">공지사항 글</div>
   <div id="entryProtected">보호 글</div>

 <s_article_rep>  영역지정
   <div class="entry"> 포스트(글) 가 표시되는 곳 
       <div class="titleWrap"> 글 제목 | 카테고리 | 작성일 | 글 관리등이 표시됨</div>
       <div class="article"> 작성한 포스트(글)가 여기에 표시됨</div>
       <div id="tagTrail">입력한 태그가 표시됨</div>
       <div id="actionTrail">트랙백 | 댓글</div>
       <div id="trackback">트랙백 </div>
       <div id="comment"> 댓글
          <div id="commentList"> 댓글 리스트</div>
          <div id="commentWrite"> 댓글 쓰기창</div>
       </div>
   </div><!-- entry close -->
 
</s_article_rep>

   <div id="paging">페이지 번호</div>


</div> <!-- content close -->

블로그 skin에서 가장 복잡한 부분이 content 영역인데 바로 이부분이 블로그의 본문영역이기 때문에 매우 복잡하답니다. content 영역에서는 우선 <s_article_rep> 과 </s_article_rep> 사이에 있는 부분이 중요하므로 이 부분은 잘 봐둬야 합니다. 

이쯤해서 도대체 위의 영역에 대한 설명과 알지 못할 소스들을 왜 알아야 하는지 의문을 가질 분들이 계실텐데요!
예를 들어보겠습니다.

 Q. 블로그 글영역의 상단부분에 광고를 삽입하고 싶다면 어디에 삽입해야 할까요?

 A. 글영역이므로 <div class="article">과 </div> 사이에 삽입을 하면 됩니다.

sidebar 영역

side영역에 배너를 삽입하거나 내용을 추가변경등은 티스토리 관리자페이지에서 관리가 편하게 되어 있으므로 별로 중요한 부분은 아닙니다.

<div id="sidebar">
</div> <!-- sidebar close -->

footer 영역

footer 영역은 블로그 가장 하단영역이며 이 부분도 그리 중요한 부분은 아니며
위 content 영역을 이해하고 다룰줄 알면 footer 영역은 아주 쉽게 이해가 가능합니다.

<div id="footer">
</div> <!-- footer close -->  

지금까지의 내용은 티스토리 스킨구조(skin.html  파일구조)에 대해서 티스토리 스킨가이드를 참조하여 정리해봤습니다.

조금 딱딱하고 재미는 없지만 skin.html 을 이해하기 위해서 가장 필요한 부분이므로 태그를 잘 모르는 분들은 이번 기회에 잘 알아두시는 것은 어떨까요?

이후에 이어지는 포스트는 skin.html 을 다루기 위하여 필요한 태그, 구성요소중 알아야 할 내용, 서식을 지정하는 style.css 의 내용들에 대해서 올리려고 합니다. 과연 시간이 허락해줄지 의문입니다..

2008/10/21 - [CSS for 티스토리] - 스타일시트(CSS) 이해하기 for 티스토리
2008/10/24 - [CSS for 티스토리] - 스타일시트(CSS)의 선언방법 1
2008/10/27 - [CSS for 티스토리] - 스타일시트의 선언방법 및 사용 예제 2
2009/02/11 - [CSS for 티스토리] - 블로거가 꼭 알아야 할 HTML 태그 7가지

댓글을 달아 주세요

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

  1. 이전 댓글 더보기
  2. 검도쉐프 2009.09.03 23:42 신고  댓글주소  수정/삭제  댓글쓰기

    아... 이런 글 정말 기다렸습니다.
    감사합니다.
    정독해서 유용하게 사용하겠습니다.

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

      아.. 이런 글이 필요한 분도 계시는군요! ㅎㅎ
      전 반응이 시니컬할까봐서리.. 은근히 신경쓰였거든요! ㅎㅎ

  3. BlogIcon 생각하는 사람 2009.09.04 08:51 신고  댓글주소  수정/삭제  댓글쓰기

    오흣 쪼금 어렵군요 ㅠㅠ
    전 바꾸고 싶지만 아직 초보라 잘 안되더군요 ㅎㅎ

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

      이 부분은 개괄적으로 윤곽만 설명된 부분이어서
      조금 어렵거나 지루할 수 있습니다.
      조금 더 세부적으로 들어가면 쉽지 않을까 싶네요!

  4. BlogIcon Bloney 2009.09.04 08:58 신고  댓글주소  수정/삭제  댓글쓰기

    잘보고 갑니다. 요즘 CSS에 관심이 많은데 항상 여기서 많이 배우고 가네요 ^ ^

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

      ^^ 블로깅을 하는데 단계가 있는것 같아요!
      이 부분은 좀더 일찍 올렸어야 하는 내용인데..
      게을러서 이제서야 올리게 되네요! ^^

  5. BlogIcon 카타리나^^ 2009.09.04 09:28 신고  댓글주소  수정/삭제  댓글쓰기

    저는 주는대로...
    저넘의 태크만 보면 머리가 지끈 지끈 ㅜㅡ

  6. BlogIcon 티런 2009.09.04 10:32 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 정말 좋은정보 감사합니다.
    스킨을 손볼려해도 이런 진지한 정보가 없어서....^^
    좋은 하루되세요~

  7. BlogIcon ageratum 2009.09.04 12:00 신고  댓글주소  수정/삭제  댓글쓰기

    잘 모르시는 분들께는 정말 유용한 정보네요..^^
    저는 나름 html같은거 잘 안다고 생각했는데..
    막상 건드려보면 의도대로 안나오기도 하고..
    지금 스킨에서 바꿔보려는 생각도 있었지만.. 무너질까봐 못하겠어요..^^:

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

      마저요!
      생각되로 한번에 되면 괜찮은데 잘 안되면...
      예상치 못할 시간 할애를 하게 되는것이 태그가 아닌가 합니다. ㅎㅎ

  8. BlogIcon B타운 2009.09.04 13:15  댓글주소  수정/삭제  댓글쓰기

    오늘 포스팅 저한테 딱 좋은 정보네요
    좋은 내용 감사합니다

    다음 포스팅도 기대할게요~^^

  9. BlogIcon HEPI 2009.09.04 14:39 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리 처음 개설했을 때가 생각나는군요.
    그 때 왜이리 스킨에 집착했었는지...^^ 지금은 스킨은 포기한 상태...

    • BlogIcon Kay~ 2009.09.07 15:44 신고  댓글주소  수정/삭제

      ㅎㅎ 저도 그랬답니다.
      이유는 아마도 티스토리의 스킨 개방때문이 아닐까요?
      원하는 대로 꾸며봐라.. 요래 개방해놓으니까..
      들여다 보고 맘에 안드는 부분 손을 대고.. ㅎㅎ
      결국에 특별히 좋아지지도 않는데 시간만 들어가고. ㅎ
      그 시간에 포스팅을 했다면 몇개는 했을텐데 하고 아쉬움만 가득하던 때가 있었죠.
      지금도 가끔 그런답니다. 몇달에 한번이요..ㅋ

  10. BlogIcon 바람처럼~ 2009.09.04 22:59 신고  댓글주소  수정/삭제  댓글쓰기

    아 이제는 조금 이해가 될거 같아요 ^^;
    저도 이래 저래 만져봐서
    아주 살짝 ㅋㅋㅋ
    그래도 기본 잡기에 아주 도움이 되었습니다

    • BlogIcon Kay~ 2009.09.07 15:45 신고  댓글주소  수정/삭제

      뭐든 자꾸 들여다 보고 만지고 고민하다 보면
      안될게 없지요.
      다만 시간적 여유가 없어서 못하는 것이 아닐까 합니다.

  11. BlogIcon 둥이 아빠 2009.09.05 00:19 신고  댓글주소  수정/삭제  댓글쓰기

    제일 좋은 스킨은 어떤 스킨일까요?? ㅍ,ㅍ,

    • BlogIcon Kay~ 2009.09.07 15:46 신고  댓글주소  수정/삭제

      그게말이죠.. 음.. ㅎㅎ
      맘에 드는 스킨이 없어서 이렇게 스킨을 건드리게 되는것이 아닐까요?
      실제로 맘에 드는게 없어요. ㅎㅎ

  12. BlogIcon 마루. 2009.09.05 00:58 신고  댓글주소  수정/삭제  댓글쓰기

    저도 한번 어찌 해보다가 실패를 했는데 마침 백업을 하지 않아서
    그냥 새로 스킨받은적이 있습니다..ㅋㅋ..지금은 백업 잘하고 있는데
    게을러서 스킨만지작거리질 않네요..^^

    • BlogIcon Kay~ 2009.09.07 15:46 신고  댓글주소  수정/삭제

      한번 질리도록 시간투자를 해서 스킨을 만지고 나면
      더 이상 손도 대기 싫은게 스킨인것같아요.
      그러다가 시간이 좀 흐르면 다시 손을 대는 스킨.. ㅋㅋ

  13. BlogIcon 드자이너김군 2009.09.05 13:37 신고  댓글주소  수정/삭제  댓글쓰기

    오~ 저도 요것 생각하고 있는데..ㅋ
    스킨 만지작 거리는게 이젠 너무 여력이 안되서.. 손때고 있습니다.하하

  14. 2009.09.05 13:38  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2009.09.07 15:48 신고  댓글주소  수정/삭제

      어? 이거요? ㅎㅎ
      다른 블로그에 많이 올라와 있는것 같던데요..
      추천버튼 정리 이렇게 검색하면 나와요!
      혹시 못 찾으시면 그때 말씀해주세요!
      덕분에 포스팅좀 해보게요! ㅎㅎ

  15. BlogIcon 키르케 2009.09.08 11:02  댓글주소  수정/삭제  댓글쓰기

    와 정말 도움이 됐어요.
    블로그를 꾸미고 싶은데
    알수없는 암호들에 막막했거든요.
    감사합니다. ^^6

  16. BlogIcon FlyingPotato 2010.04.27 21:03 신고  댓글주소  수정/삭제  댓글쓰기

    네이버블로그 티스토리로 이사하기전에 스킨 만들고 있는데,
    까딱하면 잘못되는것이 어렵네요 ㅎㅎ
    여기 도움 되는 글이 많아서 좋아요 ^^

    • BlogIcon Kay~ 2010.05.05 23:55 신고  댓글주소  수정/삭제

      ㅋ 그렇죠. 스킨은 말이 스킨이지..
      그 내부는 표시방법이나 순서등이 있으니 잘못만지면
      깨지는 경우가 많죠..
      수정전에 꼭 스킨 저장하고 하세요! ^^

  17. mintry 2010.05.12 00:36 신고  댓글주소  수정/삭제  댓글쓰기

    다른데서 찾기 힘들었는데,
    상세하게 설명해주셔서 정말 감사해요.
    이렇게 정리하기 참 힘드셨을텐데!!
    유용하게 보고 갑니다~

  18. BlogIcon 찰리버드 2010.06.25 19:53  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 블로그 운영한지 3달되가는데요
    저같은 초보에겐 정말 유용한 글이네요~
    잘 보고갑니다^^
    컨텐츠가 많고 알차 자주 들릴것같군요

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

      스킨을 완전히 다루는데까지는 부단한 노력이 필요한것 같아요~
      필요한 부분만 만지고 수정하는 것이 최선책이 아닐까 합니다. ^^

  19. BlogIcon 일개미 2010.12.22 22:05  댓글주소  수정/삭제  댓글쓰기

    티스토리에서 요. 본문과 vew on 사이에 iframe으로 뭘 넣고 싶은데요. 어디를 어떻게 고쳐야하는지 모르겠습니다.

    가르침 부탁드립니다.

    • BlogIcon Kay~ 2010.12.23 11:43 신고  댓글주소  수정/삭제

      일개미님 반갑습니다.
      뷰온은 플러그인으로 컨트롤을하기 때문에 일반적인 방법으로는 본문과 뷰온 사이에
      내용 삽입을 하기 쉽지 않습니다.
      자바스크립트를 이용해야 하는데요~
      방법은 이미 포스팅을 해놨습니다.
      정답은 아니지만 이 방법으로 가능할 수도 있겠네요~~
      http://ccoma.tistory.com/847
      위 링크를 참조하셔 꾸며보세요~ ^^
      성공하시길~~

  20. BlogIcon songyeon 2012.02.15 22:10 신고  댓글주소  수정/삭제  댓글쓰기

    잘 봤습니다 고맙습니다

  21. 2020.05.06 12:37  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다