티스토리 블로그 스킨의 이해를 위한 자료

카테고리 없음

티스토리 블로그 스킨의 이해를 위한 자료

겨울소나기 2011. 9. 28. 11:59

html / css를 가장 재미있고 쉽게 배우는 방법이 뭘까...한참을 고민했습니다.

그건...바로 티스토리 블로그 html/ css를 파헤쳐보는게 아닐까 하는 방법이 떠올랐구요!

그래서 한번 헤쳐봅니다. 이 HTML /CSS를 자유자재로 보고 파헤칠 줄 안다면, 자신의 블로그가 이쁘게 꾸며지는 건 자기 마음대로 할 수가 있겠죠 ?^^ 분명 자신의 홈페이지 혹은 블로그에 관심이 있는 분이라면 재미도 있을 것이고 확실히 실력이 느실 수 있을 겁니다.

먼저 티스토리의 skin.html 을 살펴보죠.
티스토리의 특징은 다른 블로그 터들과는 다르게 본인이 원하는 대로 모두 주무를 수 있다는 것이 장점입니다.
CSS, HTML 자체를 모두 오픈시켜서 블로그라는 느낌이 안들도록 할 수도 있으니까요.

그래요 지금부터 일일이 소개드릴테니 꼼꼼히 살펴보세요!
볼드체 부분이 소개되는 부분입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이 문서는 어떤 DOCUMENT 의 표준을 따르는지 말하는 부분입니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 누누이 말씀드렸듯 헤드부분부터 시작을 합니다.

var url2 = 'mnworld.co.kr'
var online = document.URL;

if(online.match(url1)) document.location.href = online.replace(url1, url2);
만약 url1부분으로 접속한다면 url2부분인 mnworld.co.kr로 접속할 수 있게끔 해주는 부분입니다.
실제로 주소창에 shakej.tistory.com 을 치면 자동으로 mnworld로 접속하게 됩니다.

<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>

<script src="http://static.olpost.net/js/scrollwidjet.js" type="text/javascript">
</script><script type="text/javascript" charset="utf-8">
owb.uid = 3841;
owb.label = "png";
owb.side = "right";
owb.top = 70;
owb.twid = "shakejj";
owb.twbh = 80;
owb.showolpostbar();
</script>
 올포스트 위젯을 다는 소스입니다. 뭐 오른쪽에 붙인다는 의미입니다.

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19065937-1']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>
드디어 헤더 부분이 끝났네요 이제 본 표현 부분입니다.

<body>
바디의 시작입니다.

<s_t3>
<div id="container"> div는 표현이 들어갈 보이지 않는 상자라 보시면 되고 container 라는 이름의 div를 생성하게 됩니다. 이이름은 css에서 .container 라는 부분을 만들고 이 부분의 디자인 부분을 만들어주시면 됩니다.
    <div id="header"> header라는 div를 생성합니다. 이부분은 블로그의 윗부분을 표시합니다.
  <div id="searchBox"> searchBox는 블로그 상단 오른쪽에 검색하는 div입니다.
<table><tr><td><center><div id="blogfeedcount"> 테이블을 만들고 tr, td로 열과 줄을 하나씩 만들었네요.
    <div id="feedburnercount"> feedburnercount 라는 제가 임의로 만든 div입니다.
        <a href="http://feeds.feedburner.com/MNW" title="피드버너카운터수" onclick="window.open(this.href); return false"><img src="http://feeds.feedburner.com/~fc/MNW?bg=F0F0F0&fg=444444&anim=0" height="26" width="88" alt="feedburner" /></a>
    </div>
    <div id="daumcount" onclick="window.open('http://v.daum.net/user/plus?blogurl=http://mnworld.co.kr')">-1</div>
</div>
제 블로그의 오른쪽 상단 부분입니다. 보시면 리더수와 다음뷰수 한 RSS구독하는 부분이있죠?

<div id="sidebar">사이드바에 내용을 표현할 div입니다.
  <s_sidebar>

<s_sidebar_element>
  
  <div id="blogImage"><img src="" alt="블로그 이미지" /></div>
</s_sidebar_element>여기서 로 표현안하고 자신이 원하는 그림주소를 넣으면 이미지모듈을 사이드바에 보여준다고 했을 때 따로 블로그 이미지를 업로드 하지 않고 고정이 되겠죠?

<s_sidebar_element>
  
  <div id="blogDesc"></div>
</s_sidebar_element>
        <s_sidebar_element>
  
