-
티스토리 블로그 스킨의 이해를 위한 자료카테고리 없음 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> 누누이 말씀드렸듯 헤드부분부터 시작을 합니다.<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 :: </title>
웹브라우저 타이틀에 부분입니다. 부분은 티스토리 내에서 제목부분에 해당됩니다.
<link href="./style.css" rel="stylesheet" type="text/css" />
style.css라는 CSS파일을 참고하고 이파일은 stylesheet로 해석합니다 란 뜻입니다.
<link rel="alternate" type="application/rss+xml" title="" href="http://feeds.feedburner.com/MNW" />
<link rel="shortcut icon" href="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&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구독하는 부분이있죠?<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=""><img src="https://t1.daumcdn.net/cfile/tistory/16563E104CC869BD08" alt="" /></a></h1>
</div><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>
<!-- calender -->
<div id="calendar"><div class="wrapAbContent"></div></div>
</s_sidebar_element><s_sidebar_element>
<!-- link -->
<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>
<!-- counter -->
<div id="counter">
<center><ul><li>총방문자 : </li></br><li>오늘방문자 : </li></br></ul></center>
</div>
</s_sidebar_element><!-- etc -->
<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><!-- guestWrite close -->
</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><!-- guestList close -->
</s_guest_container>
</div><!-- guestbook close -->
</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">
<!--<h2><a href=""></a></h2>-->
<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"> 포스팅의 제목부분입니다.<!-- <h2><a href=""></a></h2>-->
<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><!-- 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="https://t1.daumcdn.net/cfile/tistory/1325C5054CDA9EBD28" border="0" width="52" height="52" /></a>
</div><div class="wdt_button">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=MNW&loc=en_U" onclick="window.open(this.href); return false"><img src="https://t1.daumcdn.net/cfile/tistory/1425C5054CDA9EBD29" 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="https://t1.daumcdn.net/cfile/tistory/11405D344CDA9FCE41" 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&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>
</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><!-- 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="">
<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><!-- commentList close --><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><!-- commentWrite close -->
</s_rp_input_form></div><!-- comment close -->
</s_rp>
</div></div><!-- entry close --></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 을 자유자재로 바꿔보시면서 블로그를 실제로 한번 살펴보세요.
궁금하신 부분은 댓글로 남겨주세요.
