티스토리 꾸미기 | 둥근 테두리 글상자 HTML 서식 모음 #2

 

 

 

'폴더 스타일' 글상자, 인용구 만들기. 

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

1. 강조: 중요한 정보나 주요 메시지를 강조할 수 있습니다. 글상자를 사용하면 독자의 눈길을 사로잡고 주의를 집중시킬 수 있습니다.
2. 가독성: 복잡하거나 길게 나열된 정보를 정리해서 더 쉽게 읽고 이해할 수 있도록 도와줍니다.
3. 시각적 흥미: 글의 시각적인 디자인을 향상시켜 독자의 관심을 유지합니다. 다양한 스타일의 글상자를 사용하면 블로그의 전반적인 디자인이 더 매력적으로 보일 수 있습니다.
4. 정보 분류: 서로 다른 주제나 섹션을 구분해서 더 명확하게 표시할 수 있습니다.

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

📌 알림 

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

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

728x90

 

글상자, 인용구 HTML 코드

(border) 테두리 스타일

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

직선	네모 점선	동그란 점선	두줄선
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%);	그림자 효과: 그림자 크기, #색상 / 투명도

---

 

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

[▸ 티스토리 꾸미기] - 형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트

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

---

 

둥근 테두리 박스 스타일 글 상자 HTML 서식 모음

박스 안, 좌측 라인 글상자

💡 Text box #1

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(130, 181, 65, 0.1); border-radius: 10px;">
<div style="margin: 0px; padding: 10px 15px; border: 1px solid #a4a4a4; border-left: 5px solid  #82b541; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: bold; font-size: 1.3em;">Text box #1</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

📌 Text box #2

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(245, 73, 61, 0.1); border-radius: 10px;">
<div style="margin: 0; padding: 10px 15px; border: 1px solid #f4bec2; border-left: 5px solid  #f5493d; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="color: #f5493d; font-weight: bold; font-size: 1.3em;">Text box #2</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

📢 Text box #3

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(189, 89, 212, 0.1); border-radius: 10px;">
<div style="margin: 0; padding: 10px 15px; border: 1px solid #bd59d4; border-left: 5px solid  #bd59d4; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="color: #bd59d4; font-weight: bold; font-size: 1.3em;">📢 Text box #3</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #4

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(164, 25, 61, 0.1); border-radius: 10px;">
<div style="margin: 0; padding: 10px 15px; border: 1px solid #a4193d; border-left: 5px solid  #a4193d; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="color: #a4193d; font-weight: bold; font-size: 1.3em;">Text box #4</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #5

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(221, 169, 75, 0.1); border-radius: 10px;">
<div style="margin: 0; padding: 10px 15px; border: 1px solid #DDA94B; border-left: 5px solid  #DDA94B; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="color: #DDA94B; font-weight: bold; font-size: 1.3em;">Text box #5</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #6

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(30, 65, 116, 0.1); border-radius: 10px;">
<div style="margin: 0; padding: 10px 15px; border: 1px solid #1E4174; border-left: 5px solid  #1E4174; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="color: #1E4174; font-weight: bold; font-size: 1.3em;">Text box #6</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #7

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px; margin: 0.5em 0; background-color: rgba(96, 96, 96, 0.1); border-radius: 10px;">
<div style="margin: 0; padding: 10px 15px; border: 1px solid #606060; border-left: 5px solid  #606060; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16"><span style="color: #606060; font-weight: bold; font-size: 1.3em;">Text box #7</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

밑줄 스타일 글상자

💡 Text box #8

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px 20px; margin: 20px 0; border: 1px solid #bbb; border-left: 5px solid  #82b541; background-color: #fff; border-radius: 10px; box-shadow: rgba(130, 181, 65, 0.1) 0px 0px 5px 15px;">
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.2em;">💡 Text box #8</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

📢 Text box #9

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px 20px; margin: 20px 0; border: 1px solid #f4bec2; border-left: 5px solid  #f5493d; background-color: #fff; border-radius: 10px; box-shadow: rgba(245, 73, 61, 0.1) 0px 0px 5px 15px;">
<p style="border-bottom: 2px solid #bbb;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.2em;">📢 Text box #9</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

 

📌 Text box #10

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px 20px; margin: 20px 0; background: #fff; border-radius: 15px; box-shadow: rgba(3, 102, 214, 0.1) 0px 0px 10px 12px;">
<p style="border-bottom: 2px solid #bbdefb;" data-ke-size="size16"><span style="color: #1976d2; font-weight: bold; font-size: 1.3em;">📌 Text box #10</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #11

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px 20px; margin: 20px 0; background: #fff; border-radius: 15px; box-shadow: rgba(216, 27, 96, 0.2) 0px 0px 10px 12px;">
<p style="border-bottom: 2px solid #f8bbd0;" data-ke-size="size16"><span style="color: #d81b60; font-weight: bold; font-size: 1.2em;">Text box #11</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #12

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px 20px; margin: 20px 0; background: #fff; border-radius: 15px; box-shadow: rgba(46, 125, 50, 0.2) 0px 0px 10px 12px;">
<p style="border-bottom: 2px solid #c8e6c9;" data-ke-size="size16"><span style="color: #2e7d32; font-weight: bold; font-size: 1.2em;">Text box #12</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

