<div class="post">
<h2>제목<h2>
<div class="category">카테고리</div>
<div class="date">날짜</div>
<div class="article">
<div class="admin">관리자설정</div>
본문내용
</div>
<div class="tagTrail">태그</div>
<div class="actionTrail">트랙백,댓글 링크</div>
<div class="trackback">트랙백</div>
<div class="comlist">댓글읽기</div>
<div class="comwrite">댓글쓰기</div>
</div>
녹색으로 표시된 부분을 진행할 차례입니다.
먼저 완성된 모습을 미리보겠습니다.
트랙백,댓글 링크
skin.html에서
</s_tag_label>의 아래에 다음 소스를 입력합니다.
<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>
이제 style.css 에 아래 내용을 입력합니다.
.actionTrail {margin-top:10px; padding:10px 0px; font:8pt verdana; border-top:#CCCCCC 1px solid; border-bottom:#CCCCCC 1px solid}
.actionTrail a {font-weight:bold; color:#888888}
.actionTrail .cnt {color:#91B3E3}
글씨체와 크기, 색깔 등을 취향에 맞게 수정하세요. :)
트랙백
skin.html 에서 방금 작성한
actionTrail이 끝나는 </div> 아래에 다음 소스를 입력합니다.
<!-- 트랙백 -->
<s_tb>
<div class="trackback">
<div class="tbadress"><strong>trackback adress : </strong>[샵샵_tb_address_샵샵]</div>
<s_tb_container>
<ol>
<s_tb_rep>
<li id="[샵샵_tb_rep_id_샵샵]">
<span class="tbtitle"><a href="[샵샵_tb_rep_url_샵샵]" onclick="window.open(this.href); return false" rel="external nofollow">[샵샵_tb_rep_title_샵샵]</a></span>
<span class="tbfrom">[샵샵_tb_rep_site_샵샵]</span>
<span class="tbdate">[샵샵_tb_rep_date_샵샵]</span>
<a href="javascript:;" onclick="[샵샵_tb_rep_onclick_delete_샵샵]; return false" class="delete">Del</a>
<p>[샵샵_tb_rep_desc_샵샵]</p>
</li>
</s_tb_rep>
</ol>
</s_tb_container>
</div>
</s_tb>
<s_tb_rep>부터 </s_tb_rep>까지가 리스트가 반복될 부분입니다.
style.css에 아래 내용을 입력합니다.
>trackback .tbadress {padding:10px 0px; border-bottom:#CCCCCC 1px solid; font:8pt verdana; font-weight:normal; color:#888888}
.trackback ol {margin:0px; padding:0px}
.trackback ol li {margin:0px; padding:10px 0px 7px 0px; list-style:none; border-bottom:#CCCCCC 1px solid}
.trackback a.delete {text-decoration:none; font-size:7pt; font-family:verdana; color:#888888}
.tbtitle a {color:#91B3E3; font:9pt verdana,Dotum; font-weight:bold}
.tbfrom {color:#888888; font:8pt dotum}
.tbdate {color:#AAAAAA; font:8pt tahoma}
.trackback p {margin-top:5px; color:#888888; font:8pt dotum}
트랙백주소 복사 버튼은 관리자모드 - 스킨 - 화면출력 설정에서 하실 수 있습니다.
댓글 부분은 방명록과 같은 모양으로 만들 건데요, 소스도 거의 동일합니다.
에 다음 소스를 삽입합니다.
댓글 읽기
먼저 skin.html에서
<s_rp>의 아랫줄에 다음 소스를 입력합니다.
<!-- 댓글 읽기 -->
<s_rp_container>
<div class="comlist">
<ol>
<s_rp_rep>
<li id='[샵샵_rp_rep_id_샵샵]'>
<div class="[샵샵_rp_rep_class_샵샵]">
<span class="name">[샵샵_rp_rep_name_샵샵]</span>
<span class="control">
<a href="#" title="수정/삭제" onclick="[샵샵_rp_rep_onclick_delete_샵샵]">Modify/Delete</a>
<a href="#" title="답변" onclick="[샵샵_rp_rep_onclick_reply_샵샵]">Reply</a>
</span><br />
<span class="date"> [샵샵_rp_rep_date_샵샵]</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="#" onclick="[샵샵_rp_rep_onclick_delete_샵샵]" title="수정/삭제">
Modify/Delete </a>
</span>
<p>[샵샵_rp_rep_desc_샵샵]</p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</div>
</s_rp_container>
[샵샵_rp_rep_class_샵샵] 치환자는 방명록에서와 마찬가지로
일반 글과 비밀글, 관리자가 쓴 글 등의 클래스를 나누어 구분하게 하는 치환자입니다.
위에서 말했듯이 댓글부분은 방명록과 같은 모양으로 만듭니다.
※ 위의 html 소스와
'방명록 읽기'의 html 소스를 비교하시면 치환자만 다른 것을 알 수 있을겁니다.
그리고 유심히 보시면 딱 한 군데 더 다른 부분을 알 수 있을텐데요,
위 소스에서 맨 위에 빨간색으로 표시해 둔 부분입니다.
'댓글 읽기' 부분의 전체를 감싸는 레이어의 class를 comlist로 지정해 준 것입니다.
'방명록 읽기'에서는 class가 아닌 'guestList'라는 id를 주었습니다.
지금까지 열심히 강의를 보셨다면 왜 댓글에서는 class, 방명록에서는 id를 지정했는지 감이 오실 겁니다.
4강에서 설명했듯이 id는 한 문서에 하나 밖에 있을 수 없으며, class는 문서의 여러 군데에 지정할 수 있답니다.
한 페이지에 한 개의 포스트만 나오게끔 한다면 댓글 부분에서도 class가 아닌 id를 사용하면 되지만
그렇지 않은 경우도 많기 때문에 class를 사용한 것입니다. :)
자. 정리하면 '방명록 읽기'와 '댓글 읽기'의 다른 부분은
각각의 치환자와
전체를 감싸는 레이어의 이름입니다.
이 중 style.css에 영향을 미치는 것은 치환자가 아닌 레이어 이름 뿐이지요.
모양은 css에서 결정한다는 것을 아시죠? 방명록과 댓글은 모양이 같으니 css의 속성도 동일합니다.
8강에서 같은 속성을 지닌 선택자는 콤마(,)로 묶을 수 있다는 것을 배우셨습니다.
고로 style.css에서 댓글에 대한 속성을 따로 입력하지 않고, 간단하게 방명록 선택자 옆에 콤마를 붙여 댓글 선택자 이름만 쓰면 된답니다!
기쁘지 않나요? 저는 이럴 때 쾌감을 느낍니다. ㅋㅋㅋㅋㅋ
먼저 천천히 따라해보세요.
style.css에서 아래 내용을 찾아보세요.
#guestList ol {list-style:none; padding:0px}
#guestList ol li {margin-top:20px; border-bottom:#CCCCCC 1px solid}
방명록에서의 id="guestList" 는 댓글에서 class="comlist" 이죠.
#guestList 를 .comlist 로 바꿔 주면 댓글읽기의 css는 해결이 되는 것입니다.
방명록 선택자 옆에 얌전하게 댓글의 선택자를 입력하면 아래와 같이 됩니다.
#guestList ol,.comlist ol {list-style:none; padding:0px}
#guestList ol li,.comlist ol li {margin-top:20px; border-bottom:#CCCCCC 1px solid}
방법을 아시겠죠?
이렇게 모두 하나씩 추가하면 아래와 같이 됩니다.
#guestList ol,.comlist ol {list-style:none; padding:0px}
#guestList ol li,.comlist ol li {margin-top:20px; border-bottom:#CCCCCC 1px solid}
#guestList ol li .name,.comlist ol li .name {font:12pt verdana,Gulim; color:#91B3E3; font-weight:bold}
#guestList ol li .name a,.comlist ol li .name a {text-decoration:none; color:#91B3E3}
#guestList ol li .name a:hover,.comlist ol li .name a:hover {text-decoration:underline}
#guestList ol li .name img,.comlist ol li .name img {float:left; width:36px; height:36px; padding:0px 5px}
#guestList ol li .control,.comlist ol li .control {font:7pt tahoma}
#guestList ol li .control a,.comlist ol li .control a {color:#888888}
#guestList ol li .date,.comlist ol li .date {padding-left:2px; font:8pt Trebuchet MS; color:#AAAAAA}
#guestList ol li .guest_general p,.comlist ol li .rp_general p {padding:0px 10px; font:9pt verdana,Dotum; color:#555555; line-height:18px; text-align:justify}
#guestList ol li .guest_admin p,.comlist ol li .rp_admin p {padding:0px 10px; font:9pt verdana,Dotum; color:#555555; line-height:18px; text-align:justify}
#guestList ol li .guest_secret p,.comlist ol li .rp_secret p {padding:0px 10px; font:9pt Batang; color:#888888; line-height:18px; text-align:justify}
#guestList ol li .hiddenComment p,.comlist ol li .hiddenComment p {padding:0px 10px; font:9pt Batang; color:#888888; line-height:18px; text-align:justify}
#guestList ol li ul,.comlist ol li ul {list-style:none; padding:0px 0px 0px 40px}
#guestList ol li ul li,.comlist ol li ul li {border-bottom:0px; margin-bottom:10px}
#guestList ol li ul li .name img,.comlist ol li ul li .name img {clear:both; width:20px; height:20px}
.comlist 이하의 부분이 방명록과 다른 곳은 진하게 표시한 부분인데,
티스토리에서 자동으로 생성되는 '글 종류에 따른 클래스' 입니다.
hiddenComment(로그아웃했을 때 비밀글 대신 표시되는 글)는 댓글과 방명록의 클래스가 동일합니다.
댓글 쓰기
skin.html에서 댓글 읽기 부분이 끝나는
</s_rp_container> 아래에 다음 소스를 입력합니다.
<!-- 댓글 쓰기 -->
<s_rp_input_form>
<div class="comwrite">
<div class="writeinfo">
<s_rp_member>
<s_rp_guest>
<label for="[샵샵_article_rep_id_샵샵]name">name : </label><input type="text" id="[샵샵_article_rep_id_샵샵]name" name="[샵샵_rp_input_name_샵샵]" value="[샵샵_guest_name_샵샵]" class="rpname" />
<label for="[샵샵_article_rep_id_샵샵]pass">pass : </label><input type="password" id="[샵샵_article_rep_id_샵샵]pass" maxlength="8" name="[샵샵_rp_input_password_샵샵]" value="[샵샵_guest_password_샵샵]" class="rppass" />
<label for="[샵샵_article_rep_id_샵샵]home">home : </label><input type="text" id="[샵샵_article_rep_id_샵샵]home" name="[샵샵_rp_input_homepage_샵샵]" value="[샵샵_guest_homepage_샵샵]" class="rphome"/>
</s_rp_guest>
</s_rp_member>
<label for="[샵샵_article_rep_id_샵샵]secret">secret : </label><input type="checkbox" id="[샵샵_article_rep_id_샵샵]secret" name="secret" class="checkbox" />
</div>
<textarea name="[샵샵_rp_input_comment_샵샵]"></textarea>
<div class="writeok">
<input type="submit" value="OK" onclick="[샵샵_rp_onclick_submit_샵샵]" />
</div>
</div>
</s_rp_input_form>
style.css에서 #guestWrite를 찾아 그 아랫줄부터 다음과 같이 바꿔줍니다.
#guestWrite .writeinfo,.comwrite .writeinfo {margin-bottom:5px}
#guestWrite .writeinfo label,.comwrite .writeinfo label {padding-left:5px; cursor:pointer; font:7pt tahoma; color:#555555}
#guestWrite .writeinfo input,.comwrite .writeinfo input {border:0px; color:#333333}
#guestWrite .writeinfo #name, #guestWrite .writeinfo #pass,.comwrite .writeinfo .rpname, .comwrite .writeinfo .rppass {width:100px; height:13px; padding:2px; font:8pt Gulim; background-color:#E1EBF9}
#guestWrite .writeinfo #home,.comwrite .writeinfo .rphome {width:142px; height:13px; padding:2px; font:7pt tahoma; background-color:#E1EBF9}
#guestWrite .writeinfo #secret,.comwrite .writeinfo .checkbox {vertical-align:middle}
#guestWrite textarea,.comwrite textarea {width:545px; height:100px; border:#AAAAAA 1px solid; padding:5px; font:9pt Dotum; color:#555555; margin-bottom:10px}
#guestWrite .writeok,.comwrite .writeok {text-align:right}
#guestWrite .writeok input,.comwrite .writeok input {border:0px; width:50px; height:40px; background-color:#E1EBF9; font:8pt verdana; color:#333333}
댓글도 방명록 처럼 쓰기 부분을 상단에 위치시키고 싶다면 skin.html에서 위치만 바꾸면 됩니다. ^^
게시물에 관한 질문은 댓글로 해주세요. ^^