3. 티스토리 스킨의 뼈대 구성하기

2013.12.12 12:28
저자 : Kurien

오늘은 스킨의 뼈대를 구성해보겠습니다.

티스토리 측에서 제공한 부분을 뼈대로 해서 만들겠습니다.


먼저 제가 준비한 태그를 볼까요?


<!DOCTYPE HTML>

<html lang="ko">

<head>

<meta charset="utf8" />

<title></title>

<link rel="stylesheet" type="text/css" href="./style.css" />

</head>

<body>

<s_t3>


<div id="container">

  <div id="header">

    <h1>01. 블로그 제목</h1>

    <div class="menu">02. 블로그 메뉴</div>

  </div>

  <!-- header close -->


  <div id="sidebar">

  </div>

  <!-- sidebar close -->


  <div id="content">


    <div class="searchList">11. 검색 결과 리스트</div>

    <div class="searchRplist">12. 검색 결과 댓글 리스트</div>

    <div class="locallog">13. 위치 로그</div>

    <div class="taglog">14. 태그 클라우드</div>


    <div class="guestbook">15. 방명록

      <div class="guestWrite">15-1. 방명록 글쓰기</div>

      <div class="guestList">15-2. 방명록 리스트</div>

    </div>

    <!-- guestbook close -->


    <div class="entryNotice">16. 공지사항 글</div>

    <div class="entryProtected">17. 보호 글</div>


    <div class="entry">18. 글

      <div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리</div>

      <div class="article">18-2. 글</div>

      <div class="tagTrail">18-3. 글 관련 태그</div>

      <div class="actionTrail">18-4. 트랙백 | 댓글</div>

      <div class="trackback">18-5. 트랙백</div>

      <div class="comment">18-6. 댓글

        <div class="commentList">18-6-1. 댓글 리스트</div>

        <div class="commentWrite">18-6-2. 댓글 쓰기</div>

      </div>

    </div>

    <!-- entry close -->


    <div class="entry">19. 페이지</div>

  </div>

  <!-- content close -->



  <div id="footer">

  </div>

  <!-- footer close -->


</div>

<!-- container close -->


</s_t3>

</body>

</html>


길죠?

현재 서브 블로그에 적용한 태그인데요.

앞으로 이것의 몇배가 될만한 양을 다룹니다.

긴장하구 계세요. ㅎㅎ


지금 이게 기본 틀인데요.

이 기본 틀을 가지고 블로그 스킨을 수정해보겠습니다.

먼저 여기서는 하나하나 떼어가면서 설명해드릴께요.

먼저 윗 부분 부터 보시죠.


<!DOCTYPE HTML>

<html lang="ko">

<head>

<meta charset="utf8" />

<title></title>

<link rel="stylesheet" type="text/css" href="./style.css" />

</head>


시작부터 </head>부분 까지입니다.

먼저 <!DOCTYPE HTML>은 HTML5를 사용하고 있다고 선언해주는겁니다.

크게 중요한 건 아니지만, 기본적으로 넣어주시는게 좋습니다.


다음은 html의 시작부분인 <html>인데요.

<html lang="ko">를 넣어주게 되면, 다른 웹에서 인식 할때 이 페이지는 한국어로 되어있다고 알 수 있습니다.

이것도 크게 중요하지 않지만, 넣어주시는게 좋습니다.


다음은 <mmeta charset="utf8" />입니다.

웹 페이지의 인코딩을 utf-8로 사용하는거죠.

이걸 적어주지 않으시면 다른 환경에서 볼 때 문자가 깨져버리는 현상이 나타납니다.

꼭 넣어주시구요.


<title></title>은 사이에 제목을 넣어주게 되면 웹 페이지 상단에 표시되게 됩니다.


    


왼쪽은 title에 제목을 넣지 않았을때인데요, 주소가 표시됩니다.

오른쪽은 사이에 Kurien's Blog라고 적었을 때 입니다. 주소 대신 Kurien's Blog 라고 나오게 되죠?


다음 태그는 <link rel="stylesheet" type="text/css" href="./style.css" />입니다.

./style.css에 있는 스타일 부분을 넣어주는겁니다.



위에 보시면 skin.html 바로 아래 style.css가 있죠?

그 부분을 skin.html에 넣어주는 태그입니다.

반드시 해주셔야하니 확실하게 넣어주세요.


시작부터 헤더부분까지의 설명은 이 정도구요.

<body>부분은 차근차근 알아가실텐데요.

위에 보시면 <body> 내부에 일반적인 태그에서 볼 수 없는 태그가 하나 포함되어있습니다.

바로 <s_t3></s_t3>입니다.


이 태그는 일반적인 홈페이지 구성에서 볼 수 있는게 아닌 티스토리만의 자체 태그라고 보시면 되는데요.

티스토리에서 사용하는 치환자가 있습니다.

[# #_blog_link_# #]같은 방식으로 사용하는데요.

원래는 ##처럼 붙여 사용해야 하지만, 적으면 인식해버리니 띄어서 적었습니다.

이런 치환자가 <s_t3> 태그의 내부에서만 사용이 가능합니다.

이것만 알아두시면 앞으로 스킨을 만드는데는 걱정할 것은 없겠네요.



현재 서브블로그 상태입니다.

아무것도 없지만 하나하나 채워나가야죠.


혹시라도 어려운점에 대한 질문들은 댓글에 남겨주세요^^

진행 상태는 http://kreedit.tistory.com에서 볼 수 있습니다.