New post
New Comment
Trackback
New Trackback
Link
Date2009/12/01 23:03
, , , , , , ,

티스토리 스킨 만들기 (초보) - 11강. 방명록

이번 강에서는 방명록을 출력해 볼 텐데요, 조금 어려우리라 예상됩니다.

급히 대강 훑어보지 마시고, 시간적 여유를 두고 천천히 보시는 게 좋겠습니다.
먼저 완성된 모습부터 볼게요. 아래 이미지를 클릭하세요.

방명록은 나중에 댓글에 똑같이 재활용(?)할 수 있으니 조금 복잡하더라도 힘내서 완성해보아요.


먼저 아래의 소스를 skin.html에 삽입합니다.
어디에 삽입하는지는 다들 아시죠? 잘 모르시면 10강 때 작성 했던 태그로그가 끝나는 </s_tag> 아랫줄에 삽입하시면 됩니다.
<!-- 방명록 -->
<s_guest>


</s_guest>

<s_guest>와 </s_guest>의 사이에 방명록 글쓰기기와 목록이 들어가게 됩니다.
글쓰기 부분부터 만들어 봅시다.

* 방명록 글쓰기


먼저 skin.html에서 <s_guest>의 아랫줄에 다음 소스를 입력합니다.
<!-- 방명록 쓰기 -->
<s_guest_input_form>
<div id="guestWrite">
<div class="writeinfo">
<s_guest_member>
<s_guest_form>
<label for="name">name : </label><input type="text" id="name" name="[샵샵_guest_input_name_샵샵]" value="[샵샵_guest_name_샵샵]" />
<label for="pass">pass : </label><input type="password" id="pass" maxlength="8" name="[샵샵_guest_input_password_샵샵]" value="[샵샵_guest_password_샵샵]" />
<label for="home">home : </label><input type="text" id="home" name="[샵샵_guest_input_homepage_샵샵]" value="[샵샵_guest_homepage_샵샵]" />
</s_guest_form>
</s_guest_member>
<label for="secret">secret : </label><input type="checkbox" id="secret" name="secret" class="checkbox" />
</div>
<textarea name="[샵샵_guest_textarea_body_샵샵]"></textarea>
<div class="writeok">
<input type="submit" value="OK" onclick="[샵샵_guest_onclick_submit_샵샵]" />
</div>
</div>
</s_guest_input_form>

진한 글씨의 label 태그에 대해 알려드릴게요.
<label>과 </label>사이의 텍스트나 이미지를 클릭했을 때 input 영역이 선택되는 태그입니다.
아래의 예제를 보시면 이해가 쉬울 거예요.
      <label for="click">1. Click</label> <input type="checkbox" id="click" />
      <label for="click2" style="cursor:pointer">2. Click</label> <input type="checkbox" id="click2" />
      <label style="cursor:pointer">3. Click <input type="checkbox" /></label>
각각의 번호를 클릭해보세요.
이처럼 input id와 라벨을 연동하여, 라벨을 클릭했을 때 해당 input이 선택되도록 할 수 있습니다.
2,3번 처럼 스타일시트를 적용해서 커서를 바꿀 수도 있구요.
3번 태그는 좀 더 간단하죠? 그러나 스크린 리더기에서는 못 읽는다고 하니 1,2번을 더 추천합니다.

이제 style.css에 아래 내용을 입력합니다.
#guestWrite {margin:12px}
#guestWrite .writeinfo {margin-bottom:5px}
#guestWrite .writeinfo label {padding-left:5px; cursor:pointer; font:7pt tahoma; color:#555555}
#guestWrite .writeinfo input {border:0px; color:#333333}
#guestWrite .writeinfo #name, #guestWrite .writeinfo #pass {width:100px; height:13px; padding:2px; font:8pt Gulim; background-color:#E1EBF9}
#guestWrite .writeinfo #home {width:142px; height:13px; padding:2px; font:7pt tahoma; background-color:#E1EBF9}
#guestWrite .writeinfo #secret {vertical-align:middle}
#guestWrite textarea {width:545px; height:100px; border:#AAAAAA 1px solid; padding:5px; font:9pt Dotum; color:#555555; margin-bottom:10px}
#guestWrite .writeok {text-align:right}
#guestWrite .writeok input {border:0px; width:50px; height:40px; background-color:#E1EBF9; font:8pt verdana; color:#333333}

모든 label에 cursor:pointer를 적용한 것, 아시겠지요?

