티스토리 꾸미기 | 공지 및 알림 인용구 HTML 서식 모음

 

 

 

공지 및 알림 인용구 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

 

공지 및 알림 인용구 서식 모음

본문박스 색상 수정

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border-top: 2px solid; border-color: #6c7ae0;">

background-color: #e0e4ff; → 본문 배경색

border-color: #6c7ae0; → 본문 상단 라인색

 

제목박스 색상 수정

<span style="background-color: #6c7ae0; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span>

background-color: #6c7ae0;→ 제목박스 배경색

color: #ffffff; → 제목박스 폰트색상

font-size: 1em; → 폰트 사이즈 태그를 추가하면 폰트의 크기를 변경할 수 있습니다.

 

인용구 스타일 1 

공지 및 알림

공지 및 알림 인용구 1

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border-top: 2px solid; border-color: #6c7ae0;"><span style="background-color: #6c7ae0; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

공지사항

공지 및 알림 인용구 2

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border-top: 2px solid; border-color: #f24385;"><span style="background-color: #f24385; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">공지사항</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

알림글

공지 및 알림 인용구 3

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e7f9ff; border-top: 2px solid; border-color: #00bbec;"><span style="background-color: #00bbec; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">알림글</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

인용구 스타일 2 

공지 및 알림

공지 및 알림 인용구 4

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border: 2px solid; border-color: #6c7ae0;"><span style="background-color: #6c7ae0; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

공지사항

공지 및 알림 인용구 5

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border: 2px solid; border-color: #f24385;"><span style="background-color: #f24385; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">공지사항</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

알림글

공지 및 알림 인용구 6

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e7f9ff; border: 2px solid; border-color: #00bbec;"><span style="background-color: #00bbec; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff;">알림글</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

인용구 스타일 3 

제목박스 모서리 수정

< span... color: #ffffff; border-radius: 25px;">공지 및 알림</span>

제목코드 끝 부분의 글꼴 색상코드 뒤에 border-radius: 50px;를 넣어주면 제목 박스의 모서리를 둥글게 만들 수 있습니다.

 

공지 및 알림

공지 및 알림 인용구 7

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border-top: 2px solid; border-color: #6c7ae0;">
<span style="background-color: #6c7ae0; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff; border-radius: 50px;">공지 및 알림</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

공지사항

공지 및 알림 인용구 8

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border-top: 2px solid; border-color: #f24385;"><span style="background-color: #f24385; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff; border-radius: 50px;">공지사항</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

알림글

공지 및 알림 인용구 9

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #fef0b5; border-top: 2px solid; border-color: #fecc01;"><span style="background-color: #fecc01; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #000; border-radius: 50px;">알림글</span>
<p data-ke-size="size16"><b>1. 공지 및 알림 인용구 9</b></p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

인용구 스타일 4 

공지 및 알림

공지 및 알림 인용구 10

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border: 2px solid; border-color: #6c7ae0;">
<span style="background-color: #6c7ae0; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff; border-radius: 50px;">공지 및 알림</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구 10</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

공지사항

공지 및 알림 인용구 11

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border: 2px solid; border-color: #f24385;"><span style="background-color: #f24385; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #ffffff; border-radius: 50px;">공지사항</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구 11</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

알림글

공지 및 알림 인용구 12

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #fef0b5; border: 2px solid; border-color: #fecc01;"><span style="background-color: #fecc01; position: relative; margin: 0px 5px; padding: 8px 15px; bottom: 15px; font-weight: bold; color: #000; border-radius: 50px;">알림글</span>
<p data-ke-size="size16"><b>1. 공지 및 알림 인용구 12</b></p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

728x90

---

 

인용구 스타일 5 

공지 및 알림

공지 및 알림 인용구 13

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border-top: 2px solid; border-color: #6c7ae0;"><center><span style="background-color: #6c7ae0; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span></center>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

공지사항

공지 및 알림 인용구 14

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border-top: 2px solid; border-color: #f24385;"><center><span style="background-color: #f24385; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff;">공지사항</span></center>
<p data-ke-size="size16">공지 및 알림 인용구 14</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

공지 및 알림

공지 및 알림 인용구 15

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e7f9ff; border-top: 2px solid; border-color: #00bbec;"><center><span style="background-color: #00bbec; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span></center>
<p data-ke-size="size16">공지 및 알림 인용구 15</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

인용구 스타일 6 

공지 및 알림

공지 및 알림 인용구 16

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border: 2px solid; border-color: #6c7ae0;"><center><span style="background-color: #6c7ae0; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span></center>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>

---

 

공지사항

공지 및 알림 인용구 17

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border: 2px solid; border-color: #f24385;"><center><span style="background-color: #f24385; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff;">공지사항</span></center>
<p data-ke-size="size16">공지 및 알림 인용구 17</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

공지 및 알림

공지 및 알림 인용구 18

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #eaccf3; border: 2px solid; border-color: #bd59d4;"><center><span style="background-color: #bd59d4; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff;">공지 및 알림</span></center>
<p data-ke-size="size16">공지 및 알림 인용구 18</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

인용구 스타일 7 

공지 및 알림

공지 및 알림 인용구 19

https://galam.tistory.com/

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #e0e4ff; border: 2px solid; border-color: #6c7ae0; border-radius: 10px;"><center><span style="position: relative; background-color: #6c7ae0; padding: 8px 30px; bottom: 15px; font-weight: bold; color: #ffffff; border-radius: 50px;">공지 및 알림</span></center>
<p style="text-align: center;" data-ke-size="size16"><b>공지 및 알림 인용구 19</b></p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

공지 및 알림

공지 및 알림 인용구 20

https://galam.tistory.com/

가람과 함께하는 이야기

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #ffe3ee; border: 2px solid; border-color: #f24385; border-radius: 10px;"><center><span style="background-color: #f24385; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #ffffff; border-radius: 50px;">공지 및 알림</span></center>
<p style="text-align: center;" data-ke-size="size16">공지 및 알림 인용구 20</p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/</p>
</div>

---

 

공지 및 알림

공지 및 알림 인용구 21

https://galam.tistory.com/가람과 함께하는 이야기

 

<div style="padding: 5px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #edf9c8; border: 2px solid; border-color: #c2e254; border-radius: 10px;"><center><span style="background-color: #c2e254; position: relative; padding: 8px 20px; bottom: 15px; font-weight: bold; color: #000; border-radius: 50px;">공지 및 알림</span></center>
<p style="text-align: center;" data-ke-size="size16"><b>공지 및 알림 인용구 21</b></p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/가람과 함께하는 이야기</p>
</div>

---

 

인용구 관련글 바로가기

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

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

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

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

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

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