[쉬운HTML] 두번째 시간 - 티스토리 블로그 HTML/CSS를 파헤쳐보자


IT Story/HTML이야기 2011.01.03 01:58



 

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> 누누이 말씀드렸듯 헤드부분부터 시작을 합니다.

<script language= javascript> 자바스크립트 ( 행동 ) 을 쓰겠다고 말해주는 부분입니다.
var url1 = 'shakej.tistory.com';

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">
   
    //script by kunmin, 2010-04-06
    var mobilewords = new Array("Windows CE","Mobile","Android");
    for (var word in mobilewords) {
        if (navigator.userAgent.match(mobilewords[word]) != null && confirm("모바일 유저이시군요. 모바일 페이지에서 MNW를 즐기시겠습니까?")) {
            //티스토리 /m 모바일 페이지로 이동
            location.href = "http://" + location.host + "/m" + location.pathname;
            break;
        }
    } 모바일워드라고 적힌 부분이 있는데, 이부분은 스마트폰 웹브라우저로 접속했을 때 판단을 해서 모바일 유저일 경우 뒷부분에 m을 붙여 자동으로 모바일 블로그페이지로 넘어가게 하는 부분입니다.
</script>
<!-- 모바일 브라우저 인식 -->

 

 

 

 <script src="./images/daumcount.js" type="text/javascript"></script>
daumcount.js 라는 자바스크립트 파일을 사용하고 이 자바스크립트 유형은 text/javascript라고 적어주는 부분입니다.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
가장 중요한 부분입니다. 헤더에서. content에서 text/html 과 같이 표기를 해서 이 웹페이지를 해석할 방법을 알려주는 부분입니다. 이부분에 xhtml/css 라고 적어준다면 xhtml 로 해석을 하겠죠? 참고로 xhtml 은 되게 깐깐해서 정말 완벽하게 코딩을 하지 않는다면 아예 웹페이지 로딩이 되질 않습니다.

<title>MNWorld :: [##_page_title_##]</title>
웹브라우저 타이틀에 부분입니다. [##_page_title_##] 부분은 티스토리 내에서 제목부분에 해당됩니다.

<link href="./style.css" rel="stylesheet" type="text/css" />
style.css라는 CSS파일을 참고하고 이파일은 stylesheet로 해석합니다 란 뜻입니다.


<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="http://feeds.feedburner.com/MNW" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />

 


 <script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>
<script type="text/javascript" language="javascript">
function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){
    // JavaScript function was developed by MissFlash (http://blog.missflash.com)
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    var j = 0;
    var MissFlash_Check = 1;
    var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num;
    for(i=0; i<elsLen; i++){
        if(pattern.test(els[i].className)){
            classElements[j] = els[i];
            j++;
            if(els[i].id.indexOf("MF_Reference") == -1){
                var result = els[i].innerHTML;
                els[i].style.display = "none";
            }
        }
    }
    return result;
}
</script>


<!-- 카테고리 다른글 위치 변경 소스1 시작 -->
<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>

<script type="text/javascript" language="javascript">
function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){
    // JavaScript function was developed by MissFlash (http://blog.missflash.com)
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    var j = 0;
    var MissFlash_Check = 1;
    var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num;
    for(i=0; i<elsLen; i++){
        if(pattern.test(els[i].className)){
            classElements[j] = els[i];
            j++;
            if(els[i].id.indexOf("MF_Reference") == -1){
                var result = els[i].innerHTML;
                els[i].style.display = "none";
            }
        }
    }
    return result;
}
</script>
<!-- 카테고리 다른글 위치 변경 소스1 끝 -->

<!-- olpost widget scroll -->
<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>
<!-- end ofolpost widget scroll --> 올포스트 위젯을 다는 소스입니다. 뭐 오른쪽에 붙인다는 의미입니다.

<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('5u93ige2h17h', 'right-upper')</script>
<script type="text/javascript">

  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&amp;fg=444444&amp;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구독하는 부분이있죠?

<script type="text/javascript">
    var daumid = "dancehwan";
    startRequest();