<div id="blogMenu">
  <ul>
  <li class="tab_home"><a href="">첫화면</a></li>
  <li class="tab_localog"><a href="">로그</a></li>
  <li class="tab_taglog"><a href="">태그</a></li>
  <li class="tab_media"><a href="media">미디어로그</a></li>
  <li class="tab_guestbook"><a href="">방명록</a></li>
  <li class="tab_admin"><a href="">관리자</a></li>
  <li class="tab_newpost"><a href="/entry/post">새글쓰기</a></li>
  </ul>
</div>
</s_sidebar_element>
  <s_sidebar_element>
  
    <s_rct_notice>
    <div id="notice">
<h3>Notice</h3>
   <ul>
     <s_rct_notice_rep>
    <li><a href=""></a> </li>
     </s_rct_notice_rep>
   </ul>
    </div>
  </s_rct_notice>
  </s_sidebar_element>사이드바 소스를 닫았네요 닫힘태그 입니다
  <s_sidebar_element>
  
  <div id="category">
  <h3>Category</h3>
                <div class="wrapAbContent">

                </div>
카테고리를 펼친 상태로 시작하는 스크립트입니다.
<SCRIPT language=JavaScript>try{expandTree();}catch(e){}</SCRIPT>

</div>

<s_sidebar_element>
  
  <div id="tagbox">
  <h3>Tags</h3>
  <div id="htags" style="display:none;"><tags>
      <s_random_tags>     <li>       <a href="" class=""> </a>     </li>     </s_random_tags>

</div>
</s_sidebar_element>

<s_sidebar_element>
  
  <div id="recentPost">
  <h3>Recent Posts</h3>
    <ul>
   <s_rctps_rep>
     <li>
   <a href=""> .</a> <span class="ps_cnt"></span>
     </li>
   </s_rctps_rep>
    </ul>
  </div>
  </s_sidebar_element>

<s_sidebar_element>
  
  <div id="recentComment">
  <h3>Recent Comments</h3>
    <ul id="recentComments">
   <s_rctrp_rep>
     <li><a href="">.</a>
     <span class="info"><span class="name"></span><span class="date"></span></span>
     </li>
   </s_rctrp_rep>
    </ul>
  </div>
  </s_sidebar_element>

<s_sidebar_element>
  
  <div id="recentTrackback">
  <h3>Recent Trackbacks</h3>
    <ul>
   <s_rcttb_rep>
     <li>
   <a href="">.</a>
   <span class="info"><span class="name"></span><span class="date"></span></span>
     </li>
   </s_rcttb_rep>
    </ul>
  </div>
  </s_sidebar_element>

<s_sidebar_element>
   뭐 따로 설명드릴 필요는 없다 싶네요. 참고로 는 티스토리 내부에서 임의적으로 아마 스크립트를 만들었나본데, 저안에 적혀있는대로 티스토리 다른 메뉴에서 저장하거나 했을 때 저걸로 불러오는 것 같습니다.
  <div id="archive">
  <h3>Archives</h3>
    <ul>
   <s_archive_rep>
     <li>
    <a href=""> </a> <span class="ps_cnt">()</span>
     </li>
   </s_archive_rep>
    </ul>
  </div>
  </s_sidebar_element>

<s_sidebar_element>
            
            <div id="calendar"><div class="wrapAbContent"></div></div>
   </s_sidebar_element>

<s_sidebar_element>
            
            <div id="link">
<h3>이웃블로거</h3>
<ul><s_link_rep><li><a href="" onclick="window.open(this.href); return false"> .</a></li></s_link_rep></ul></div>
   </s_sidebar_element>
<s_sidebar_element>

  <div id="counter">
  <center><ul><li>총방문자 : </li></br><li>오늘방문자 : </li></br></ul></center>
  </div>
  </s_sidebar_element>

<s_sidebar_element>
  <div id="btnRSS">
  <a href="" onclick="window.open(this.href); return false"><img src="./images/rss.gif" alt="RSS" width="55" height="33" /></a>
  </div>
  </s_sidebar_element>

  </s_sidebar>
</div>
<div id="content">
<s_list>
<div id="searchList" class="nonEntry">
<h3>''에 해당되는 글 건</h3>
<ol>
  <s_list_rep>
   <li>
    <span class="date"></span>
    <a href=""></a>
    <span class="cnt"></span>
   </li>
  </s_list_rep>
</ol>
</div>
</s_list>

