티스토리 가지고 놀기 Part . 3-1

▶3번째 이야기를 사작하며,

가장 어떠한 경로로 들어오셨는지는 모르지만, Five Type Story에 들어오신것을 환영합니다, 이글은 파워 블로거가 아닌, 아주 작은 블로가가 쓴 , 티스토리 뻘짓, 등등 하면서 알아낸(물론, 다음 신지식, 네이버 지식인)의 도움을 많이 받았지만, 그걸 막 제 방법대로 막풀어 쓴글입니다.

만약 이야기가 어떤건지 궁금하시면, 첫번째와 두번째 이야기를 보시는것도 괜찮습니다.

티스토리 가지고 놀기 파트 원[읽어보기]
티스토리 가지고 놀기 파트 투[읽어보기]

대강 티스토리 첫번째 이야기는, 꾸미고 싶은데, 방법을 모르겠다. 그래서 환경설정 사이드바설정
을 이용의 태그입력기로 간단한 것을 꾸밀수 있는것이였습니다. 지금 Five Type Story로 예제를 들은다면 아래 그림과 빨갠색 상자로 되어있는 배너들입니다.

예제1

2번째 이야기에서는 소스 수정을 위해 간단한 HTL 개념을 봤습니다.
HTML 이 어떤구조로 되어있고, 대강 그것들이 하는 역할이 무엇인지 였습니다.

▶환영합니다.

세번쨰 이야기로 오신것을 환영합니다, 앞서 밝히고 있지만 이번장에서 하는것은 소스를 직접 수정하는 것입니다. 하지만 그렇다고 근본적인걸 바꾸냐 그런것은 아닙니다.
여기서 얻고자 하는것은 소스수정 창에서 간단하게 이것들이 어떻게 생겼다, 그리고 하는 역할이 간략히 무엇인지 등입니다.

자세히 설명하고는 싶지만 , 저도 잘모르기 때문에 어떻게 설명은 못드리겠습니다.
하지만 티스토리에 자기가 넣고 싶은 위치에, 넣을수 있을정도 까지는 설명해 드리겠습니다.

※단 아직도 제가 알지 못하는 부분은 한도 끝도 없이 많으면, 그러나, 그동안 티스토리에서 뻘짓하면서 이건 여기에 넣으면 여기 나오는구나, 이런식으로 알은것을 기술하려고 합니다.

자 이제 복잡해져볼까 합니다. 간딴히 직접 수정에서 소스를 보겠습니다. 스킨은 여러가지가 있습니다. 그 스킨마다 소스도 다릅니다. 하지만 뼈대는 같은것이라고 생각하고 이것으로 했습니다.

▶Phase 4. 꾸미기 복잡한거 시작 - Part 2. 직접 수정-1

앞에서 나왔던 HTML의 기본 구조를 가지고 직접 소스를 보면서 해석하면서 설명하겠습니다

하지만 완벽히 해석은 못해드립니다. 하지만, 앞서 말씀드린데로 기본적으로 꾸밀수 있게는 해드리겠습니다. 하지만 그렇다고 모든것을 설명하는 것은 아닙니다. 하나하나 설명드리고 싶지만, 예전에 학교에서 HTML이니 php니 그런걸 배우기는 했는데, 기억이 많이 안나는 관계 하지만 난 꼭 다 해석하고 말겠다. 그러신 분에게는 책을 소개해드리겠습니다. (광고는 아님)

HTML & JAVA SCRIPT 사전 상세보기

RYUICHI OKAKURA 외 지음 | 영진닷컴 펴냄

홈페이지 작업을 위한 HTML와 JAVA SCRIPT의 모든 기능을 자세하게 소개한 책. 부록으로 넷스케이프 네비게이터에서 스타일 시티 정보를 취득하는 방법, 자바 스크립트 작성 도구 등을 첨부했다.

HTML+ JAVASCRIPT(UIT SERIES) 상세보기

한국정보처리학회 지음 | 이한출판사 펴냄

대학 교양 IT교육을 체계적인 교육공학의 이론을 기반으로 하여 대학생들의 실무 능력 배양을 위해 PROJECT 중심의 학습방법으로 구성된 대학 IT 교양 교재인 UIT SERIES 중 HTML+ JAVASCRIPT편이다. 학습자가 학습 후 실무에 바로 적용하여 활용할 수 있다.

