티스토리 관리/티스토리 스킨 만들기/
티스토리 스킨 만들기 #16 댓글 (2) 리스트
2020. 3. 11.
댓글 리스트
댓글이 작성되었다면 댓글을 리스트업 시켜야 확인할수있다.
오늘은 댓글 리스트부분에 대해 작업해보자
치환자
댓글 리스트도 쓰기폼과 마찬가지로 일전에 했던 방명록리스트와 유사하다.
2020/03/05 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #11 방명록 (2) 리스트
티스토리 스킨 만들기 #11 방명록 (2) 리스트
방명록 리스트 방명록을 남겨주는 사람이 있다면 리스트도 확인할 수 있어야 한다. 티스토리 방명록은 1차댓글까지 남길수있도록 되어있어 최초 방명록과 그에대한 댓글도 구분감이 있어야한다. 치환자는 동일하지..
shalchoong.tistory.com
우선 치환자에 대해 알아보자
<s_rp_container> 댓글 리스트 출력 그룹치환자
<s_rp_rep> 댓글 리스트 반복 그룹치환자
<s_rp2_container> 대댓글 리스트 출력 그룹치환자
<s_rp2_rep> 대댓글 리스트 반복 그룹치환자
댓글 고유 id 값치환자
댓글 종류에 대한 class 값치환자
작성자 값치환자
작성시간 값치환자
댓글내용 값치환자
댓글 수정/삭제 온클릭 이벤트 값치환자
대댓글 달기 이벤트 값치환자
html 작성
<article>
<!-- 글목록 리스트형 -->
<s_article_rep>
<!-- 글목록 내용형-->
<s_permalink_article_rep>
<!-- 글 본문 -->
<!-- 카테고리내 다른 글-->
<s_rp>
<div id='comment'>
<h1 class='rp-title'>Comment</h1>
<!-- 댓글 쓰기 폼-->
<s_rp_container>
<div class='comment-list'>
<ul>
<s_rp_rep>
<li id='' class=''>
<div class='thumb'>
</div>
<div class='comment-content'>
<ul class='comment-content-info'>
<li class='name'>
</li>
<li class='date'>
</li>
</ul>
<p class='comment-content-text'></p>
<ul class='comment-content-control'>
<li class='modify'>
<a href='#' onclick=''><i
class="icon-cog"></i> 수정 / 삭제</a>
</li>
<li class='reply'>
<a href='#' onclick=''><i
class="icon-reply"></i> 댓글쓰기</a>
</li>
</ul>
</div>
<s_rp2_container>
<s_rp2_rep>
<li id='' class=' re-comment'>
<div class='thumb'>
</div>
<div class='comment-content'>
<ul class='comment-content-info'>
<li class='name'>
</li>
<li class='date'>
</li>
</ul>
<p class='comment-content-text'></p>
<ul class='comment-content-control'>
<li class='modify'>
<a href='#' onclick=''><i
class="icon-cog"></i> 수정 / 삭제</a>
</li>
</ul>
</div>
</li>
</s_rp2_rep>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</article>
설명은 그림으로
css 작성
#comment .comment-list {
padding: 20px;
padding-top: 0;
background: #fff;
}
#comment .comment-list > ul {
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
#comment .comment-list li {
box-sizing: border-box;
list-style: none;
border-top: 1px solid #ddd;
padding: 15px;
padding-bottom: 5px;
}
#comment .comment-list li:after {
display: block;
clear: both;
content: '';
}
#comment .thumb {
float: left;
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 40%;
background-image: url('https://i1.daumcdn.net/thumb/C50x50/?fname=https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_00.png');
}
#comment .rp_secret .thumb {
background-image: url('https://i1.daumcdn.net/thumb/C50x50/?fname=https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png');
}
#comment .comment-content {
float: right;
width: calc(100% - 62px);
position: relative;
}
#comment .comment-content li {
border: 0;
padding: 0;
}
#comment .comment-content-info {
float: left;
}
#comment .comment-content-info li {
display: inline-block;
}
#comment .comment-content-info .name {
font-size: 1.25rem;
color: #666;
}
#comment .comment-content-info .name img {
width: 50px;
height: 50px;
border-radius: 40%;
position: absolute;
left: -62px;
}
#comment .comment-content-info .date {
font-size: 0.875rem;
color: #aaa;
}
#comment .comment-content-info .date a {
font-size: 1rem;
color: #ff5555;
}
#comment .comment-content-text {
clear: both;
padding: 10px 0 0;
text-indent: 10px;
}
#comment .comment-content-control {
float: right;
}
#comment .comment-content-control li {
display: inline-block;
}
#comment .comment-content-control .link {
font-size: 1rem;
color: #eee;
margin-right: 10px;
display: none;
}
#comment .comment-content-control .modify {
font-size: 1rem;
color: #ff5555;
margin-right: 10px;
}
#comment .comment-content-control .reply {
font-size: 1rem;
color: #ff9999;
margin-right: 10px;
}
#comment .comment-list .re-comment {
margin-left: 10%;
}
#comment .comment-list a {
text-decoration: none;
}
#comment .comment-list a:hover {
text-decoration: underline;
}
#comment .comment-list .rp_admin .name a {
color: #d09aec;
}
#comment .comment-list .rp_secret p {
color: #ddd
}