책갈피 글상자 HTML 서식 모음
블로그에 글상자를 사용하는 이유는 다음과 같습니다:
- 강조: 중요한 정보나 주요 메시지를 강조할 수 있습니다. 글상자를 사용하면 독자의 눈길을 사로잡고 주의를 집중시킬 수 있습니다.
- 가독성: 복잡하거나 길게 나열된 정보를 정리해서 더 쉽게 읽고 이해할 수 있도록 도와줍니다.
- 시각적 흥미: 글의 시각적인 디자인을 향상시켜 독자의 관심을 유지합니다. 다양한 스타일의 글상자를 사용하면 블로그의 전반적인 디자인이 더 매력적으로 보일 수 있습니다.
- 정보 분류: 서로 다른 주제나 섹션을 구분해서 더 명확하게 표시할 수 있습니다.
이런 이유들로 인해 글상자는 블로그 포스트를 더 매력적이고 이해하기 쉽게 만드는 데 도움을 줄 수 있습니다.
📌 알림
웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.
그 외 개인적인 사용은 자유롭게 하시면 됩니다.
728x90
'글상자' HTML 코드
테두리 스타일
원하는 선 스타일을 'border: solid'라고 쓰여있는 부분에 바꿔 적으면 됩니다.
선 위치
태그 속성
px와 em은 모두 크기 입니다.(16px → 1em, 18px → 1.1em)
색상코드는 아래 '색상표' 홈에서 확인하시면 됩니다.
[▸ 티스토리 꾸미기] - 형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 블로그의 소제목에 사용할 수 있는 색상표와 사이트입니다. 색상을 잘 이용하면 작은 차이지만 좀 더 고급스럽고, 멋지게 블로그를 만들
galam.tistory.com
좌측 책갈피 글상자 1
- 책갈피 색상 변경 방법은 두 번째 <div>에서 끝 부분의 색상 코드 #bd59d4을 바꿔주면 됩니다.
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #bd59d4;"> </div>
💡 책갈피 글상자 1-1
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 10px 25px 10px 65px; border: 1px solid #d9d9d9; border-radius: 10px;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #e5004f;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 1-1</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
📌 책갈피 글상자 1-2
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 10px 25px 10px 65px; border: 1px solid #d9d9d9; border-radius: 10px;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #bd59d4;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 1-2</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
책갈피 글상자 1-3
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 10px 25px 10px 65px; border: 1px solid #d9d9d9; border-radius: 10px;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #01affd;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 1-3</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
책갈피 글상자 1-4
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 65px; border: 1px solid #d9d9d9; border-radius: 10px;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #12b886;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 1-4</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
우측 책갈피 글상자 2
책갈피 글상자 2-1
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px;">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #12b886;"> </div>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 2-1</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
책갈피 글상자 2-2
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px;">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #e5004f;"> </div>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 2-2</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
책갈피 글상자 2-3
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px;">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #bd59d4;"> </div>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">책갈피 글 상자 2-3</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>
좌측 책갈피 글상자 3
책갈피 글상자 3-1
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 10px 25px 10px 65px; border: 1px solid #d9d9d9; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #e5004f;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p data-ke-size="size16">책갈피 글 상자 3-1</p>
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
책갈피 글상자 3-2
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 10px 25px 10px 65px; border: 1px solid #d9d9d9; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #097c25;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p data-ke-size="size16">책갈피 글 상자 3-2</p>
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
책갈피 글상자 3-3
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; padding: 10px 25px 10px 65px; border: 1px solid #d9d9d9; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #4272d7;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p data-ke-size="size16">책갈피 글 상자 3-3</p>
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>728x90
우측 책갈피 글상자 4
책갈피 글 상자 4-1
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #f74877;"> </div>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p data-ke-size="size16">책갈피 글 상자 4-1</p>
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
책갈피 글 상자 4-2
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #00b5e9;"> </div>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p data-ke-size="size16">책갈피 글 상자 4-2</p>
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
책갈피 글 상자 4-2
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #fff; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 0 3px 12px rgb(0 0 0 / 15%);">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #83d160;"> </div>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fff transparent;"> </div>
<p data-ke-size="size16">책갈피 글 상자 4-2</p>
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
마무리
이렇게 간단하게 책갈피 스타일 글상자에 대해 알아봤습니다. 이번 포스팅이 도움이 되셨길 바라며, 앞으로도 유용한 정보를 많이 공유할 예정이니 자주 방문해 주세요. 궁금한 점이나 요청 사항이 있으시면 언제든지 댓글로 남겨주시기 바랍니다.
관련글 바로가기
'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록
'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록
우리들의 일상 속 소소한 이야기를 함께 나누는 공간이 되기를 바랍니다.
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
반응형
'▸티스토리 이야기 > 인용구, 글상자 꾸미기' 카테고리의 다른 글
| 티스토리 꾸미기 | 포스트잇 메모장 스타일 글상자 HTML 서식 모음집 (4) | 2025.02.13 |
|---|---|
| 티스토리 꾸미기 | 공지 및 알림 인용구 HTML 서식 모음 (15) | 2024.08.28 |
| 티스토리 꾸미기 | 폴더 스타일 인용구 HTML 서식 모음 (10) | 2024.08.28 |
| 티스토리 꾸미기 | 말풍선 인용구 만들기 (2) | 2024.05.08 |
| 티스토리 꾸미기 | 인용구 따옴표 닫기 만들기 (3) | 2024.03.15 |