[많이쓰는 UI] 댓글

댓글은 하나의 게시판에서 고객과 소통할 수 있는 유용한 기능이기 때문에, 대부분의 게시판에서 기본적으로 제공하고 있습니다. 이번 포스팅에서는 다음 그림과 같이, 댓글/답글 두가지를 위한 UI를 만들어 보겠습니다.

출처: https://dribbble.com/shots/13100807/attachments/4702544?mode=media

댓글/답글 입력 폼

마크업

<form class="form comment-form">
  <textarea placeholder="Comment"></textarea>
  <button type="button" class="submit">등록하기</button>
</form>

스타일

/* 입력 폼 */
.form {
  display: flex;
  flex-direction: column;
}
.form textarea {
  resize: none;
  border: 1px solid #dbdbdb;
  padding: 15px 20px;
  outline: none;
}
.form .submit {
  border: 1px solid #8f8f8f;
  background-color: #8f8f8f;
  color: #fff;
  padding: 5px;
  cursor: pointer;
}

댓글

마크업

<div class="comments">
  <div class="comment">
    <div class="content">
      <header class="top">
        <div class="username">우연히 들어온 사람</div>
        <div class="utility">
          <button class="menu">수정</button>
          <button class="menu">메뉴</button>
        </div>
      </header>
      <p>너무 좋은 글입니다. 잘 보고 가요 !!</p>
      <ul class="bottom">
        <li class="menu time">3 days ago</li>
        <li class="divider"></li>
        <li class="menu show-reply">show replies (1)</li>
      </ul>
    </div>
  </div>
</div>

스타일

/* 레이아웃 - 댓글 */
.comments {
  border: 1px solid #dbdbdb;
}
.comments .comment {
  border-bottom: 1px solid #dbdbdb;
  padding: 20px;
}
.comments .comment:last-child {
  border-bottom: none;
}

/* 상단 메뉴 */
.top {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.top .username {
  font-weight: bold;
}
.top .utility {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

/* 하단 메뉴 */
.bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  font-weight: bold;
  font-size: 14px;
}
.bottom .divider {
  width: 1px;
  height: 20px;
  background-color: #dbdbdb;
  margin: 0 20px;
}
.bottom .menu {
  margin: 0;
  padding: 0;
  color: #bebebe;
}
.bottom .menu.show-reply {
  color: #333;
}

답글

마크업

<div class="replies">
  <div class="reply">
    <div class="content">
      <header class="top">
        <div class="username">관리자</div>
        <div class="utility">
          <button class="menu">메뉴</button>
        </div>
      </header>
      <p>감사합니다!</p>
      <ul class="bottom">
        <li class="menu time">3 days ago</li>
      </ul>
    </div>
  </div>
  <form class="form reply-form">
    <textarea placeholder="Reply"></textarea>
    <button type="button" class="submit">등록하기</button>
  </form>
</div>

스타일

/* 레이아웃 - 답글 */
.replies {
  position: relative;
  background-color: #f2f2f2;
  padding-left: 40px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.replies:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #ddd;
}
.replies .reply {
  padding: 20px 0;
  border-bottom: 1px solid #dbdbdb;
}
.replies .reply:last-of-type {
  border-bottom: none;
}

샘플코드

See the Pen Pure css comment/reply view by 홍지성 (@lnbvocxe) on CodePen.