알림
티스토리 꾸미기 알림 박스를 만드는 코드를 공유 합니다. 퍼가실때 ❤표시 눌러주시면 감사하겠습니다
박스 디자인을 사용하면 좋은 이유
시선 집중 효과
박스 안에 들어간 내용은 자연스럽게 시선이 가게 되어 있어요 특히 빨간색이나 노란색 같은 눈에 띄는 색상의 박스는 주의해야 할 내용을 강조하기 좋아요
정보 구조화
복잡한 투자 정보를 카테고리별로 나눠서 정리할 수 있어요 예를 들어 "투자 팁", "주의사항", "전문가 의견" 등을 각각 다른 스타일의 박스로 구분하면 좋죠 전문성 향상
깔끔하게 정리된 박스디자인은 블로그의 전문성을 높여줘요
박스 디자인 적용 방법 ( 서식 활용하기)
알림
박스디자인 예시 입니다 해당 박스를 만들기 위함이고, 가독성을 높여주며, 독자들에게 관심을 유발할수 있습니다.
서식관리에 관리에 들어가서 서식쓰기를 클릭 합니다. 클릭 후 글쓰기 창이 나오면 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"> </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>
박스 디자인 코드를 알아보았는데요. 티스토리 작성할때 많이 활용 하시길 바랍니다. 해당 코드를 사용하실때 좋아요 버튼과 감사하다는 표현 한마디가 필자에게는 큰 힘이 됩니다❤
'티스토리컴파스 > ◾인용구꾸미기' 카테고리의 다른 글
티스토리 꾸미기 다양한 그라데이션 색상 조합으로 박스 디자인 공유 (0) | 2024.12.14 |
---|---|
티스토리 꾸미기 쉐도우 효과가 있는 모던한 박스 스타일 (1) | 2024.12.13 |
티스토리 인용구 큰다옴표 닫기 코드 추가 CSS 활용 (1) | 2024.12.11 |