본문 바로가기
티스토리컴파스/◾인용구꾸미기

티스토리 꾸미기 알림 박스 디자인 서식 활용하기

by 잇츠팁 2024. 12. 12.

 


 

알림

티스토리 꾸미기 알림 박스를 만드는 코드를 공유 합니다. 퍼가실때 ❤표시 눌러주시면 감사하겠습니다

 

박스 디자인을 사용하면 좋은 이유

 

시선 집중 효과

박스 안에 들어간 내용은 자연스럽게 시선이 가게 되어 있어요 특히 빨간색이나 노란색 같은 눈에 띄는 색상의 박스는 주의해야 할 내용을 강조하기 좋아요

정보 구조화

복잡한 투자 정보를 카테고리별로 나눠서 정리할 수 있어요 예를 들어 "투자 팁", "주의사항", "전문가 의견" 등을 각각 다른 스타일의 박스로 구분하면 좋죠 전문성 향상

깔끔하게 정리된 박스디자인은 블로그의 전문성을 높여줘요


박스 디자인 적용 방법 ( 서식 활용하기)

 

 

 

 

알림

박스디자인 예시 입니다 해당 박스를 만들기 위함이고, 가독성을 높여주며, 독자들에게 관심을 유발할수 있습니다.


서식관리에 관리에 들어가서 서식쓰기를 클릭 합니다. 클릭 후 글쓰기 창이 나오면 HTML 모드로 들어가 해당 수식을 넣고 적용 버튼을 누르면 됩니다. 이후 글 작성시 서식을 불러와서 활용하시면 됩니다.

깔끔한 박스 디자인 예시 코드

 

블랙테마

알림

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

html
닫기
<div style="background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0;">
<div style="display: flex; align-items: center; margin-bottom: 10px;"><span style="background-color: #333; color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px;">알림</span></div>
<p style="margin: 0; line-height: 1.6;" data-ke-size="size16">여기에 내용을 입력하세요.</p>
</div>
<p data-ke-size="size16">&nbsp;</p>

 



블루테마

알림

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

html
닫기
<div style="background-color: #e3f2fd; border: 1px solid #90caf9; border-radius: 8px; padding: 20px; margin: 20px 0;">
  <div style="display: flex; align-items: center; margin-bottom: 10px;">
    <span style="background-color: #1976d2; color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px;">알림</span>
  </div>
  <p style="margin: 0; line-height: 1.6;" data-ke-size="size16">여기에 내용을 입력하세요.</p>
</div>



초록테마

알림

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

html
닫기
<div style="background-color: #e8f5e9; border: 1px solid #81c784; border-radius: 8px; padding: 20px; margin: 20px 0;">
  <div style="display: flex; align-items: center; margin-bottom: 10px;">
    <span style="background-color: #2e7d32; color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px;">알림</span>
  </div>
  <p style="margin: 0; line-height: 1.6;" data-ke-size="size16">여기에 내용을 입력하세요.</p>
</div>

 

핑크테마

알림

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

html
닫기
<div style="background-color: #fce4ec; border: 1px solid #f48fb1; border-radius: 8px; padding: 20px; margin: 20px 0;">
  <div style="display: flex; align-items: center; margin-bottom: 10px;">
    <span style="background-color: #c2185b; color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px;">알림</span>
  </div>
  <p style="margin: 0; line-height: 1.6;" data-ke-size="size16">여기에 내용을 입력하세요.</p>
</div>

 

 

오렌지테마

알림

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

html
닫기
<div style="background-color: #fff3e0; border: 1px solid #ffb74d; border-radius: 8px; padding: 20px; margin: 20px 0;">
  <div style="display: flex; align-items: center; margin-bottom: 10px;">
    <span style="background-color: #ef6c00; color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px;">알림</span>
  </div>
  <p style="margin: 0; line-height: 1.6;" data-ke-size="size16">여기에 내용을 입력하세요.</p>
</div>

 

레드테마

알림

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

html
닫기
<div style="background-color: #ffebee; border: 1px solid #ef9a9a; border-radius: 8px; padding: 20px; margin: 20px 0;">
  <div style="display: flex; align-items: center; margin-bottom: 10px;">
    <span style="background-color: #c62828; color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px;">알림</span>
  </div>
  <p style="margin: 0; line-height: 1.6;" data-ke-size="size16">여기에 내용을 입력하세요.</p>
</div>

 

 


 

박스 디자인 코드를 알아보았는데요. 티스토리 작성할때 많이 활용 하시길 바랍니다. 해당 코드를 사용하실때 좋아요 버튼과 감사하다는 표현 한마디가 필자에게는 큰 힘이 됩니다❤

 

 

 

티스토리 인용구 큰다옴표 닫기 코드 추가 CSS 활용

반짝이는 링크버튼 만들기 바로가기 티스토리 블로그 글을 작성하다보면 인용구를 사용할때가 있습니다. 티스토리 인용구 " 를 사용했을때 큰다옴표 닫기가 적용 안된것을 볼수 있습니다.  생

poui704.tistory.com

 

 

티스토리 소제목 꾸미기 그라데이션 적용 박스 예제 HTML 서식

티스토리에서 소제목 서식으로 활용하면 블로그글의 가독성을 높일수 있습니다. 소제목 꾸미기는 방법은 두가지 방법이 있는데 서식을 활용한 방법이 편하고 사용하기 좋습니다. 여러 예시를

poui704.tistory.com