vertical-align은 상하 정렬인데요, 비밀글 체크박스를 중앙(middle)에 오게 하기 위해 넣었습니다.
http://ilmol.com/wp/css/css_dictionary/layout-display/ 에 가셔서 스크롤을 내리다 보면 중간에 vertical-align에 관한 친절한 정보가 있습니다.


좀 더 복잡한 목록 부분을 만들 차례입니다.

*방명록 목록


skin.html에서 방명록 쓰기 부분이 끝나는 </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="control"> 
<a href="#" title="수정/삭제" onclick="[샵샵_guest_rep_onclick_delete_샵샵]">Modify/Delete</a> 
<a href="#" title="답변" onclick="[샵샵_guest_rep_onclick_reply_샵샵]">Reply</a> 
</span><br />
<span class="date"> [샵샵_guest_rep_date_샵샵]</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="#" title="수정/삭제" onclick="[샵샵_guest_rep_onclick_delete_샵샵]">Modify/Delete</a>
</span>
<p>[샵샵_guest_rep_desc_샵샵]</p>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ol>
</div>
</s_guest_container>

진하게 표시해 둔 [샵샵_guest_rep_class_샵샵] 치환자를 주목할 필요가 있습니다.
일반 글과 비밀글, 관리자가 쓴 글 등의 클래스를 나누어 구분하게 하는 치환자입니다.
배경그림이나 글씨 색 등으로 효과를 줄 수 있겠지요. 스타일시트에서 더 자세히 살펴봅시다.

style.css에 아래 내용을 입력합니다.
#guestList {margin:12px}
#guestList ol {list-style:none; padding:0px}
#guestList ol li {margin-top:20px; border-bottom:#CCCCCC 1px solid}
#guestList ol li .name {font:12pt verdana,Gulim; color:#91B3E3; font-weight:bold}
#guestList ol li .name a {text-decoration:none; color:#91B3E3}
#guestList ol li .name a:hover {text-decoration:underline}
#guestList ol li .name img {float:left; width:36px; height:36px; padding:0px 5px}
#guestList ol li .control {font:7pt tahoma}
#guestList ol li .control a {color:#888888}
#guestList ol li .date {padding-left:2px; font:8pt Trebuchet MS; color:#AAAAAA}
#guestList ol li .guest_general p {padding:0px 10px; font:9pt verdana,Dotum; color:#555555; line-height:18px; text-align:justify}
#guestList ol li .guest_admin p {padding:0px 10px; font:9pt verdana,Dotum; color:#555555; line-height:18px; text-align:justify}
#guestList ol li .guest_secret p {padding:0px 10px; font:9pt Batang; color:#888888; line-height:18px; text-align:justify}
#guestList ol li .hiddenComment p {padding:0px 10px; font:9pt Batang; color:#888888; line-height:18px; text-align:justify}
#guestList ol li ul {list-style:none; padding:0px 0px 0px 40px}
#guestList ol li ul li {border-bottom:0px; margin-bottom:10px}
#guestList ol li ul li .name img {clear:both; width:20px; height:20px}
일곱번째 줄에 이미지의 사이즈를 고정하고 float:left로 왼쪽에 위치하게 한 것 보이시나요?
현재 제 블로그에는 float:right로 오른쪽에 위치하도록 했지요.
더 업그레이드 된 내용은 중급자를 위한 팁으로 포스팅하겠습니다.

아래에서 두번째 줄 #guestList ol li ul li 에 border-bottom:0px를 해 준 이유는
위에서 세번째 줄인 #guestList ol li 에 border-bottom 값을 주었기 때문입니다.
#guestList ol li 의 속성은 #guestList ol 안에 있는 모든 li 태그에 해당됩니다.
따라서 #guestList ol li ul li 에 border-bottom이 적용되기를 원치 않으면 none이나 0px로 속성을 무효화 할 필요가 있는 것입니다.
맨 아랫줄의 #guestList ol li ul li .name img 에 clear:both를 해 준 것도 같은 이유에서입니다.
일곱번째 줄의 #guestList ol li .name img 에서 float:left를 입력하였기 때문에
#guestList ol li ul li .name img에서 float:left를 무효화하기 위해 clear:both를 입력한 것입니다.

