Section 14-3 - 티스토리 반응형 스킨 만들기 - 방명록 목록

지난 섹션에서는 "방명록 글쓰기 폼"을 만들었습니다.
입력 폼을 만들었으니 이번에는 입력된 방명록들을 출력해야 합니다.
출력은 글 댓글 목록과 동일하게 출력 되도록 하는데 차이점은 글 댓글에 있던 "댓글 주소"는 방명록 목록에서는 출력하지 않습니다.
이런 차이점을 염두하시고 아래와 같이 작업하면 "방명록 목록" 코드 작업을 수월하게 진행하실 수 있습니다.

그럼 바로 코드 들어갑니다.

STEP 1. skin.html 방명록 목록 코드 추가

skin.html 방명록 목록 코드

1

• <s_guest_container></s_guest_container> : 등록된 "방명록" 리스트를 출력할 영역 지정 
• <s_guest_rep></s_guest_rep> : "방명록" 리스트의 반복되어 출력되는 영역 지정 
• <s_guest_reply_container></s_guest_reply_container> : "방명록"의 댓글(대댓글) 리스트를 출력할 영역 지정 
• <s_guest_reply_rep></s_guest_reply_rep> : "방명록"의 댓글 리스트의 반복되어 출력되는 영역 지정 
• : 방명록의 고유 ID
• : 방명록의 글의 목록에 반복되는 스타일
• : 글쓴사람 이름
• : 글쓴 날짜
• : 글 내용
• : 답글 수정/삭제 온클릭 이벤트 
• : "방명록"의 댓글 쓰기 온클릭 이벤트

방명록 목록 코드 구조

• 방명록 글쓰기 입력 폼 아래에 <s_guest_container>안의 코드를 넣으시면 됩니다.

• 는 방명록 성격에 따라 클래스가 부여됩니다.

1. 일반 방명록 클래스 : guest_general
2. 비밀 방명록 클래스 : guest_secret
3. 관리자 방명록 클래스 : guest_admin
• <s_guest_reply_container>는 방명록의 댓글을 출력하는 영역이므로 기본 방명록 <li>안의 코드가 똑같이 넣으시면 됩니다.
  다만 방명록의 댓글은 댓글을 달 수 없게 "댓글쓰기"의 버튼 코드는 삭제합니다.
• 프로필 이미지(.img-profile)는 기본 손님 이미지를 넣으시면 됩니다.(저는 튜브가 좋아서 튜브를 넣었습니다.)
  ※ 차후 프로필 이미지를 티스토리 아이콘 이미지로 대체하는건 티스토리 스킨 작업 팁에서 따로 다루겠습니다.

STEP 2. style.css 방명록 목록 스타일 추가

style.css 방명록 목록 스타일

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/* Guestbook list */ .guestbook-list {margin-bottom:30px; list-style:none; border-bottom:1px solid #e9e9e9} .guestbook-list li {padding:20px 0; border-top:1px solid #e9e9e9} .guestbook-list li:after {display:block; clear:both; content:''} .guestbook-list li .thumb {float:left; width:10%; text-align:center} .guestbook-list li .thumb img {border-radius: 50%;} .guestbook-list li .guestbook-content {float:right; width:90%} .guestbook-list li .guestbook-content:after {display:block; clear:both; content:''} .guestbook-list li .guestbook-content ul {} .guestbook-list li .guestbook-content ul li {border:0; padding:0} .guestbook-list li .guestbook-content .info {float:left;} .guestbook-list li .guestbook-content .info li {display:inline-block} .guestbook-list li .guestbook-content .info li.date {font-size:0.75em; color:#bbb} .guestbook-list li .guestbook-content .control {float:right} .guestbook-list li .guestbook-content .control li {display:inline-block; margin-right:10px} .guestbook-list li .guestbook-content .control li a {color:#ff8149; font:normal 0.75em 'NanumBarunGothic', 'Noto Sans', sans-serif;} .guestbook-list li .guestbook-content .control li a .fa {color:#ff8149;} .guestbook-list li .guestbook-content .control li a.reply-modify, .guestbook-list li .guestbook-content .control li a.reply-modify .fa {color:#ed145b} .guestbook-list li .guestbook-content .text {clear:both; padding:10px 0 0; color:#777; font:normal 0.875em 'NanumBarunGothic', 'Noto Sans', sans-serif; line-height:1.5em} /* @ 비밀글 */ .guestbook-list li.guest_secret .guestbook-content .text {color:#999} /* @ 일반 */   .guestbook-list li.guest_general {} /* @ 관리자 */ .guestbook-list li.guest_admin .guestbook-content .nickname a {color:#ff8149} /* RE Guestbook list */ .guestbook-list li.re-guestbook {width:90%; margin-left:10%; border-top:1px solid #f5f5f5}

• 지난 섹션에서 입력했던 Guestbook form 스타일 아래에 추가합니다.

STEP 3. 방명록 목록 결과 확인

방명록 목록 결과 확인