Section 11-7 - 티스토리 반응형 스킨 만들기 - 댓글 목록

지난 섹션 11-6 에서는 댓글 입력 폼에 대해서 다뤘는데 이번 섹션에서는 입력 된 댓글을 출력하는 치환자를 다룹니다.
입력을 했는데 댓글이 출력이 안되면 곤란하겠죠?ㅎㅎ

댓글은 기본적으로 처음 작성된 댓글 목록과 해당 댓글에 다시 또 댓글을 다는 두가지 유형이 있습니다.
흔히 말하는 댓글과 대댓글에 대한 목록을 출력하는 것입니다.

바로 들어갑니다.

STEP 1. skin.html 댓글 영역 지정

                    
                    

                        
 Comments
                        
                    

• 댓글 입력 폼 위에 위와 같이 소스를 추가합니다.
• <s_rp_container></s_rp_container> : 댓글이 출력 되는 영역 지정
• <s_rp_rep></s_rp_rep> : 댓글이 반복해서 출력 되는 영역 지정
• : 전체 코멘트영역을 가리키는 아이디 - (최신 댓글을 클릭했을때 이 위치로 이동)
• : 비밀글, 관리자, 일반글에 따른 클래스명 지정
1. 비밀글 : secret
2. 관리자 : rp_admin
3. 일반글 : rp_general
• .reply-li 클래스의 <li></li> 안에 댓글들을 출력합니다.

STEP 2. skin.html 댓글 목록 요소 입력

댓글 목록 구조

• : 댓글 작성자의 프로필 이미지
• 썸네일 이미지 경로에 사용 : <img src="//i1.daumcdn.net/thumb/C96x96/?fname=">
• 프로필 이미지가 없다면 카카오 친구들의 얼굴이 나옵니다.
• : 댓글 작성자 이름 (티스토리 사용자는 프로필 조회가 가능)
• : 댓글이 작성된 일시
• : 댓글 내용
• : 댓글 주소
• : 댓글 수정/삭제 온클릭 이벤트
• : 댓글에 댓글 달기(일명 대댓글) 온클릭 이벤트

STEP 3. style.css 댓글 코드 추가

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

• Reply Form 소스위에 Reply list 스타일을 넣습니다.(구조상 댓글 목록이 나오고 댓글 폼이 나오기 때문에 소스도 순서를 맞춰줍니다.)

위와 같이 소스를 추가하면 아래와 같은 댓글 목록 결과가 나옵니다.

댓글 목록 결과

STEP 4. skin.html 댓글에 댓글 영역 지정

• <s_rp2_container>, </s_rp2_container> : 댓글에 댓글이 출력되는 영역 지정
• <s_rp2_rep>, </s_rp2_rep> : 댓글에 댓글이 반복해서 출력되는 영역 지정
• <s_rp2_container>는 </s_rp_rep> 위에 댓글 리스트가 끝나고 난 다음에 따로 넣어야 순차적으로 출력됩니다.(자세한건 소스 참고)

STEP 5. skin.html 댓글에 댓글 요소 입력

• 댓글에 댓글은 "댓글 목록"의 소스를 그대로 차용합니다. 
• <li>의 클래스가 re-reply이 추가됩니다.(댓글에 댓글이라는 것을 명시하기 위해 클래스명을 추가합니다.)
• 댓글에 댓글은 "댓글쓰기" 버튼을 삭제합니다.

STEP 6. 댓글에 댓글 출력 확인

댓글의 댓글 목록 중간 결과

위와 같이 댓글에 댓글이 출력되지만 부모 댓글과 별차이가 안느껴지기 때문에 아래와 같이 style을 추가합니다.
추가할 때는 미리 추가한 re-reply 클래스를 이용하면 됩니다.

STEP 7. style.css 댓글에 댓글 스타일 추가

/* RE Reply list */
.reply-list li.re-reply {width:90%; margin-left:10%; border-top:1px solid #f5f5f5}

• 댓글에 댓글이면 부모 댓글 아래로 보이게 하기 위하여 왼쪽 여백 지정했습니다.

STEP 8. 결과 확인

댓글 목록 최종 결과