글 종류에 따른 클래스는 다음과 같습니다.
guest_general : 일반 글
guest_admin : 관리자가 쓴 글
guest_secret : 비밀 글
hiddenComment : 로그아웃했을 때 비밀글 대신 표시되는 글
여러분의 취향대로 글꼴이나 글씨 색깔, 배경 등을 각각 다르게 꾸며보세요.


이로써 방명록이 완성되었습니다.
웹에 올려 미리 보면서 몇 번씩 차근차근 소스를 분석해보시면 어느 순간 착착 머릿속에서 정리되는 걸 느끼실 거예요.

다음 시간에는 검색결과(글 목록)와 페이지 출력 부분을 만들어보도록 하겠습니다.


게시물에 관한 질문은 댓글로 해주세요. ^^
여기는 저의 개인 블로그입니다.
티스토리 스킨에 관한 질문은 티스토리 스킨 포럼에서,
티스토리에 관한 질문은 티스토리 고객센터나 티스토리 가이드 블로그 HELP메뉴에서,
웹디자인이나 웹코딩 관련 질문은 네이버 지식인이나 수 많은 웹 관련 카페에서 하실 수 있습니다.

[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 1강. 스킨의 기본, 스킨 구상
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글

 중급자를 위한 티스토리 스킨 수정 팁 보러가기
TRACKBACK 0   COMMENT 25

  1. BlogIcon 퐈비오 Edit/DelReply
    우왕 따끈한 포스팅
    그레이스님 정말 잘 보고 있습니다
    요즘 친구놈이랑 팀블로그를 하게되어서 스킨을 만지작 거리고 있었는데
    실력이 좋지 않아 그레이스님 강좌 보면서 따라하다보니 만드신 샘플이랑 비슷하게 만들어져 가네요 ㅎㅎ
    나중에 다 완성되면 놀러와 주세요 ㅎ ^^
    2009/12/01 23:10
    • 2009/12/01 23:20
      친구랑 팀블로그라니, 재밌겠어요. ㅋㅋㅋ
      완성되면 주소 꼭 알려주세요. ^^
  2. BlogIcon MoreCreative Edit/DelReply
    또 들렀어요!
    며칠동안 그레이스님 블로그가 안들어가져서 주소를 옮기셨나 생각했었는데;
    왜그랬던 걸까요? ㅎ

    오늘도 강의 잘 보고 갑니다.;

    ps. 스킨 컨버팅이 제작보다 쉽다고 하던데, 컨버팅하는건 어떻게 하는걸까요? ^^;
    2009/12/01 23:31
    • 2009/12/02 00:21
      네. 이제 접속 안 되는 일 없을 겁니당.
      제 실수였어요.. ㅠ_ㅠ
      컨버팅은 카피하는 거니까 직접 디자인하는 것보다 당연히 쉽겠죠? ㅎㅎ
      남이 해 놓은 디자인을 카피하는 거니까 디자인 과정 없이 코딩만 하는 거라고 생각하면 될 듯..
  3. BlogIcon duval Edit/DelReply
    정말 알찬 강의네요.
    저는 .... 그레이스님 강의보고 첨부터 다시 갈아엎어야겠어요.
    여기서 조금 저기서 조금 그렇게 쏘스들을 갖다붙였더니....엉망이되고 만것 같아요. ㅜㅜ
    2009/12/02 16:53
    • 2009/12/03 12:39
      새로 만드신 스킨 깔끔하고 보기 좋아요~
  4. BlogIcon 花自開 Edit/DelReply
    매번 꼬박꼬박 열심히 잘 보고있어요~

    차근차근 분석해가면서 하다보니 어느새 큰틀은 잡혔네요 ㅋㅋㅋ

    뿌듯함..~ 고마워요!!ㅋㅋ

    이번강의 소스 붙여놓고 나서 name이랑 pass가 안보여서 난 왜 안보일까 막 막 고민했었는데..

    이미 로그인해 있어서 안보였던거군요!!ㅋㅋㅋ
    <s_guest_member>

    이게 뭔가 한참 찾았었어요. 요놈만 지우면 다 보였는데..ㅋㅋ 쟤가 뭐 로그인정보 업어오는 앤가보네요.

    그리고.. 이번강의 오타발견이요~ㅎ
    --------------------------------------------------
    진한 글씨의 label 태그에 대해 알려드릴게요.
    <label>과 </labe>사이의 텍스트나 이미지를 클릭했을 때 input 영역이 선택되는 태그입니다.
    아래의 예제를 보시면 이해가 쉬울 거예요.
    --------------------------------------------------

    </labe> 앗 요기에 'l'이없네요!ㅎㅎㅎ
    2009/12/02 19:14
    • 2009/12/03 12:40
      오타 수정했어요. 감사합니다. ^^
      스킨 제작중이신가봐요. 완성된 모습이 기대됩니당.
  5. BlogIcon 큄맹 Edit/DelReply
    매번 올때마다 느끼는거지만..

    정말 스킨 하나는 끝내주게 잘만드세요 ㅎㅎ

    저는 상단 이미지만 계속 바꾸는 허접한짓을 하는데 ㅎㅎ
    2009/12/03 00:19
  6. BlogIcon 용의자 Edit/DelReply
    이제 열리네요~~
    body id관련 게시물에 링크 걸려고 얼마전에 찾아 왔었는데
    블로그거 안 열리더라구요..-_ㅠ
    언제나 고생하십니당..ㅋㅋ
    2009/12/03 01:50
    • 2009/12/03 12:43
      네.ㅠ_ㅜ 도메인이 완료된 걸 며칠동안 모르고 있던 바보같은 1人..
      죄송해염. 이제 그런 일 없을거예요. ^^
  7. BlogIcon 드자이너김군 Edit/DelReply
    저도 방명록을 멋지게 만들고 싶어욧! 근대.. 전 왜 코드만 보면 머리가 아파오죠..ㅠㅠ
    2009/12/08 11:36
    • 2009/12/09 03:02
      ㅋㅋ 그래도 익숙해지면 재미있답니다. ^^
  8. BlogIcon popeye Edit/DelReply
    새벽인데 잠이 안 와서, 복습하고 갑니다^^
    고마와요.
    2009/12/11 04:51
  9. BlogIcon duval Edit/DelReply
    안녕하세요 질문이 생겨서 돌아왔어요.
    저기 방명록 쓰기 css에 보면 밑에서 세번째 .writesecret이라는 클래스가 있잖아요
    #guestWrite .writesecret label {cursor:pointer; font:8pt tahoma; color:#555555}
    이렇게요.

    그런데 html에는 .writesecret이 없는것 같아요.
    체크박스에 div로 둘러줘야하는건가요?
    2009/12/11 10:10
    • 2009/12/11 16:42
      하마터면 모르고 지나갈 뻔 했네요. 감사합니다. :)
      css에서 그 한 줄을 실수로 넣었네요.
      저도 수정했어요.

      #guestWrite .writesecret label {cursor:pointer; font:8pt tahoma; color:#555555}
      이 한 줄 삭제하시면 돼요.
  10. 히간 Edit/DelReply
    아 너무 어렵다 ㅠㅠ

    차근차근따라하니 재밋으면서도 어렵기도 하고 막 그르네요 ㅋ
    2009/12/15 22:29
    히간
    • 2009/12/16 03:34
      쉽기만 한 일은 세상에 없는 것 같아요. ㅎㅎ
  11. BlogIcon 희품 Edit/DelReply
    꾸준하지 못하게 1주일만에 공부하러 왔습니다. 음 열심히 배워야되는데..


    #guestWrite textarea {width:545px; height:100px; border:#AAAAAA 1px solid; padding:5px; font:9pt Dotum; color:#555555; margin-bottom:10px}

    정확히 이부분에서 문제발생해서,
    실험결과

    글입력상자 가로로 추정되는 크기 width:545 에서 wdith의수치가 544까진 괜찮은데, 545가 되는순간
    http://cfile219.uf.daum.net/original/2064921C4B66B79886087C 요렇게되고

    544가
    http://cfile236.uf.daum.net/original/1164921C4B66B79887FC21 요렇게 정상으로 되네요.

    어쨌든 문제해결은 했는데,
    저만 이런건가요?
    2010/02/01 20:17
    • 2010/02/05 10:34
      익스6의 오류입니다. 조만간 포스팅할게요.
  12. Edit/DelReply
    비밀댓글 입니다
    2010/02/04 23:47
  13. BlogIcon JLIFE Edit/DelReply
    10강까지 줄기차게 달렸네요. 휴우... 8강에선 진짜 아찔했습니다.^^; 사이드바들이 여기저기로 막 튀어 다니고 ^^;; 14강 까지 모두 끝나고 이미지 입히는 방법도 혹시 강좌 올려주시나요?
    2010/04/11 04:41
1 ... 11 12 13 14 15 16 17 18 19 ... 113