티스토리 꾸미기 다양한 그라데이션 색상 조합으로 박스 디자인 공유

 

 

---

 

박스디자인 설명

◾3가지 색상이 자연스럽게 섞이는 그라데이션 효과

◾내용물은 반투명 흰색 배경으로 가독성 확보 테마에 맞는 이모지로 포인트

◾부드러운 모서리 처리로 세련된 느낌

.

박스디자인을 사용하는 이유

안녕하세요 티스토리 블로그 박스 디자인을 설정하는법이 궁금 하시면 아래의 링크를 통해 사용법을 숙지 후에 적용하시길 바랍니다. 박스 디자인을 사용하게 되면 글의 가독성 뿐만 아니라 티스토리 블로그 글을 적으면 전체적으로 글이 디자인 되면서 보기 좋은글을 만들수 있습니다. 해당 코드를 이용해서 깔끔한 글 작성하는데 도움이 되었으면 합니다.

 

---

 

---

🌊 안내사항

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

<div style="background: linear-gradient(45deg, #2193b0, #6dd5ed, #00d2ff); border-radius: 6px; padding: 10px; margin: 10px 0; position: relative; overflow: hidden;">
<div style="background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 15px;">
<h3 style="color: #333; margin-top: 0;" data-ke-size="size23">🌊 안내사항</h3>
<p style="margin-bottom: 0; color: #444;" data-ke-size="size16">여기에 내용을 입력하세요.</p>

 

🌅 안내사항

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

<div style="background: linear-gradient(45deg, #ff6b6b, #ffc371, #ff9a9e); border-radius: 6px; padding: 10px; margin: 10px 0; position: relative; overflow: hidden;">
  <div style="background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 15px;">
    <h3 style="color: #333; margin-top: 0;">🌅 안내사항</h3>
    <p style="margin-bottom: 0; color: #444;">여기에 내용을 입력하세요.</p>
  </div>
</div>

 

💜 안내사항

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

<div style="background: linear-gradient(45deg, #a18cd1, #fbc2eb, #d4a5ff); border-radius: 6px; padding: 10px; margin: 10px 0; position: relative; overflow: hidden;">
  <div style="background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 15px;">
    <h3 style="color: #333; margin-top: 0;">💜 안내사항</h3>
    <p style="margin-bottom: 0; color: #444;">여기에 내용을 입력하세요.</p>
  </div>
</div>

 

🌿 안내사항

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

 

<div style="background: linear-gradient(45deg, #56ab2f, #a8e063, #00b09b); border-radius: 6px; padding: 10px; margin: 10px 0; position: relative; overflow: hidden;">
  <div style="background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 15px;">
    <h3 style="color: #333; margin-top: 0;">🌿 안내사항</h3>
    <p style="margin-bottom: 0; color: #444;">여기에 내용을 입력하세요.</p>
  </div>
</div>

🌸 안내사항

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

 

<div style="background: linear-gradient(45deg, #ee9ca7, #ffdde1, #ff6a88); border-radius: 6px; padding: 10px; margin: 10px 0; position: relative; overflow: hidden;">
  <div style="background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 15px;">
    <h3 style="color: #333; margin-top: 0;">🌸 안내사항</h3>
    <p style="margin-bottom: 0; color: #444;">여기에 내용을 입력하세요.</p>
  </div>
</div>

 

 

✨ 안내사항

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

 

<div style="background: linear-gradient(45deg, #232526, #414345, #232526); border-radius: 6px; padding: 10px; margin: 10px 0; position: relative; overflow: hidden;">
  <div style="background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 15px;">
    <h3 style="color: #333; margin-top: 0;">✨ 안내사항</h3>
    <p style="margin-bottom: 0; color: #444;">여기에 내용을 입력하세요.</p>
  </div>
</div>

 

 

💡 해당 코드를 모바일웹에서는 복사가 안될수도 있으니 PC버전을 이용하시길 바랍니다. 여러 색상과 깔끔한 박스형 디자인을 다음에도 많이 공유하겠습니다. 꼭 퍼가실때는 감사 인사 주시면 큰 힘이 됩니다.