제가 본 책중에서는 가장 좋다고 생각하는것입니다.(문제는 html 관련 책은 2권이 전부라는것..하핫.)

제가 알고 있는것을 기준으로 설명드립니다. 상단, 본문상단, 본문하단, 사이드바, 4가지를 소개해드리도록 하겠습니다. 한번 소스를 직접보면서 하겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="" href="" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="shortcut icon" href="favicon.ico" />
<title> :: </title>
</head>
<body>
<s_t3>
<div id="container">
<div id="header">
<h1><a href=""></a></h1>
<div class="blogMenu">
<ul>
<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>
</ul>
</div>
</div>

맨위에 무엇인가를 집어넣으실거면 이곳에 소스를 넣으시면 됩니다.
만약 이곳에 소스를 집어넣으시면 그림처럼 맨위에 넣고자 하는것이 추가됩니다.
예를 구글 애드센스를 예로 들을수 있습니다.

그런데 만약 "내가 무엇인가를 넣었는데, 나는 가운데 정렬로 하고 싶은데 왼쪽으로 치우신다." 그러시면 하나만 추가하시면 됩니다.
<Center> </Center> << 여기안에 넣으셔야 합니다. 그러면 넣으신것이 가운데 로 올수 있습니다. 앞서 말한거지만 html 은 열으면 닫아야 합니다.
만약 왼쪽정렬 하고 싶으시면 <left> </left> 오른쪽 정렬은 그 반대로 <right> </right> 하시면 됩니다.

<hr />

<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 for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" name="" value="" class="homepage" />
<label for="homepage"> : 홈페이지 </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>수정/삭제</span></a>
<a href="#" onclick="" class="write"> <span>댓글쓰기</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>수정/삭제</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">

</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>
<div class="entry">
<div class="titleWrap">
<h2><a href=""></a></h2>
<span class="category"><a href=""></a> </span>
<span class="date"></span>
<s_ad_div>
<div class="admin">
<a href="">수정</a> :
<a href="#" onclick="">수정(창으로)</a> |
()→<a href="#" onclick=""></a> |
<a href="#" onclick="">관련글(트랙백)</a> |
<a href="#" onclick="">삭제</a>
</div>
</s_ad_div>
</div>

다섯가지 형태의 이야기 처럼, 본문 상단에 넣으시려면 이곳에 소스를 넣으시면 됩니다.
물론. 가운데 윈쪽 오른 쪽 하고 싶으시념 Center, left, right 를 이용해서 하시면 됩니다.
<div class="article">

</div>
<div class="author">
<span class="text">Posted by </span>
</div>
<s_tag_label>

본문하단에 넣고 싶으시면 이렇게 하시면 됩니다, 여기도 정렬을 하고 싶은 경우 Center,Right,Left를 사용하시면 됩니다.
<div class="tagTrail">
<span class="tagText">TAG </span>
</div>
</s_tag_label>

<div class="actionTrail">
<a href="#tb" onclick=""><s_tb_count>트랙백 <span class="cnt"></span>개</s_tb_count></a>,
<a href="#rp" onclick=""><s_rp_count>댓글 <span class="cnt"></span>개가 달렸습니다</s_rp_count></a>
</div>

<s_tb>
<div class="trackback">
<h3>트랙백 주소 :: </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>삭제</span></a>
<p></p>
</li>
</s_tb_rep>
</ol>
</s_tb_container>
</div>
</s_tb>

<s_rp>
<div class="comment">
<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"> <span>댓글주소</span></a>
<a href="#" onclick="" class="modify"> <span>수정/삭제</span></a>
<a href="#" onclick="" class="write"> <span>댓글쓰기</span></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"> <span>댓글주소</span></a>
<a href="#" onclick="" class="modify"> <span>수정/삭제</span></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 for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="" value=""/>
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </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>
</s_article_rep>