<s_rplist>
<div id="searchRplist" class="nonEntry">
<h3>''에 해당되는 댓글 건</h3>
<ol>
  <s_rplist_rep>
   <li>
    <span class="date"></span>
    <a href=""></a>
    <span class="cnt"></span>
    <span class="name"></span>
   </li>
  </s_rplist_rep>
</ol>
</div>
</s_rplist>

<s_local>
<div id="localog" class="nonEntry">
<h3>지역로그</h3>
<s_local_spot_rep>
  <div class="spot" style="margin-left: px">

  </div>
</s_local_spot_rep>
<s_local_info_rep>
  <div class="info" style="margin-left: px">
   <a href=""></a>
  </div>
</s_local_info_rep>
</div>
</s_local>

<s_tag>
<div id="taglog" class="nonEntry">
<h3>태그</h3>
<ul>
  <s_tag_rep>
   <li>
    <a href="" class=""></a>
   </li>
  </s_tag_rep>
</ul>
</div>
</s_tag>

<s_guest>
<div id="guestbook" class="nonEntry">
<h3>방명록을 남겨주세요!</h3>
<s_guest_input_form>
  <div id="guestWrite">
   <s_guest_member>
    <s_guest_form>
     <p>
      <input type="text" name="" value="" />
      <label > : 이름 </label>
     </p>
     <p>
      <input type="password" maxlength="8" name="" value="" />
      <label > : 패스워드 </label>
     </p>
     <p>
      <input type="text" name="" value="" class="homepage" />
      <label > : 홈페이지 </label>
     </p>
    </s_guest_form>
   </s_guest_member>
   <p>
    <textarea 여기 name="" cols="50" rows="6"></textarea>
   </p>
   <p>
    <input type="submit" value="남기기" onclick="" class="submit" />
   </p>
  </div>
</s_guest_input_form>

<s_guest_container>
  <div id="guestList">
   <ol>
    <s_guest_rep>
     <li id="">
      <div class="">
       <span class="name"></span>
       <span class="date"> </span>
       <span class="control">
        <a href="#" onclick="" class="modify"><span>Modify/Delete</span></a>
        <a href="#" onclick="" class="write"><span>Reply</span></a>
       </span>
       <p></p>
      </div>
      <s_guest_reply_container>
       <ul>
        <s_guest_reply_rep>
         <li id="">
          <div class="">
           <span class="name"></span>
           <span class="date"> </span>
           <span class="control">
            <a href="#" onclick="" class="modify"><span>Modify/Delete</span></a>
           </span>
           <p></p>
          </div>
         </li>
        </s_guest_reply_rep>
       </ul>
      </s_guest_reply_container>
     </li>
    </s_guest_rep>
   </ol>
  </div>
</s_guest_container>
</div>
</s_guest>

<s_notice_rep>
<div class="entryNotice">
<div class="titleWrap">
  <h2><a href=""></a></h2>
  <span class="category">공지사항</span> <span class="date"></span>
</div>
<div class="article" style="font:14px/150% nanum;">>

</div>
</div>
</s_notice_rep>

<s_article_protected>
<div class="entryProtected">
<div class="titleWrap">

<span class="date"></span>
</div>
<p class="text">보호되어 있는 글입니다. <br />
내용을 보시려면 비밀번호를 입력하세요.</p>
<p><label for="">비밀번호 ::</label>
<input id="" name="" type="password" maxlength="16" onkeydown="if (event.keyCode == 13) " />
<input type="button" class="submit" value="확인" onclick="" />
</p>
</div>
</s_article_protected> 자자 이제 사이드바 부분이 끝났습니다.

<s_article_rep> article 즉 본문에 포스팅되는 부분을 표현하는 태그 시작합니다.
<div class="entry">
<div class="titleWrap"> 포스팅의 제목부분입니다.

<script language="javascript" src="./images/viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./images/", "viewTitle.swf", 500, 30, "", "", "left", "0x00000");
</script> 저같은경우 플래시파일로 물결로 표시되는 제목으로 표현하기위해 viewTitle.swf라는 파일에 제목을 넣는 스크립트를 사용했습니다.

<br><div>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="shakejj" data-related="anywhere">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br>

