WebProgram/Tistory
[ Tistory ] Bootstrap 및 CSS를 이용한 댓글 설정 및 사용자 아이콘 처리
Total Fix!
2016. 3. 27. 01:57
일부분의 특성을 Bootstrap을 이용하기 때문에 Bootstrap이 필수이다.
아이콘은 Font Awesome을 이용하였습니다.
만일 Bootstrap과 Font Awesome을 이미 사용중이라면 해당 내용을 그대로 바꾸어도 사용이 가능 할 것이다.
특징
우선 사용자 아이콘처리를 스크립트를 이용하지 않고 변경하였다.
파비콘이 설정되어 있더라도 파비콘은 숨긴다.
아이콘 설정이 안된 회원이나 비회원으로 글 작성시 비회원용 아이콘이 출력된다.
댓글 주소 버튼을 클릭시 주소가 나타나도록 스크립트를 이용하여 처리하였다. (댓글 펼치기 설정이 되어 있어야 합니다.)
아이콘 설정 방법
댓글에 아이콘을 설정하기 위해서는 플러그인에서 설정을 하여야 합니다.
HTML 처리 부분
중간에 <script>document.write(location.host)</script> 부분 2곳은 블로그 펼침 설정이 되어 있어야 작동합니다.
<s_rp>
<div class="comment">
<h3>Comments</h3>
<div class="commentList">
<s_rp_container>
<s_rp_rep>
<div id='' class="well">
<div class=" media">
<div class="media-left">
<img src="./images/Guest_04.jpg" class="guest-icon">
<span class="user-icon"></span>
</div>
<div class="media-body">
<h4 class="margin-t-0 name"></h4>
<p><span class="date"></span></p>
<p class="comments-article"></p>
<p class='commentBtn'>
<button class="btn-address btn btn-sm btn-default"><i class="fa fa-link"></i> 댓글주소</button>
<a href="#" onclick="" class="modify btn btn-sm btn-default">
<i class="fa fa-pencil-square"></i> 수정/삭제
</a>
<a href="#" onclick="" class="write btn btn-sm btn-default">
<i class="fa fa-comments"></i> 댓글쓰기
</a>
</p>
<p class="rp-address"><i class="fa fa-link"></i> http://<script>document.write(location.host)</script></p>
</div>
</div>
<s_rp2_container>
<s_rp2_rep>
<div id='' class="well">
<div class=" media">
<div class="media-left">
<img src="./images/Guest_04.jpg" class="guest-icon">
<span class="user-icon"></span>
</div>
<div class="media-body">
<h4 class="margin-t-0 name"></h4>
<p><span class="date"></span></p>
<p class="comments-article"></p>
<p class='commentBtn'>
<button class="btn-address btn btn-sm btn-default" ><i class="fa fa-link"></i> 댓글주소</button>
<a href="#" onclick="" class="modify btn btn-sm btn-default">
<i class="fa fa-pencil-square"></i> 수정/삭제
</a>
</p>
<p class="rp-address"><i class="fa fa-link"></i> http://<script>document.write(location.host)</script></p>
</div>
</div>
</div>
</s_rp2_rep>
</s_rp2_container>
</div>
</s_rp_rep>
</s_rp_container>
</div>
<s_rp_input_form>
<div class="commentWrite well">
<s_rp_member>
<s_rp_guest>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="" class="form-control input-sm" id="contactName" placeholder="이름 또는 별명을 넣으세요."/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" maxlength="8" name="" class="form-control input-sm" id="contactEmail" placeholder="비밀번호를 넣고 잊지 마세요."/>
</div>
<div class="form-group">
<label for="homepage">Homepage</label>
<input type="url" class="homepage form-control input-sm" name="" id="contactEmail" placeholder="홈페이지를 남겨주시면 방문해 드려요."/>
</div>
</s_rp_guest>
<p class="secretWrap">
<label class="btn btn-success">
<input type="checkbox" name=""/> 비밀글
</label>
<p class="help-block">개인 정보(이메일) 등을 노출 시에는 비밀글로 해 주세요. 여러분의 정보는 소중하니깐요.</p>
</p>
</s_rp_member>
<div class="form-group">
<label for="contactComment">Comment</label>
<textarea name="" rows="3" class="form-control" id="contactComment"></textarea>
</div>
<p>
<button type="submit" onclick="" class="btn btn-primary btn-block"/>댓글 달기</button>
</p>
</div>
</s_rp_input_form>
</div>
</s_rp>
CSS 처리 부분
/* 댓글 관련 설정 */
/* 댓글 상자 안쪽 여백 및 하단 바깥 여백 설정 */
.comment > .commentList > [id^=comment].well {
padding: 1rem;
margin-bottom: 1.5rem;
}
/* 댓글의 댓글 상자 안쪽과 바깥여백 및 배경색 설정 */
.comment > .commentList > [id^=comment].well > [id^=comment].well {
padding: 1rem;
margin: 1.5rem 0 0 2rem;
background: rgba(0,0,0,.075);
}
/* 댓글과 댓글의 댓글상자의 좌측 이미지 영역의 우측 여백 설정 */
.comment > .commentList > [id^=comment].well > .media > .media-left,
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-left {
padding-right: 1rem;
}
/* 댓글과 댓글의 댓글상자의 좌측 본문 영역의 좌측 여백 및 이미지 영역과 본문 영역 사이 분리선 설정 */
.comment > .commentList > [id^=comment].well > .media > .media-body,
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-body {
border-left: dotted 1px rgba(0,64,0,.25);
padding-left: 1rem;
}
/* 손님 또는 아이콘 설정이 없는 사용자에 대한 아이콘 설정 */
.comment > .commentList > [id^=comment].well > .media > .media-left > .guest-icon {
position: relative;
width: 10rem;
height: 10rem;
border: 0;
overflow: hidden;
z-index: 1;
}
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-left > .guest-icon {
position: relative;
width: 7rem;
height: 7rem;
border: 0;
overflow: hidden;
z-index: 1;
}
/* 사용자 아이콘 상자 설정 */
/* 유저 아이콘만을 표현하기 위해 우선 모든 내용을 숨긴다. */
.comment > .commentList > [id^=comment].well > .media > .media-left > .user-icon > *,
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-left > .user-icon > * {
display: none;
}
/* 유저 아이콘 상자의 특성을 설정한다. */
.comment > .commentList > [id^=comment].well > .media > .media-left > .user-icon {
display: block;
z-index: 2;
top: -10rem;
position: relative;
font-size: 0;
}
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-left > .user-icon {
display: block;
z-index: 2;
top: -7rem;
position: relative;
font-size: 0;
}
/* 유저 아이콘만을 숨김 해제하고 크기를 설정한다. */
.comment > .commentList > [id^=comment].well > .media > .media-left > .user-icon > img[alt='BlogIcon'] {
display: block;
width: 10rem;
height: 10rem;
border: 0;
position: absolute;
}
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-left > .user-icon > img[alt='BlogIcon'] {
display: block;
width: 7rem;
height: 7rem;
border: 0;
position: absolute;
}
/* 본문영역의 상요자 이름 부분에서 모든 이미지를 숨긴다. */
.comment > .commentList > [id^=comment].well > .media > .media-body > H4 > img,
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-body > H4 > img {
display:none;
}
/* 사용자 이름 부분의 글꼴과 자간거리 조정 */
.comment > .commentList > [id^=comment].well > .media > .media-body > H4,
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-body > H4 {
font-family: 'Lobster', 'Nanum Gothic', sans-serif, cursive;
letter-spacing: .2rem;
}
/* 댓글 주소를 숨긴다. (댓글 펼침 설정이 되어있지 않다면 작동하지 않는다.) */
.comment > .commentList > [id^=comment].well > .media > .media-body > p.rp-address,
.comment > .commentList > [id^=comment].well > [id^=comment].well > .media > .media-body > p.rp-address {
display:none;
}
/* 댓글 쓰기의 폼 그룹 하단 바깥 여백 설정 */
.comment .form-group {margin-bottom: 1rem;}
Javascript 처리 부분
(function($) {
// 댓글주소 (댓글 펼침 설정 필수)
$('.commentBtn').on('click', '> .btn-address', function(e) {
var container;
return container = $(this).parents('.media-body').find('> .rp-address').css('height', 'auto').slideToggle();
});
// 댓글 자동 링크 (댓글 펼침 설정 필수)
$(".comments-article").each(function(){
$(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '$1 ') );
});
}(jQuery));
자바스크립트가 정상 작동하기 위한 조치
댓글에 대한 자바스크립트(jQuery)가 정상적으로 작동하기 위해서는 댓글 펼침이 설정되어야 합니다.