<s_paging>
<div id="paging">
<a class="" id="prevPage">이전</a>
<span class="numbox">
<s_paging_rep>
<a class="num"> </a>
</s_paging_rep>
</span>
<a class="" id="nextPage">다음</a>
</div>
</s_paging>
</div>
<hr />

<div id="sidebar">
<s_sidebar>

<s_sidebar_element>

<div id="blogImage"><img src="" alt="블로그 이미지" /></div>
</s_sidebar_element>

<s_sidebar_element>

<div id="blogDesc"> <span class="userID"></span></div>
</s_sidebar_element>

<s_sidebar_element>

<s_rct_notice>
<div id="notice">
<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="adminMenu">
<ul>
<li class="tab_admin">
<a href=""><img src="./images/btn_admin.gif" alt="관리자" /></a></li>
<li class="tab_write">
<a href="/entry/post"><img src="./images/btn_write.gif" alt="글쓰기" /></a></li>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>

<div id="searchBox">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
<input value="검색" type="button" onclick="" class="submit"/>
</s_search>
</div>
</s_sidebar_element>

<s_sidebar_element>


</s_sidebar_element>

<s_sidebar_element>

<div id="category">
<h3>카테고리</h3>

</div>
</s_sidebar_element>

<s_sidebar_element>

사이드바에 넣으실경우 이곳에 소스를 넣으시면 됩니다. 하지만 이곳을 다른곳이 있습니다. 만약 넣고 자 할경우
<s_sidebar_element> </s_sidebar_element> 안에 넣으셔야만 합니다.
예제를 하나 보여드리면
<s_sidebar_element>
<Center > 정렬 : 하고싶으실 경우만
배너
</center>
</s_sidebar_element>

★★★★ 코드를 넣었는데도 사이드바에 안보이시나요?
1. 환경설정 > 스킨 > 사이바 설정 가셔서 한번 확인해보세요,
추가 가능한 모듈(스킨 기본) , 추가 가능한 플러그인 에서 확인해 보세요, 이곳에 있을수도 있습니다. 만약 여기 있으면 원하는 위치로 옮겨놓으시면 됩니다.
2.소스를 제대로 입력하셨나요? 열고 닫기를 정확히 하셨습니까?


<div id="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li><a href="" class=""> </a></li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>

<div id="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href=""> .</a>
<span class="cnt"></span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>

<div id="recentComment">
<h3>최근에 달린 댓글</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>최근에 받은 트랙백</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>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href=""> </a>
<span class="cnt">()</span>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>

<div id="calendar">
<h3>달력</h3>

</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">
<ul>
<li class="total">Total : </li>
<li class="today">Today : </li>
<li class="yesterday">Yesterday : </li>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>

<s_sidebar>


<s_sidebar_element>

<div id="adTistory">
<a href="http://www.tistory.com"><img src="http://tattertools.com/ko/tistoryBanner01.gif" alt="tistory" /></a>
<div class="tistoryJoin"><a href="http://www.tistory.com/join">티스토리 가입하기!</a></div>
</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"/> </a>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<hr />

<div id="footer">
<div class="footMenu">
<a href="">지역로그</a> :
<a href="">태그</a> :
<a href="media">미디어로그</a> :
<a href="">방명록</a> :
<a href="">관리자</a> :
<a href="/entry/post">글쓰기</a>
</div>
<div class="copyright">
<a href=""> </a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daum</a> & <a href="http://www.tattertools.com" onclick="window.open(this.href); return false">Tattertools</a> / Designed by <a href="http://www.tistory.com">Tistory</a>
</div>
</div>
</div>
</s_t3>
</body>
</html>

'Sufing The Web' 카테고리의 다른 글

꽃으로 블로그 표시하기 (2)	2008.07.06
티스토리 가지고 놀기 Part . 3-2 첫번째 이야기 (2)	2008.03.10
다음 신지식에 트리백으로 답글을 달다. (3)	2008.03.07
티스토리 가지고 놀기 Part . 2 (2)	2008.03.06
티스토리 가지고 놀기 Part . 1 (0)	2008.03.04
신기한 플톡~~ (14)	2007.03.12

티스토리 가지고 놀기 Part . 3-1

'Sufing The Web' 카테고리의 다른 글

'Sufing The Web' Related Articles

티스토리툴바