트윗하는 버튼을 만드는 자바스크립트입니다.
<s_ad_div>
<div class="admin"> <a href="" title="Modify">글쓰기(큰화면)</a> : <a href="#" onclick="" title="Modify (windows)"><font color="#FF6600">글쓰기(창모드)</font></a> | <a href="#" onclick="" title="Trackback">트랙백 </a>| <a href="/admin/entry" target="_self"><font color="#FF6600">글목록</font></a> | <a href="/admin/dashboard" target="_self"><font color="#FF6600">센터확인 </font></a>| <a href="/admin/skin/edit" target="_self">스킨 </a>| <a href="/admin/sidebar" target="_self">사이드</a> | <a href="/admin/comment" target="_self"><font color="#FF6600">댓글확인</font></a> | <a href="#" onclick="" title="Delete">글삭제</a> | <span class="text">()→<a href="#" onclick=""></a></span></div>
</s_ad_div>기존의 티스토리와는 다르게 관리자에게 보이는 부분이며, 저같은 경우는 조금 제가 원하는대로 각색했습니다.

</div>

</td>
<td width=50%>
애드센스광고부분은 보안상 없앱니다.


<script src="http://olpost.com/widget/widget_list.html?uid=3841&m=4192&s=1&l=9&f=&fs=&fc=&tc=1&sc=0&sdc=1" type="text/javascript"></script>
 올포스트 최신 글 나타내는 자바스크립트입니다.

<div class="post_share retweet" id="post_retweet"> 오른쪽에 따라다니는 사이드바 자바스크립트 소스입니다.

<div class="wdt_button">
<script type="text/javascript">
tweetmeme_service = 'bit.ly';
tweetmeme_source = 'shakejj';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
</div>

</div>

</div>

<div class="metablog_Div_2">

<div style="float:left; margin-right: 5px; ">
<a href="http://mixsh.com/search/magic%20networking" onclick="window.open(this.href); return false" alt="믹시" title="믹시">
<img src="./images/i-mixsh.png" title="믹시" width="40" height="40" alt="믹시" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://search.allblog.net/?keyword=Magic+Networking+World&type=100&rssurlidx=555132" onclick="window.open(this.href); return false" alt="올블로그" title="올블로그">
<img src="./images/i-allbl2.png" title="올블로그" width="40" height="40" alt="올블로그" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=725674" onclick="window.open(this.href); return false" alt="블로그코리아" title="블로그코리아">
<img src="./images/i-blko.png" title="블로그코리아" width="40" height="40" alt="블로그코리아" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://feeds.feedburner.com/MNW" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/Google.png" title="iGoogle or 구글리더로 구독하기" width="40" height="40" alt="iGoogle or 구글리더로 구독하기" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=MNW&loc=en_U" onclick="window.open(this.href); return false" alt="Email로 구독하기" title="Email로 구독하기">
<img src="./images/GMail.png" title="Email로 구독하기" width="40" height="40" alt="Email로 구독하기" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://twitter.com/shakejj" onclick="window.open(this.href); return false" alt="트위터 Follow" title="트위터 Follow">
<img src="./images/Twitter 2.png" width="40" height="40" title="트위터 Follow" alt="트위터 Follow" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://feeds2.feedburner.com/MNW" onclick="window.open(this.href); return false" alt="RSS 구독하기" title="RSS 구독하기">
<img src="./images/RSS 2.png" width="40" height="40" title="RSS 구독하기" alt="RSS 구독하기" /></a>
</div>

<div style="float:left; margin-right: 5px; ">
<a href="http://v.daum.net/user/plus?blogurl=http://mnworld.co.kr" onclick="window.open(this.href); return false" alt="다음뷰 구독하기" title="다음뷰 구독하기">
<img src="./images/bt_plus_b03.png" width="40" height="40" title="다음뷰 구독하기" alt="다음뷰 구독하기" /></a>

</div>
</div>

</right>

</center>

</div>
<div class="author">
<span class="text"></span>ShakeJ </div>

<s_tag_label>
  <div class="tagTrail">
   <span class="tagText">태그</span>
  </div>
</s_tag_label>
<div id="articleBtmWrap">
<div class="actionTrail">
   <a href="#tb" onclick=""><s_tb_count>Trackback <span class="cnt"></span></s_tb_count></a> :
   <a href="#rp" onclick=""><s_rp_count>Comment <span class="cnt"></span></s_rp_count></a>
</div>

