티스토리 본문 글 작성할 때 사용하기 좋은 깔끔한 서식

티스토리 제목 서식 공유

티스토리에 글을 작성하실 때 깔끔하게 보이기 위한 서식입니다.

여러 가지 형태로 변형도 가능하니 편하게 사용해 보세요.

· 샘플 확인

샘플을 확인하시고 마음에 드시면 복사하여 사용하세요.

위와 같이 작성되는 서식입니다.

· CSS

/* 테두리 블록 */
.MOACBox{position:relative;margin:40px 0;padding:40px 15px 15px;border:2px solid rgba(51,51,51,1);border-radius:3px;}
.MOACBox h2 {border:2px solid rgba(51,51,51,1);background-color:#FFC0CB;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#333;top:-20px;left:30px;text-transform:uppercase}
.MOACBox.box-yellow h2{background:#FFDB58}
/* 테두리 블록 */

위 css 코드는 서식 디자인입니다.

원하시는 데로 수정하셔서 사용하시면 됩니다.

· Html

<div class="MOACBox box-yellow">
<h2>Yellow</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

html 코드는 서식에 저장해 두시고 필요하실 때 꺼내 사용하시면 됩니다.

많은 분들에게 좋은 정보였으면 좋겠습니다.