티스토리 꾸미기 | 포스트잇 메모장 스타일 글상자 HTML 서식 모음집

'포스트잇 글상자' HTML 서식 모음

티스토리나 다른 블로그 플랫폼에서 '글상자'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다.

시각적 구분: '글상자' 요소를 사용하면 '글상자'가 주변 내용과 시각적으로 구분되어 독자가 인용된 내용을 쉽게 식별할 수 있습니다. 이는 글의 가독성과 이해도를 높여줍니다.

스타일링: 블로그 플랫폼에서는 주로 '글상자'에 대한 스타일을 지정하여 인용구를 강조하거나 시각적으로 더욱 눈에 띄게 만듭니다. 이는 인용된 내용에 대한 주목도를 높일 수 있습니다.

웹 표준 준수: HTML 웹 표준에 따르면 인용된 텍스트를 나타내기 위해 '글상자' 요소를 사용해야 합니다. 티스토리나 다른 블로그 플랫폼에서 이를 준수함으로써 웹 사이트의 품질을 높일 수 있습니다..

따라서 티스토리나 다른 블로그 플랫폼에서 '글상자'를 사용하는 것은 인용된 내용을 명확하게 표시하고 시각적으로 강조하는 데 도움이 되며, 웹 표준을 준수함으로써 전반적인 웹사이트의 품질을 높일 수 있습니다.

📌 알림

웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

'글상자' HTML 코드 속성

테두리 스타일

원하는 선 스타일을 'border: solid'라고 쓰여있는 부분에 바꿔 적으면 됩니다.

직선	네모 점선	동그란 점선	두줄선
solid	dashed	dotted	double

선 위치

전체선	왼쪽 선	오른쪽 선	위쪽 선	아래쪽 선
border	border-left	border-right	border-top	border-bottom

태그 속성

px와 em은 모두 크기 입니다.(16px → 1em, 18px → 1.1em)

태그 속성	설명
color: #8568e1;	글꼴색: #8568e1;
background-color: #6c7ae0;	배경색: #6c7ae0;
border-bottom: #000000 2px solid;	아래쪽 선: #색상 선굵기px, 선 스타일
border-left: #000000 10px solid;	왼쪽 선: #색상 선굵기px, 선 스타일
border: 5px solid #A9A9F5;	전체 태두리선: 선굵기px 선 스타일 #색상
padding: 10px 1px 10px 1px;	박스 내부 여백: 상, 좌, 하, 우
margin: 10px 0px;	박스 외부 여백: 상/하, 좌/우
border-radius: 20px 1px 20px 1px;	테이블 모서리 둥글게: 좌/상, 우/상, 우/하, 좌/하
box-shadow: 0 3px 12px rgb(0 0 0 / 15%);	그림자 효과: 그림자 크기, #색상 / 투명도

색상 코드는 아래 '색상표' 페이지에서 확인하시면 됩니다.

형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트

형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 블로그의 소제목에 사용할 수 있는 색상표와 사이트입니다. 색상을 잘 이용하면 작은 차이지만 좀 더 고급스럽고, 멋지게 블로그를 만들

galam.tistory.com

'포스트잇 글상자' HTML 서식

'포스트잇 글상자' 스타일 1

포스트잇 글상자 1

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #bddd7b; padding: 5px 25px 5px 55px; margin: 1em 0; border-radius: 0px 10px 0px 10px; box-shadow: 2px 2px 2px #999;">
<div style="position: absolute; top: 0px; left: 0px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #5a771e; border-right-color: #5a771e;">&nbsp;</div>
<p style="border-bottom: 2px solid #555;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 1</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 2

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #d4d6fc; padding: 5px 25px 5px 55px; margin: 1em 0; border-radius: 0px 10px 0px 10px; box-shadow: 2px 2px 2px #999;">
<div style="position: absolute; top: 0px; left: 0px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #7c84c4; border-right-color: #7c84c4;">&nbsp;</div>
<p style="border-bottom: 2px solid #555;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 2</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 3

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #ffeb9f; padding: 5px 25px 5px 55px; margin: 1em 0; border-radius: 0px 10px 0px 10px; box-shadow: 2px 2px 2px #999;">
<div style="position: absolute; top: 0px; left: 0px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #ac9a5b; border-right-color: #ac9a5b;">&nbsp;</div>
<p style="border-bottom: 2px solid #555;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 3</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 4