</script></center>
</a></td></tr>
<tr><td>
<a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Ffeeds.feedburner.com%2Fmnw" title="한RSS에 추가"><img src="http://static.hanrss.com/images/add_to_hanrss3.gif" border="0" /></a>
</td></tr></table>
  </div>
  <h1><a href="http://mnworld.co.kr" title="[##_title_##]"><img src="http://cfile9.uf.tistory.com/image/16563E104CC869BD0816C3"   alt="[##_title_##]" /></a></h1>
 </div>

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

 <s_sidebar_element>
  <!-- 블로그 설명 모듈 -->
  <div id="blogDesc">[##_desc_##]</div>
 </s_sidebar_element>
        <s_sidebar_element>
  <!-- 블로그 메뉴 -->
<div id="blogMenu"> 
  <ul>
  <li class="tab_home"><a href="[##_blog_link_##]">첫화면</a></li>
  <li class="tab_localog"><a href="[##_localog_link_##]">로그</a></li>
  <li class="tab_taglog"><a href="[##_taglog_link_##]">태그</a></li>
  <li class="tab_media"><a href="[##_blog_link_##]media">미디어로그</a></li>
  <li class="tab_guestbook"><a href="[##_guestbook_link_##]">방명록</a></li>
  <li class="tab_admin"><a href="[##_owner_url_##]">관리자</a></li>
  <li class="tab_newpost"><a href="[##_owner_url_##]/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="[##_notice_rep_link_##]">[##_notice_rep_title_##]</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">
    [##_category_##]
                </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="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</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="[##_rctps_rep_link_##]"> [##_rctps_rep_title_##].</a> <span class="ps_cnt">[##_rctps_rep_rp_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="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a>
     <span class="info"><span class="name">[##_rctrp_rep_name_##]</span><span class="date">[##_rctrp_rep_time_##]</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="[##_rcttb_rep_link_##]">[##_rcttb_rep_desc_##].</a>
   <span class="info"><span class="name">[##_rcttb_rep_name_##]</span><span class="date">[##_rcttb_rep_time_##]</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="[##_archive_rep_link_##]">[##_archive_rep_date_##] </a> <span class="ps_cnt">([##_archive_rep_count_##])</span>
     </li>
   </s_archive_rep>
    </ul>
  </div>
  </s_sidebar_element>

<s_sidebar_element>
            <!-- calender -->
            <div id="calendar"><div class="wrapAbContent">[##_calendar_##]</div></div>
   </s_sidebar_element>

<s_sidebar_element>
            <!-- link -->
            <div id="link">
<h3>이웃블로거</h3>
<ul><s_link_rep><li><a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a></li></s_link_rep></ul></div>
   </s_sidebar_element>
<s_sidebar_element>
<!-- counter -->
  <div id="counter">
  <center><ul><li>총방문자 : [##_count_total_##]</li></br><li>오늘방문자 : [##_count_today_##]</li></br></ul></center>
  </div>
  </s_sidebar_element>

  <!-- etc -->
  <s_sidebar_element>
  <div id="btnRSS">
  <a href="[##_rss_url_##]" 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>'[##_list_conform_##]'에 해당되는 글 [##_list_count_##]건</h3>
 <ol>
  <s_list_rep>
   <li>
    <span class="date">[##_list_rep_regdate_##]</span>
    <a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a>
    <span class="cnt">[##_list_rep_rp_cnt_##]</span>
   </li>
  </s_list_rep>
 </ol>
</div>
</s_list>

<s_rplist>
<div id="searchRplist" class="nonEntry">
 <h3>'[##_rplist_conform_##]'에 해당되는 댓글 [##_rplist_count_##]건</h3>
 <ol>
  <s_rplist_rep>
   <li>
    <span class="date">[##_rplist_rep_regdate_##]</span>
    <a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a>
    <span class="cnt">[##_rplist_rep_rp_cnt_##]</span>
    <span class="name">[##_rplist_rep_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: [##_local_spot_depth_##]px">
   [##_local_spot_##]
  </div>
 </s_local_spot_rep>
 <s_local_info_rep>
  <div class="info" style="margin-left: [##_local_info_depth_##]px">
   <a href="[##_local_info_link_##]">[##_local_info_title_##]</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="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</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="[##_guest_input_name_##]" value="[##_guest_name_##]" />
      <label > : 이름 </label>
     </p>
     <p>
      <input type="password" maxlength="8" name="[##_guest_input_password_##]" value="" />
      <label > : 패스워드 </label>
     </p>
     <p>
      <input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" 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="[##_guest_onclick_submit_##]" class="submit" />
   </p>
  </div><!-- guestWrite close -->
 </s_guest_input_form>

 <s_guest_container>
  <div id="guestList">
   <ol>
    <s_guest_rep>
     <li id="[##_guest_rep_id_##]">
      <div class="[##_guest_rep_class_##]">
       <span class="name">[##_guest_rep_name_##]</span>
       <span class="date"> [##_guest_rep_date_##]</span>
       <span class="control">
        <a href="#" onclick="[##_guest_rep_onclick_delete_##]" class="modify"><span>Modify/Delete</span></a>
        <a href="#" onclick="[##_guest_rep_onclick_reply_##]" class="write"><span>Reply</span></a>
       </span>
       <p>[##_guest_rep_desc_##]</p>
      </div>
      <s_guest_reply_container>
       <ul>
        <s_guest_reply_rep>
         <li id="[##_guest_rep_id_##]">
          <div class="[##_guest_rep_class_##]">
           <span class="name">[##_guest_rep_name_##]</span>
           <span class="date"> [##_guest_rep_date_##]</span>
           <span class="control">
            <a href="#" onclick="[##_guest_rep_onclick_delete_##]" class="modify"><span>Modify/Delete</span></a>
           </span>
           <p>[##_guest_rep_desc_##]</p>
          </div>
         </li>
        </s_guest_reply_rep>
       </ul>
      </s_guest_reply_container>
     </li>
    </s_guest_rep>
   </ol>
  </div><!-- guestList close -->
 </s_guest_container>
</div><!-- guestbook close -->
</s_guest>

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

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

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

<!--  <h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>--> 
<script language="javascript"  src="./images/viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./images/", "viewTitle.swf", 500, 30, "[##_article_rep_title_##]", "[##_article_rep_link_##]", "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="[##_s_ad_m_link_##]" title="Modify">글쓰기(큰화면)</a> : <a href="#" onclick="[##_s_ad_m_onclick_##]" title="Modify (windows)"><font color="#FF6600">글쓰기(창모드)</font></a> | <a href="#" onclick="[##_s_ad_t_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="[##_s_ad_d_onclick_##]" title="Delete">글삭제</a> | <span class="text">([##_s_ad_s1_label_##])→<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a></span></div>
</s_ad_div>기존의 티스토리와는 다르게 관리자에게 보이는 부분이며, 저같은 경우는 조금 제가 원하는대로 각색했습니다.


 </div><!-- titleWrap close -->

 <div class="article">
     <!--구글 애드센스 시작-->
<center> <table border=0 width=100% cellspacing=0 cellpadding=0>
<tr>
<td width=50%>

<script type="text/javascript">var kauli_yad_count = typeof(kauli_yad_count) == 'undefined' ? 1 : kauli_yad_count + 1;(function(d){ d.write('<span id="kauli_yad_' + kauli_yad_count + '" style="width:336px; height:280px; display:inline-block"><!--12742--><' + '/span>'); var s = d.createElement('script'); var h = d.getElementsByTagName('head')[0]; s.defer = 'defer'; s.async = 'async'; s.src = 'http://js.kau.li/yad.js'; h.insertBefore(s, h.firstChild);})(document);</script>


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

<!-- olpost widget post list -->
<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>
<!-- end ofolpost widget post list --> 올포스트 최신 글 나타내는 자바스크립트입니다.


<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 class="wdt_button">


</div>


<div class="wdt_button">
<a href="http://twitter.com/shakejj" onclick="window.open(this.href); return false"><img src="http://cfile9.uf.tistory.com/image/1325C5054CDA9EBD280193" border="0" width="52" height="52" /></a>
</div>

<div class="wdt_button">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=MNW&amp;loc=en_U" onclick="window.open(this.href); return false"><img src="http://cfile23.uf.tistory.com/image/1425C5054CDA9EBD2917D8" border="0" width="52" height="52" /></a>
</div>

<div class="wdt_button">
<a href="http://v.daum.net/user/plus?blogurl=http://mnworld.co.kr" onclick="window.open(this.href); return false"><img src="http://cfile5.uf.tistory.com/image/11405D344CDA9FCE417D24" border="0" width="52" height="52" /></a>
</div>


</div>

 

 


 

<!-- HTML에 추가할 소스 -->
<div class="metablog_Div_2">


<!-- 믹시 로그인후 상단우측 블로그관리 클릭 -> 좌측의 등록된 블로그 클릭시 주소창의 URL로 수정할것 -->
<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>

<!-- 올블 검색창에서 본인의 블로그명으로 블로그 검색후 주소창의 URL로 수정할것 -->
<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>

<!-- 블코 로그인후 상단우측 내글목록 클릭시 주소창의 URL로 수정할것 -->
<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>

<!-- 구글구독 본인 블로그 RSS피드 주소로 수정할것 -->
<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&amp;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>

<!-- 피드구독 본인 블로그 RSS피드 주소로 수정할것 -->
<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> [##_tag_label_rep_##]
  </div>
 </s_tag_label>
<div id="articleBtmWrap">
 <div class="actionTrail">
   <a href="#tb" onclick="[##_article_rep_tb_link_##]"><s_tb_count>Trackback <span class="cnt">[##_article_rep_tb_cnt_##]</span></s_tb_count></a> :
   <a href="#rp" onclick="[##_article_rep_rp_link_##]"><s_rp_count>Comment <span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count></a>
 </div>

 <s_tb>
  <div class="trackback">
   <h3>Trackback Address :: [##_tb_address_##]</h3>
   <s_tb_container>
    <ol>
     <s_tb_rep>
      <li id="[##_tb_rep_id_##]">
       <h4>Subject: <a href="[##_tb_rep_url_##]" onclick="window.open(this.href); return false" rel="external nofollow">[##_tb_rep_title_##]</a></h4>
       <span class="from">Tracked from <span class="name">[##_tb_rep_site_##]</span></span>
       <span class="date">[##_tb_rep_date_##]</span>
       <a href="#" onclick="[##_tb_rep_onclick_delete_##]; return false" class="delete">&nbsp;<span>Delete</span></a>
       <p>[##_tb_rep_desc_##]</p>
      </li>
     </s_tb_rep>
    </ol>
   </s_tb_container>
  </div><!-- trackback close -->
 </s_tb>

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

   <s_rp_input_form>
    <div class="commentWrite">
     <s_rp_member>
      <s_rp_guest>
       <p>
        <input type="text" name="[##_rp_input_name_##]" value="[##_guest_name_##]" />
        <label > : 이름 </label>
       </p>
       <p>
        <input type="password" maxlength="8" name="[##_rp_input_password_##]" value="" />
        <label > : 패스워드 </label>
       </p>
       <p>
        <input type="text" class="homepage" name="[##_rp_input_homepage_##]" value="[##_guest_homepage_##]"/>
        <label > : 홈페이지 </label>
       </p>
      </s_rp_guest>
      <p class="secretWrap">
       <input type="checkbox" name="[##_rp_input_is_secret_##]" class="checkbox" />
       <label > 비밀글 </label>
      </p>
     </s_rp_member>
     <p>
      <textarea name="[##_rp_input_comment_##]" rows="10" cols="50"></textarea>
     </p>
     <p>
      <input type="submit" value="댓글 달기" onclick="[##_rp_onclick_submit_##]" class="submit" />
     </p>
    </div><!-- commentWrite close -->
   </s_rp_input_form>

  </div><!-- comment close -->
 </s_rp>
</div></div><!-- entry close -->

</s_article_rep>

<s_paging>
<div id="paging">
 <a [##_prev_page_##] class="[##_no_more_prev_##]" id="prevPage">PREV</a>
 <span class="numbox">
  <s_paging_rep>
  <a [##_paging_rep_link_##] class="num"> [##_paging_rep_link_num_##]</a>
  </s_paging_rep>
 </span>
 <a [##_next_page_##] class="[##_no_more_next_##]" 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="[##_blog_link_##]">Home</a> : <a href="[##_localog_link_##]">Location Log</a> : <a href="[##_taglog_link_##]">Tag Log</a> : <a href="[##_blog_link_##]media">Media Log</a> : <a href="[##_guestbook_link_##]">Guestbook</a> : <a href="[##_owner_url_##]">Admin</a> : <a href="[##_owner_url_##]/entry/post">New Post</a><br /><a href="[##_blog_link_##]"> [##_blogger_##]</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 을 자유자재로 바꿔보시면서 블로그를 실제로 한번 살펴보세요.
궁금하신 부분은 댓글로 남겨주세요.

저작자 표시 비영리
신고

WRITTEN BY
ShakeJ

1 ,