<s_tb>
  <div class="trackback">
   <h3>Trackback Address :: </h3>
   <s_tb_container>
    <ol>
     <s_tb_rep>
      <li id="">
       <h4>Subject: <a href="" onclick="window.open(this.href); return false" rel="external nofollow"></a></h4>
       <span class="from">Tracked from <span class="name"></span></span>
       <span class="date"></span>
       <a href="#" onclick="; return false" class="delete"> <span>Delete</span></a>
       <p></p>
      </li>
     </s_tb_rep>
    </ol>
   </s_tb_container>
  </div>
</s_tb>

<s_rp>
  <div class="comment"> comment 라는 댓글을 적는 부분 div입니다.
   <h3>운영자에게 댓글은 큰 힘이됩니다!</h3>
   <div class="commentList">
    <s_rp_container>
     <ol>
      <s_rp_rep>
       <li id="">
        <div class="">
         <span class="name"></span>
         <span class="date"> </span>
         <span class="control">
          <a href="" class="address">홈페이지</a>
          <a href="#" onclick="" class="modify">수정&삭제</a>
          <a href="#" onclick="" class="write">답글</a>
         </span>
         <p></p>
        </div>
        <s_rp2_container>
         <ul>
          <s_rp2_rep>
           <li id="">
            <div class="">
             <span class="name"></span>
             <span class="date"> </span>
             <span class="control">
              <a href="" class="address">Address</a>
              <a href="#" onclick="" class="modify">Modify/Delete</a>
             </span>
             <p></p>
            </div>
           </li>
          </s_rp2_rep>
         </ul>
        </s_rp2_container>
       </li>
      </s_rp_rep>
     </ol>
    </s_rp_container>
   </div>

<s_rp_input_form>
    <div class="commentWrite">
     <s_rp_member>
      <s_rp_guest>
       <p>
        <input type="text" name="" value="" />
        <label > : 이름 </label>
       </p>
       <p>
        <input type="password" maxlength="8" name="" value="" />
        <label > : 패스워드 </label>
       </p>
       <p>
        <input type="text" class="homepage" name="" value=""/>
        <label > : 홈페이지 </label>
       </p>
      </s_rp_guest>
      <p class="secretWrap">
       <input type="checkbox" name="" class="checkbox" />
       <label > 비밀글 </label>
      </p>
     </s_rp_member>
     <p>
      <textarea name="" rows="10" cols="50"></textarea>
     </p>
     <p>
      <input type="submit" value="댓글 달기" onclick="" class="submit" />
     </p>
    </div>
   </s_rp_input_form>

</div>
</s_rp>
</div></div>

</s_article_rep>

<s_paging>
<div id="paging">
<a class="" id="prevPage">PREV</a>
<span class="numbox">
  <s_paging_rep>
  <a class="num"> </a>
  </s_paging_rep>
</span>
<a class="" id="nextPage">NEXT</a>
</div>
</s_paging>
     </div>
<div id="footer">
<div class="adTistory">
   <a href="http://www.tistory.com" class="logoTistory" title="TISTORY">TISTORY</a>
  </div>
  <div class="copyright">
   <p><a href="">Home</a> : <a href="">Location Log</a> : <a href="">Tag Log</a> : <a href="media">Media Log</a> : <a href="">Guestbook</a> : <a href="">Admin</a> : <a href="/entry/post">New Post</a><br /><a href=""> </a>'s BLOG IS POWERED BY <a href="http://daum.net" onclick="window.open(this.href); return false">DAUM</a> / <span class="tistory">DESIGNED BY <a href="http://MNWorld.com" onclick="window.open(this.href); return false">shakeJ</a></span>Like You♥</p> 블로그의 제일 아래 저작권 부분입니다.
  </div>
</div>
</div>
</s_t3>
<script type="text/javascript" charset="euc-kr" src="http://log.inside.daum.net/dwi_log/js/dwi.js"></script>
<script type="text/javascript" >
_dwiPID="d-W4U-224";
if(typeof(_dwiCatch) == "function") { _dwiCatch();}
</script>

</body>
</html>

뭐 설명하려고 했지만 생각보다 없네요. 중간중간에 나오는 자바스크립트 소스는 각 곳에서 퍼가기로 퍼와서 사용하고 제가 임의대로 이것저것 고쳤을 뿐이니 너무 신경안쓰셔도 됩니다.
생각보다 쉽죠? 마음대로 한번 고쳐보세요. 다음 시간엔 css파일을 알아볼께요.
한번 여러분도 여러분의 블로그 html 을 자유자재로 바꿔보시면서 블로그를 실제로 한번 살펴보세요.
궁금하신 부분은 댓글로 남겨주세요.