글쓰기 <p>코드 중 border-bottom: 1px solid #333; 를 삭제하면 밑줄이 사라집니다.

https://galam.tistory.com/

<div style="position: relative; background-color: #e7bff2; padding: 5px 25px 5px 55px; margin: 1em 0; border-radius: 0px 10px 0px 10px; box-shadow: 2px 2px 2px #999;">
<div style="position: absolute; top: 0px; left: 0px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #74028e; border-right-color: #74028e;">&nbsp;</div>
<p data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 4</span></p>
<p data-ke-size="size16">글쓰기<span style="color: #ee2323;"> &lt;p&gt;</span>코드 중 <span style="color: #1b711d;">border-bottom: 1px solid #333;</span> 를 삭제하면 밑줄이 사라집니다.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

'포스트잇 글상자' 스타일 2

포스트잇 글상자 5

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 0; border: 2px solid #01955d; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -2px; left: -2px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #01955d; border-right-color: #01955d;">&nbsp;</div>
<p style="border-bottom: 2px solid #01955d;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 5</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 6

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 0; border: 2px solid #e98c38; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -2px; left: -2px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #e98c38; border-right-color: #e98c38;">&nbsp;</div>
<p style="border-bottom: 2px solid #e98c38;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 6</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 7

내용을 적어 주세요.

https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 0; border: 2px solid #846add; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -2px; left: -2px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #846add; border-right-color: #846add;">&nbsp;</div>
<p data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 7</span></p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

'포스트잇 글상자' 스타일 3

굵은 라인 포스트잇 글상자 8

내용을 적어 주세요.

https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 0; border: 4px solid #00b5e9; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -4px; left: -4px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #00b5e9; border-right-color: #00b5e9;">&nbsp;</div>
<p data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">굵은 라인 포스트잇 글상자 8</span></p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

굵은 라인 포스트잇 글상자 9

내용을 적어 주세요.

https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 0; border: 4px solid #bd59d4; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -4px; left: -4px; width: 0; height: 0; border: 20px solid #fff; border-bottom-color: #bd59d4; border-right-color: #bd59d4;">&nbsp;</div>
<p data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">굵은 라인 포스트잇 글상자 9</span></p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

굵은 라인 포스트잇 글상자 10

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 0; border: 4px solid #bcbcbc; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -4px; left: -4px; width: 0; height: 0; border: 20px solid #fff; border-bottom-color: #bcbcbc; border-right-color: #bcbcbc;">&nbsp;</div>
<p style="border-bottom: 2px solid #bcbcbc;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">굵은 라인 포스트잇 글상자 10</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

'포스트잇 글상자' 스타일 4

외부 여백을 이용한 가로 크기 조정.

margin: 1em 0;을 margin: 1em 2em;로 조정하면, 인용구 좌우에 외부 여백을 줄 수 있습니다.

포스트잇 글상자 11

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 3em; border: 4px solid #2c6ed5; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -4px; left: -4px; width: 0; height: 0; border: 20px solid #fff; border-bottom-color: #2c6ed5; border-right-color: #2c6ed5;">&nbsp;</div>
<p style="border-bottom: 2px solid #2c6ed5;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 11</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 12

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 3em; border: 2px solid #ea8236; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -2px; left: -2px; width: 0; height: 0; border: 20px solid #fff; border-bottom-color: #ea8236; border-right-color: #ea8236;">&nbsp;</div>
<p style="border-bottom: 2px solid #ea8236;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 12</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 13

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #ffeb9f; padding: 5px 25px 5px 55px; margin: 1em 3em; border-radius: 0px 10px 0px 10px; box-shadow: 2px 2px 2px #999;">
<div style="position: absolute; top: 0px; left: 0px; width: 0; height: 0; border: 20px solid white; border-bottom-color: #ac9a5b; border-right-color: #ac9a5b;">&nbsp;</div>
<p style="border-bottom: 2px solid #444;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 13</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 14

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 5px 25px 5px 55px; margin: 1em 3em; border: 4px solid #bbb; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -4px; left: -4px; width: 0; height: 0; border: 20px solid #fff; border-bottom-color: #bbb; border-right-color: #bbb;">&nbsp;</div>
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 14</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

