티스토리 꾸미기 쉐도우 효과가 있는 모던한 박스 스타일

---

 

안녕하세요 티스토리 글을 작성하실때 꾸미는데 도움을 줄수 있는 정보를 공유 하고 있습니다. 티스토리 글을 작성 할때 소제목, 글상자 박스디자인 예제를 이용하여 가독성 있는 글을 작성하는데 도움을 줄수 있습니다. 많이 사용하는 인용구 소제목 링크버튼의 디자인을 많이 공유 하겠습니다. 서식을 통한 적용법은 이전 포스팅을 참고 하시길 바랍니다. 

알림 박스 디자인 서식 활용하기

 

 

✨ 티스토리 박스디자인 사용시 좋은점

티스토리 블로그에서 박스디자인을 활용하면 다음과 같은 장점들이 있어요.

가독성 향상

중요한 내용을 시각적으로 구분해서 독자들의 이해도를 높일 수 있어요 복잡한 정보를 체계적으로 정리할 수 있어 글의 흐름을 파악하기 쉬워져요1 콘텐츠 차별화

단순한 텍스트보다 박스디자인을 활용하면 전문성이 더욱 돋보여요 

 

독자 경험 개선

중요 포인트를 박스로 강조하면 독자들이 핵심 내용을 놓치지 않고 볼 수 있어요 박스 디자인으로 감싸진 콘텐츠는 자연스럽게 시선이 가게 되어 있어요

.

 

---

알림

💡 제가 소개할 박스 디자인 이름은 쉐도우 박스 디자인 입니다. 여러가지 색상을 공유 해드리겠습니다.

 

 

 

💡 블루쉐도우

여기에 내용을 입력하세요.

 

<div style="background: white; border-radius: 15px; box-shadow: rgba(25, 118, 210, 0.2) 0px 7px 29px 5px; padding: 25px; margin: 20px 0;">
  <h3 style="color: #1976d2; margin-top: 0; border-bottom: 2px solid #bbdefb; padding-bottom: 10px;">💡 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

✨ 핑크쉐도우

여기에 내용을 입력하세요.

 

<div style="background: white; border-radius: 15px; box-shadow: rgba(216, 27, 96, 0.2) 0px 7px 29px 5px; padding: 25px; margin: 20px 0;">
  <h3 style="color: #d81b60; margin-top: 0; border-bottom: 2px solid #f8bbd0; padding-bottom: 10px;">✨ Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

 

🌿 그린쉐도우

여기에 내용을 입력하세요.

<div style="background: white; border-radius: 15px; box-shadow: rgba(46, 125, 50, 0.2) 0px 7px 29px 5px; padding: 25px; margin: 20px 0;">
  <h3 style="color: #2e7d32; margin-top: 0; border-bottom: 2px solid #c8e6c9; padding-bottom: 10px;">🌿 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

🔮 퍼플쉐도우

여기에 내용을 입력하세요.

 

<div style="background: white; border-radius: 15px; box-shadow: rgba(123, 31, 162, 0.2) 0px 7px 29px 5px; padding: 25px; margin: 20px 0;">
  <h3 style="color: #7b1fa2; margin-top: 0; border-bottom: 2px solid #e1bee7; padding-bottom: 10px;">🔮 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

🎯 오렌지쉐도우

여기에 내용을 입력하세요.

 

<div style="background: white; border-radius: 15px; box-shadow: rgba(245, 124, 0, 0.2) 0px 7px 29px 5px; padding: 25px; margin: 20px 0;">
  <h3 style="color: #f57c00; margin-top: 0; border-bottom: 2px solid #ffe0b2; padding-bottom: 10px;">🎯 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

💡블랙 쉐도우

여기에 내용을 입력하세요.

<div style="background: white; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.15) 0px 7px 29px 5px; padding: 25px; margin: 20px 0;">
  <h3 style="color: #333333; margin-top: 0; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px;">💡 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

🌈 레인보우 쉐도우

여기에 내용을 입력하세요.

 

<div style="background: white; border-radius: 15px; padding: 25px; margin: 20px 0; box-shadow: 
    rgba(255, 0, 0, 0.15) -5px -5px 20px,
    rgba(255, 165, 0, 0.15) 5px -5px 20px,
    rgba(0, 255, 0, 0.15) -5px 5px 20px,
    rgba(0, 0, 255, 0.15) 5px 5px 20px;">
  <h3 style="color: #333; margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px;">🌈 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

🌅 알림

여기에 내용을 입력하세요.

<div style="background: white; border-radius: 15px; padding: 25px; margin: 20px 0; box-shadow: 
    rgba(255, 87, 34, 0.2) -5px -5px 20px,
    rgba(255, 193, 7, 0.2) 5px -5px 20px,
    rgba(233, 30, 99, 0.2) -5px 5px 20px,
    rgba(156, 39, 176, 0.2) 5px 5px 20px;">
  <h3 style="color: #333; margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px;">🌅 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

 

🌊 알림참고

여기에 내용을 입력하세요.

<div style="background: white; border-radius: 15px; padding: 25px; margin: 20px 0; box-shadow: 
    rgba(3, 169, 244, 0.2) -5px -5px 20px,
    rgba(0, 188, 212, 0.2) 5px -5px 20px,
    rgba(0, 150, 136, 0.2) -5px 5px 20px,
    rgba(76, 175, 80, 0.2) 5px 5px 20px;">
  <h3 style="color: #333; margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px;">🌊 Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

✨ 퍼플그라데이션

여기에 내용을 입력하세요.

<div style="background: white; border-radius: 15px; padding: 25px; margin: 20px 0; box-shadow: 
    rgba(103, 58, 183, 0.2) -5px -5px 20px,
    rgba(233, 30, 99, 0.2) 5px -5px 20px,
    rgba(33, 150, 243, 0.2) -5px 5px 20px,
    rgba(156, 39, 176, 0.2) 5px 5px 20px;">
  <h3 style="color: #333; margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px;">✨ Today's Point</h3>
  <p style="margin-bottom: 0; line-height: 1.6;">여기에 내용을 입력하세요.</p>
</div>

 

 

---

 

해당 코드를 복사해서 잘 활용해주시고 출처를 꼭 남겨주시거나, 많이 공유 부탁 드려요
퍼가실때는 ~❤ 잊지마세요😊