22. 티스토리 스킨 만들기 본문 수정
드디어 기다리고 기다리던 본문 수정의 시간입니다!
물론 본문의 경우 HTML만으로도 무지 길기 때문에, 한번에 수정하는건 힘듭니다.
몇번 나눠서 수정하도록 하겠습니다.
오늘은 제목부분과, 본문 글 부분을 수정해보도록 합시다!
<s_article_rep>
<div class="entry">
<div class="titleWrap">
<h2><a href="[ ##_article_rep_link_##]">[ ##_article_rep_title_##]</a></h2>
<div class="category"><a href="[ ##_article_rep_category_link_##]">[ ##_article_rep_category_##]</a> </div>
<div class="date">[ ##_article_rep_date_##]</div>
<s_ad_div>
<div class="admin">
<a href="[ ##_s_ad_m_link_##]">수정</a> :
<a href="#" onclick="[ ##_s_ad_m_onclick_##]">수정(창으로)</a> | ([ ##_s_ad_s1_label_##])→
<a href="#" onclick="[ ##_s_ad_s2_onclick_##]">[ ##_s_ad_s2_label_##]</a> |
<a href="#" onclick="[ ##_s_ad_t_onclick_##]">관련글(트랙백)</a> |
<a href="#" onclick="[ ##_s_ad_d_onclick_##]">삭제</a>
</div>
</s_ad_div>
</div>
<hr/>
<div class="article">
[ ##_article_rep_desc_##]
</div>
<s_tag_label>
<div class="tagTrail">
<span class="tagText">TAG </span> [ ##_tag_label_rep_##]
</div>
</s_tag_label>
<div class="actionTrail">
<a href="#tb" onclick="[ ##_article_rep_tb_link_##]">
<s_tb_count>
트랙백 <span class="cnt">[ ##_article_rep_tb_cnt_##]</span>개
</s_tb_count>
</a>
,
<a href="#rp" onclick="[ ##_article_rep_rp_link_##]">
<s_rp_count>
댓글 <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"> <span>삭제</span></a>
<p>[ ##_tb_rep_desc_##]</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='[ ##_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"> <span>댓글주소</span></a>
<a href="#" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify"> <span>수정/삭제</span></a>
<a href="#" onclick="[ ##_rp_rep_onclick_reply_##]" class="write"> <span>댓글쓰기</span></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"> <span>댓글주소</span> </a>
<a href="#" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify"> <span>수정/삭제</span></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>
<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 for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="[ ##_rp_input_password_##]" value="[ ##_rp_admin_check_##]" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지 않음.)
<label for="password"> : 패스워드 </label>
</p>
<p>
<input type="text" class="homepage" name="[ ##_rp_input_homepage_##]" value="[ ##_guest_homepage_##]"/>
<label for="homepage"> : 홈페이지 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="[ ##_rp_input_is_secret_##]" class="checkbox" />
<label for="secret"> 비밀글 </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_##]" />
</p>
</div>
</s_rp_input_form>
</div>
</s_rp>
</div>
</s_article_rep>
<!-- entry close -->
무지하게 길죠?
오늘은 위에 빨간색으로 표시해놓은 부분을 수정할 건데요.
먼저 파란색으로 표시해놓은 <hr/>을 적어주세요.
이번에도 이 <hr/>은 제목과 본문의 경계선으로 사용합니다.
그럼 CSS를 수정해볼까요?
.entry .titleWrap a {color:#000;text-decoration:none;}
.entry .titleWrap a:hover {color:#08C;text-decoration:none;}
.entry .titleWrap .date,
.entry .titleWrap .admin,
.entry .titleWrap .admin a {font-size:13px;}
.entry hr {margin:5px 0 10px 0;}
.entry .article {font-size:14px;}
.entry .article a {color:#08C;text-decoration:none;;}
.entry .article a:hover {color:#333;}
먼저 .entry 영역의 .titleWrap(제목 영역)에 있는 a 태그를 #000색으로 바꾸고, text-decoration을 없애줍니다.
a:hover로 마우스를 댔을 때의 효과를 줬구요.
.entry .titleWarp .date, admin, admin a의 font-size를 13px로 적용시켰습니다.
그 다음은 새로 넣은 hr 부분, 역시 다른곳의 CSS와 같은 속성과 값을 적용했습니다.
.entry .article의 경우 본문을 가리킵니다.
제가 블로그에 포스팅하고 있는 이 부분을 가리키는거죠.
전체적인 폰트 사이즈를 14px로 해줬고,
.article 내부의 하이퍼 링크의 색상을 변경, text-decoration을 없앴습니다.
마지막으로 a:hover로 마우스를 올렸을 때의 색상을 변경했구요.
생각보다 크게 어렵지 않네요.
수정을 마친 상태입니다.
제목이 하늘색으로 변한 이유는 마우스를 가져다 댄 후 스크린 샷을 했기 때문이구요.
제목 부분에 있는 링크는 마우스를 가져다 댈 경우 모두 저 색상으로 변경됍니다.
뭐 딱히 어려운 부분은 없다고 생각하네요.
혹시 이해가 안되거나, 궁금한 점은 댓글에 남겨주세요^^
'Project > 티스토리 스킨' 카테고리의 다른 글
| 24. 티스토리 스킨 만들기 본문 댓글 (13) | 2014.02.22 |
|---|---|
| 23. 티스토리 스킨 만들기 본문 태그, 트랙백 (6) | 2014.02.21 |
| 21. 티스토리 스킨 만들기 비밀 글 (0) | 2014.02.19 |
| 20. 티스토리 스킨 만들기 공지사항 (6) | 2014.02.18 |
| 19. 티스토리 스킨 만들기 방명록 - 2 (수정) (4) | 2014.02.17 |