728x90

'포스트잇 글상자' 스타일 5

내부 여백을 이용해 좌우 여백을 줄이고 상단의 여백을 접힌 포스트잇 아래로 내림으로 글을 쓸 수 있는 공간을 넓혀줍니다.

내부 여백수정 : padding: 25px(상) 25px(좌) 5px(하) 25px(우)

포스트잇 글상자 15

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 25px 25px 5px 25px; margin: 1em 2em; border: 4px solid #2c6ed5; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -4px; left: -4px; width: 0; height: 0; border: 15px solid #fff; border-bottom-color: #2c6ed5; border-right-color: #2c6ed5;">&nbsp;</div>
<p style="border-bottom: 2px solid #2c6ed5;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 15</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 16

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #fff; padding: 28px 25px 5px 25px; margin: 1em 2em; border: 2px solid #01955d; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -2px; left: -2px; width: 0; height: 0; border: 15px solid #fff; border-bottom-color: #01955d; border-right-color: #01955d;">&nbsp;</div>
<p style="border-bottom: 2px solid #01955d;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 16</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

포스트잇 글상자 17

- 내용을 적어주세요.

- https://galam.tistory.com/

<div style="position: relative; background-color: #ddd; padding: 30px 25px 5px 25px; margin: 1em 2em; border: 0px solid #01955d; border-radius: 0px 5px 0px 5px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: 0px; left: 0px; width: 0; height: 0; border: 15px solid #fff; border-bottom-color: #555; border-right-color: #555;">&nbsp;</div>
<p style="border-bottom: 2px solid #555;" data-ke-size="size16"><span style="color: #; font-weight: bold; font-size: 1.2em;">포스트잇 글상자 17</span></p>
<div style="padding-top: 5px;">
<p data-ke-size="size16">- 내용을 적어주세요.</p>
<p data-ke-size="size16">- https://galam.tistory.com/</p>
</div>
</div>

마무리

여기까지 읽어주셔서 감사합니다!

이번 포스팅이 도움이 되셨길 바라며, 앞으로도 유용한 정보를 많이 공유할 예정이니 자주 방문해 주세요.

궁금한 점이나 요청 사항이 있으시면 언제든지 댓글로 남겨주시기 바랍니다.

멋진 블로그 꾸미기 되세요!

'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록

우리들의 일상 속 소소한 이야기를 함께 나누는 공간이 되기를 바랍니다.

galam.tistory.com

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"

저작자표시 비영리 변경금지

'▸티스토리 이야기 > 인용구, 글상자 꾸미기' 카테고리의 다른 글

티스토리 꾸미기 \| 책갈피 스타일 글상자 HTML 서식 모음집 (3)	2025.02.13
티스토리 꾸미기 \| 공지 및 알림 인용구 HTML 서식 모음 (15)	2024.08.28
티스토리 꾸미기 \| 폴더 스타일 인용구 HTML 서식 모음 (10)	2024.08.28
티스토리 꾸미기 \| 말풍선 인용구 만들기 (2)	2024.05.08
티스토리 꾸미기 \| 인용구 따옴표 닫기 만들기 (3)	2024.03.15

티스토리 꾸미기 | 포스트잇 메모장 스타일 글상자 HTML 서식 모음집

'포스트잇 글상자' HTML 서식 모음

'글상자' HTML 코드 속성

테두리 스타일

선 위치

태그 속성

색상 코드는 아래 '색상표' 페이지에서 확인하시면 됩니다.

'포스트잇 글상자' HTML 서식

'포스트잇 글상자' 스타일 1

'포스트잇 글상자' 스타일 2

'포스트잇 글상자' 스타일 3

'포스트잇 글상자' 스타일 4

'포스트잇 글상자' 스타일 5

마무리

관련글

'▸티스토리 이야기 > 인용구, 글상자 꾸미기' 카테고리의 다른 글

티스토리툴바