티스토리 블로그 카톡 대화형 게시글 만들기

카톡 대화형 글 작성

카카오톡처럼 대화하는 형식으로 블로그 글을 쓰는 건 재미있을 수 있어요! 그렇게 하면 독자들이 글을 읽는 데 더 쉽게 몰입할 수 있을 거예요. 대화 형식은 이야기를 생생하게 전달할 수 있고 독자들과의 상호작용을 높일 수 있어요. 단, 주제나 콘텐츠에 따라서는 더 고려해야 할 부분이 있을 거예요. 대화 형식이 글의 목적과 독자층에 잘 맞는다면, 확실히 시도해 볼 가치가 있습니다. 여러분들이 대화형식의 글작성이 필요할 때 사용해 보세요.

카톡 대화형 Html

본문에 글을 작성하실 때 사용하는 html 코드입니다. 아래와 같은 형식으로 글을 작성하시면 되겠습니다. 서식을 활용하시면 편하게 글작성이 가능하실 겁니다.

<div class="wrap">
<div class="chat ch1">
<div class="iconx"><i class="fa-solid fa-user"></i></div>
<div class="textbox">카카오톡 대화형식 블로그 글 작성</div>
</div>
<div class="chat ch2">
<div class="iconx"><i class="fa-solid fa-user"></i></div>
<div class="textbox">이렇게 하면 되는건가요?</div>
</div>
</div>

카톡 대화형 css

html 형식이 만들어졌으니 css로 디자인을 하였습니다. 카카오톡 대화창의 배경 그리고 대화상대 ch1, ch2의 디자인 내용입니다. 자신의 티스토리 스킨에 맞게 수정하셔서 사용하시면 되겠습니다.

.wrap {
  padding: 40px 0;
  border-radius: 0.8rem;
  background-color: #A8C0D6;
}
.wrap .chat {
  display: flex;
  align-items: flex-start;
  padding: 20px;
}
.wrap .chat .iconx {
  position: relative;
  overflow: hidden;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #eee;
}
.wrap .chat .iconx i {
  position: absolute;
  top: 10px;
  left: 50%;
  font-size: 2.5rem;
  color: #aaa;
  transform: translateX(-50%);
}
.wrap .chat .textbox {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 85px);
  padding: 10px;
  margin-top: 7px;
  font-size: 16px;
  border-radius: 10px;
}
.wrap .chat .textbox::before {
  position: absolute;
  display: block;
  top: 0;
  font-size: 1.5rem;
}
.wrap .ch1 .textbox {
  margin-left: 20px;
  background-color: #ddd;
}
.wrap .ch1 .textbox::before {
  left: -15px;
  content: "◀";
  color: #ddd;
}
.wrap .ch2 {
  flex-direction: row-reverse;
}
.wrap .ch2 .textbox {
  margin-right: 20px;
  background-color: #F9EB54;
}
.wrap .ch2 .textbox::before {
  right: -15px;
  content: "▶";
  color: #F9EB54;
}

카톡 대화형 완성

아래 보이는 스타일이 카톡으로 대화하는 것처럼 완성된 모습입니다. 대화 형식의 글을 작성하시면 블로그 방문자가 쉽고 재미있게 끝까지 글을 읽을 수 있도록 도움을 줄 수 있습니다.

카카오톡 대화형식 블로그 글 작성

이렇게 하면 되는건가요?

이 글이 도움이 되셨다면 공감 버튼 정도는 눌러주시면 감사하겠습니다.