티스토리 꾸미기 | 폴더 스타일 인용구 HTML 서식 모음

 

 

 

폴더 스타일 인용구 만들기

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

 

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

 

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

 

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

 

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

 

※ 알림

웹서핑을 하다 보면, 제가 만든 소제목과 인용구 코드, 태그 속성 테이블, 그리고 오탈자까지 그대로 가져가 본인이 작성한 글인 것처럼 소제목 관련 포스팅을 하시는 분들이 계십니다. 코드를 퍼가는 것까지는 제가 막을 수 없지만, 제 자료를 사용해 소제목이나 인용구 등 관련 포스팅을 하실 경우, 출처를 꼭 밝혀 주시기 바랍니다.

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

 

인용구 서식 사용법

1. 서식을 이용하려면 '블로그 관리 홈 > 서식 관리자 > 서식 쓰기'로 들어갑니다.

---

2. 기본 모드가 아닌 'HTML'로 작성합니다.

---

3. 'HTML'로 작성 후 필요한 부분은 수정하시면 됩니다.

---

4. 마지막으로 '완료'를 클릭하여 저장합니다.

---

 

인용구 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 10px 20px 10px;	테이블 모서리 둥글게: 좌/상, 우/상, 우/하, 좌/하
box-shadow: 5px 5px 5px #999;	그림자 효과: 좌, 하, 그림자 크기, #색상

 

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

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

728x90

 

폴더 스타일 인용구

1. 인용구 내 본문의 글자 색, 크기, 위치 등은 티스토리의 에디터에서 수정할 수 있습니다.
2. 폴더 상단의 제목도 글자 색, 굵기 등은 티스토리의 에디터에서 수정할 수 있으며, 불필요할 경우 삭제할 수 있습니다, 가로 크기도 style="width: 150px;의 치수를 변경하여 수정할 수 있습니다.

 

폴더 1

내용

https://galam.tistory.com/

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #f8c754; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #000;">폴더 1</span></b></div>
<div style="background: #feeeae; border: 2px solid #f8c754; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

폴더 2

내용

https://galam.tistory.com/

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #005af0; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #fff;">폴더 2</span></b></div>
<div style="background: #c4caff; border: 2px solid #005af0; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #000;">내용</span></p>
<p data-ke-size="size16"><span style="color: #000;">https://galam.tistory.com/</span></p>
</div>

---

 

 

폴더 3

https://galam.tistory.com/

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #009d4d; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;">&nbsp;</div>
<div style="background: #a7c447; border: 2px solid #009d4d; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #000;">폴더 3</span></p>
<p data-ke-size="size16"><span style="color: #000;">https://galam.tistory.com/</span></p>
</div>

---

 

폴더 4

내용

https://galam.tistory.com/

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #f8c754; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #000;">폴더 4</span></b></div>
<div style="background: #feeeae; border: 2px solid #f8c754; border-top: 10px solid  #f8c754; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 0px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

폴더 5

내용

https://galam.tistory.com/

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #003fbf; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #fff;">폴더 5</span></b></div>
<div style="background: #0073e8; border: 2px solid #003fbf; border-top: 10px solid  #003fbf; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #ffffff;">내용</span></p>
<p data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>

---

 

 

폴더 6

https://galam.tistory.com/

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #009d4d; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;">&nbsp;</div>
<div style="background: #a7c447; border: 2px solid #009d4d; border-top: 10px solid  #009d4d; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16"><span style="color: #000;">폴더 6</span></p>
<p data-ke-size="size16"><span style="color: #000;">https://galam.tistory.com/</span></p>
</div>

---

 

폴더 7

내용

https://galam.tistory.com/

 

<div style="width: 160px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #f8c754; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #000;">폴더 7</span></b></div>
<div style="border: 5px solid #fbd84b; margin-top: 1px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

폴더 8

내용

https://galam.tistory.com/

 

<div style="width: 160px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #0048c2; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #ffffff;">폴더 8</span></b></div>
<div style="border: 5px solid #4c8fff; margin-top: 1px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

 

폴더 9

https://galam.tistory.com/

 

<div style="width: 160px; height: 0px; margin: 0.5em 0em 0em 0em; padding: 0px 20px; border-bottom: 35px solid #8e7408; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><b><span style="position: relative; bottom: -10px; font-size: 1em; color: #ffffff;"></span>&nbsp;</b></div>
<div style="border: 5px solid #c3aa0f; margin-top: 1px; margin-bottom: 15px; padding: 15px 20px 15px 20px; border-radius: 0px 10px 10px 10px;">
<p data-ke-size="size16">폴더 9</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

728x90

 

폴더 10

내용

https://galam.tistory.com/.

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #4272d7; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="padding: 0px 20px; position: relative; bottom: -10px; font-weight: 600; font-size: 1.05em; color: #ffffff;">폴더 10</span></span></div>
<div style="background: #4272d7; margin: 0em 0em 1em 0em; padding: 15px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #4272d7; padding: 15px 20px 15px 20px; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: 600; font-size: 1.05em;">내용</span></p>
<p data-ke-size="size16">https://galam.tistory.com/.</p>
</div>
</div>

---

 

 

폴더 인용구 11

https://galam.tistory.com/.

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #ffcd4a; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="padding: 0px 20px; position: relative; bottom: -10px; font-weight: 600; font-size: 1.05em;">&nbsp;</span></div>
<div style="background: #ffcd4a; margin: 0em 0em 1em 0em; padding: 15px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #ffcd4a; padding: 15px 20px 15px 20px; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: 800; font-size: 1.1em;">폴더 인용구 11</span></p>
<p data-ke-size="size16">https://galam.tistory.com/.</p>
</div>
</div>

---

 

 

폴더인용구 12

https://galam.tistory.com/.

모든 사람은 천재성을 갖고 태어나지만, 대부분의 사람은 그것을 단지 몇분간만 유지한다.

Everyone is born with genius, but most people only keep it a few minutes.

 

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #9acd32; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="padding: 0px 20px; position: relative; bottom: -10px; font-weight: 600; font-size: 1.05em;">&nbsp;</span></div>
<div style="background: #9acd32; margin: 0em 0em 1em 0em; padding: 15px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #9acd32; padding: 15px 20px 15px 20px; border-radius: 10px;">
<p data-ke-size="size16"><span style="font-weight: 800; font-size: 1.1em;">폴더인용구 12</span></p>
<p data-ke-size="size16">https://galam.tistory.com/.</p>
</div>
</div>

---

 

인용구 관련글 바로가기

티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음

티스토리 꾸미기 | 인용구 따옴표 닫기 만들기

티스토리 꾸미기 | 말풍선 인용구 만들기

티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1

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