Text box #13

1. 내용

2. https://galam.tistory.com

 

<div style="padding: 15px 20px; margin: 20px 0; background: #fff; border-radius: 15px; box-shadow: rgba(123, 31, 162, 0.2) 0px 0px 10px 12px;">
<p style="border-bottom: 2px solid #e1bee7;" data-ke-size="size16"><span style="color: #7b1fa2; font-weight: bold; font-size: 1.2em;">Text box #13</span></p>
<div style="padding-top: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
</div>

---

 

좌측 라인 밑줄 글상자

좌측 라인 밑줄 글상자 #1

1. 내용

2. https://galam.tistory.com

 

<div style="margin: 0.5em 0; padding: 10px 15px; border: 1px solid #a4a4a4; border-left: 5px solid  #ffa037; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #a4a4a4;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">좌측 라인 밑줄 글상자 1</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>

---

 

좌측 라인 밑줄 글상자 #2

1. 내용

2. https://galam.tistory.com

 

<div style="margin: 0.5em 0; padding: 10px 15px; border: 1px solid #a4a4a4; border-left: 5px solid  #00539C; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #a4a4a4;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">좌측 라인 밑줄 글상자 2</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>

---

 

좌측 라인 밑줄 글상자 #3

1. 내용

2. https://galam.tistory.com

 

<div style="margin: 0.5em 0; padding: 10px 15px; border: 1px solid #a4a4a4; border-left: 5px solid  #007F73; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #a4a4a4;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">좌측 라인 밑줄 글상자 3</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>

---

 

좌측 라인 밑줄 글상자 #4

1. 내용

2. https://galam.tistory.com

 

<div style="margin: 0.5em 0; padding: 10px 15px; border: 1px solid #a4a4a4; border-left: 5px solid  #D91656; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #a4a4a4;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">좌측 라인 밑줄 글상자 #4</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>

---

 

좌측 라인 밑줄 글상자 #5

1. 내용

2. https://galam.tistory.com

 

<div style="margin: 0.5em 0; padding: 10px 15px; border: 1px solid #a4a4a4; border-left: 5px solid  #6499E9; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #a4a4a4;" data-ke-size="size16"><span style="font-weight: bold; font-size: 1.1em;">좌측 라인 밑줄 글상자 #5</span></p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>

---

728x90

 

상단 두꺼운 라인 글상자

Text box #1

내용

https://galam.tistory.com/

 

<p data-ke-size="size16"><span style="position: relative; padding: 0px 20px; bottom: -15px; font-size: 1.3em; font-weight: bold; color: #fff;">Text box #1</span></p>
<div style="background: #fff; border-style: solid; border-color: #6c7ae0; border-width: 50px 0px 5px 0px; margin-top: -30px; margin-bottom: 15px; padding: 10px 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 4px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

Text box #2

내용

https://galam.tistory.com/

 

<p data-ke-size="size16"><span style="position: relative; padding: 0px 20px; bottom: -15px; font-size: 1.3em; font-weight: bold; color: #fff;">Text box #2</span></p>
<div style="background: #fff; border-style: solid; border-color: #EF9C66; border-width: 50px 0px 5px 0px; margin-top: -30px; margin-bottom: 15px; padding: 10px 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 4px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

Text box #3

내용

https://galam.tistory.com/

 

<p data-ke-size="size16"><span style="position: relative; padding: 0px 20px; bottom: -15px; font-size: 1.3em; font-weight: bold; color: #fff;">Text box #3</span></p>
<div style="background: #fff; border-style: solid; border-color: #574964; border-width: 50px 0px 5px 0px; margin-top: -30px; margin-bottom: 15px; padding: 10px 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 4px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

Text box #4

내용

https://galam.tistory.com/

 

<p data-ke-size="size16"><span style="position: relative; padding: 0px 20px; bottom: -15px; font-size: 1.3em; font-weight: bold; color: #fff;">Text box #4</span></p>
<div style="background: #fff; border-style: solid; border-color: #597445; border-width: 50px 0px 5px 0px; margin-top: -30px; margin-bottom: 15px; padding: 10px 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 4px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

Text box #5

내용

https://galam.tistory.com/

 

<p data-ke-size="size16"><span style="position: relative; padding: 0px 20px; bottom: -15px; font-size: 1.3em; font-weight: bold; color: #fff;">Text box #5</span></p>
<div style="background: #fff; border-style: solid; border-color: #FF8080; border-width: 50px 0px 5px 0px; margin-top: -30px; margin-bottom: 15px; padding: 10px 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 4px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

마무리

이렇게 간단하게 '둥근 테두리 글상자'에 대해 알아봤습니다. 이번 포스팅이 도움이 되셨길 바라며, 앞으로도 유용한 정보를 많이 공유할 예정이니 자주 방문해 주세요. 궁금한 점이나 요청 사항이 있으시면 언제든지 댓글로 남겨주시기 바랍니다.

 

오늘도 끝까지 읽어주셔서 감사합니다. 행복한 하루 보내세요!

 

관련글 바로가기

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

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

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