말풍선 인용구 만들기.
티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다.
시각적 구분: '인용구' 요소를 사용하면 '인용구'가 주변 내용과 시각적으로 구분되어 독자가 인용된 내용을 쉽게 식별할 수 있습니다. 이는 글의 가독성과 이해를 높여줍니다.
스타일링: 블로그 플랫폼에서는 주로 '인용구'에 대한 스타일을 지정하여 인용구를 강조하거나 시각적으로 더욱 눈에 띄게 만듭니다. 이는 인용된 내용에 대한 주목도를 높일 수 있습니다.
웹 표준 준수: HTML의 웹 표준에 따르면 인용된 텍스트를 나타내기 위해 '인용구' 요소를 사용해야 합니다. 티스토리나 다른 블로그 플랫폼에서 이를 준수함으로써 웹 사이트의 품질을 높일 수 있습니다.
따라서 티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 것은 인용된 내용을 명확하게 표시하고 시각적으로 강조하는 데 도움이 되며, 웹 표준을 준수하여 전반적인 웹 사이트의 품질을 높일 수 있습니다.
📌 알림
웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.
그 외 개인적인 사용은 자유롭게 하시면 됩니다.
728x90
중앙 말풍선 인용구
인용구 내 본문의 글색, 크기, 위치 등 은 티스토리의 에디터에서 수정할 수 있습니다.
※ 수정이 가능한 코드
<div style="width: 90%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #f5006a; border-radius: 2em;">
<p>말풍선 인용구 1</p>
<p>https://galam.tistory.com/</p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #f5006a; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
width: 90%; → 말풍선 크기(본문의 90%)
background: #f5006a; → 말풍선 배경색
border: 22px solid transparent; → 말풍선 하단 돌출부 크기
border-top-color: #f5006a; → 말풍선 하단 돌출부 배경색
margin-left: 50%; → 말풍선 하단 돌출부 위치(숫자가 높아질수록 우측으로 이동)
margin-bottom: 0em; → 말풍선 돌출부 하단 여백(숫자가 높아질수록 하단 여백이 커짐)
말풍선 인용구 1
https://galam.tistory.com/
<div style="width: 90%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #f5006a; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #ffffff;">말풍선 인용구 1</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #f5006a; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 2
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #00bbec; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #ffffff;">말풍선 인용구 2</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #00bbec; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 3
https://galam.tistory.com/
<div style="width: 70%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #0fd850; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #ffffff;">말풍선 인용구 3</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #0fd850; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
좌측 말풍선 인용구
말풍선 인용구 4
https://galam.tistory.com/
<div style="width: 90%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #df16a3; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #ffffff;">말풍선 인용구 4</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #df16a3; border-left: 0; margin-left: 70%; margin-top: 0px; margin-bottom: 1em;"> </div>
말풍선 인용구 5
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #3e3f8a; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #ffffff;">말풍선 인용구 5</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #3e3f8a; border-left: 0; margin-left: 70%; margin-top: 0px; margin-bottom: 1em;"> </div>
말풍선 인용구 6
https://galam.tistory.com/
<div style="width: 70%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #8e9ebe; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #ffffff;">말풍선 인용구 6</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #ffffff;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #8e9ebe; border-left: 0; margin-left: 60%; margin-top: 0px; margin-bottom: 1em;"> </div>
테두리 말풍선 인용구
말풍선 인용구 7
https://galam.tistory.com/
<div style="width: 90%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #fff; border-radius: 2em; border: 4px solid #000;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800;">말풍선 인용구 7</span></p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/</p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #000; border-left: 0; margin-left: 70%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 8
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #fff; border-radius: 2em; border: 4px solid #0868b8;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800;">말풍선 인용구 8</span></p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/</p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #0868b8; border-left: 0; margin-left: 70%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 9
https://galam.tistory.com/
<div style="width: 70%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #fff; border-radius: 2em; border: 4px solid #ff3d5c;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800;">말풍선 인용구 9</span></p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/</p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #ff3d5c; border-left: 0; margin-left: 60%; margin-top: 0px; margin-bottom: 0em;"> </div>
점선 테두리 말풍선 인용구
말풍선 인용구 10
https://galam.tistory.com/
<div style="width: 90%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #fff; border-radius: 2em; border: 4px dashed #ffd044;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800;">말풍선 인용구 10</span></p>
<p style="text-align: center;" data-ke-size="size16">https://galam.tistory.com/</p>
</div>
<div style="position: relative; bottom: 4px; width: 0; border: 22px solid transparent; border-top-color: #ffd044; border-left: 0; margin-left: 60%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 11
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #fff; border-radius: 2em; border: 4px dashed #885db9;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #885db9;">말풍선 인용구 11</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #885db9;">https://galam.tistory.com//</span></p>
</div>
<div style="position: relative; bottom: 4px; width: 0; border: 22px solid transparent; border-top-color: #885db9; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 12
https://galam.tistory.com/
<div style="width: 70%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; background: #fff; border-radius: 2em; border: 4px dashed #d148b9;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #d148b9;">말풍선 인용구 12</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #d148b9;">https://galam.tistory.com/</span></p>
</div>
<div style="position: relative; bottom: 4px; width: 0; border: 22px solid transparent; border-top-color: #d148b9; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
테두리 배경색 말풍선 인용구
말풍선 인용구 13
https://galam.tistory.com/
<div style="width: 90%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 0.4em solid #07553B; background: #CED46A; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #07553B;">말풍선 인용구 13</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #07553B;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #07553B; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 14
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 0.4em solid #815854; background: #F9EBDE; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #815854;">말풍선 인용구 14</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #815854;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #815854; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 15
https://galam.tistory.com/
<div style="width: 70%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 0.4em solid #422057; background: #FCF951; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #422057;">말풍선 인용구 15</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #422057;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #422057; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
말풍선 인용구 16
https://galam.tistory.com/
<div style="width: 70%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 0.4em solid #F96167; background: #FCE77D; border-radius: 2em;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #f96167;">말풍선 인용구 16</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #f96167;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 22px solid transparent; border-top-color: #F96167; border-left: 0; margin-left: 50%; margin-top: 0px; margin-bottom: 0em;"> </div>
box-shadow 말풍선 인용구
말풍선 인용구 17
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 4px solid #F96167; background: #FFF9E1; border-radius: 3em; box-shadow: 8px 8px 0px #F96167;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #f96167;">말풍선 인용구 17</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #f96167;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 25px solid transparent; border-top-color: #F96167; border-left: 0; margin-left: 20%; margin-top: -2px; margin-bottom: 0em;"> </div>
말풍선 인용구 18
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 4px solid #34495E; background: #EBF5FB; border-radius: 3em; box-shadow: 8px 8px 0px #34495E;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #2c3e50;">말풍선 인용구 18</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #2c3e50;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 25px solid transparent; border-top-color: #34495E; border-left: 0; margin-left: 20%; margin-top: -2px; margin-bottom: 0em;"> </div>
말풍선 인용구 19
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 4px solid #27AE60; background: #E8F8F5; border-radius: 3em; box-shadow: 8px 8px 0px #27AE60;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #27ae60;">말풍선 인용구 19</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #555;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 25px solid transparent; border-top-color: #27AE60; border-left: 0; margin-left: 20%; margin-top: -2px; margin-bottom: 0em;"> </div>
말풍선 인용구 20
https://galam.tistory.com/
<div style="width: 80%; padding: 2em 1.5em; margin-top: 1em; margin: 0em auto; border: 4px solid #8E44AD; background: #F5EEF8; border-radius: 3em; box-shadow: 8px 8px 0px #8E44AD;">
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 2em; font-weight: 800; color: #555;">말풍선 인용구 20</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #555;">https://galam.tistory.com/</span></p>
</div>
<div style="width: 0; border: 25px solid transparent; border-top-color: #8E44AD; border-left: 0; margin-left: 20%; margin-top: -2px; margin-bottom: 0em;"> </div>
포인트 말풍선 인용구
QUOTE
말풍선 인용구 21
https://galam.tistory.com/
<div style="max-width: 85%; margin: 2em auto; position: relative; padding: 1.5em; border: 2px solid #333; border-radius: 10px; background: #fff;">
<div style="position: absolute; top: -10px; left: 20px; background: #fff; padding: 0 10px; font-weight: bold; color: #333;">QUOTE</div>
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 1.5em; font-weight: 800; color: #555;">말풍선 인용구 21</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #999;">https://galam.tistory.com/</span></p>
<div style="position: absolute; bottom: -40px; right: 30px; width: 0; border: 10px solid transparent; border-top-color: #333;"> </div>
</div>TIP
말풍선 인용구 22
https://galam.tistory.com/
<div style="max-width: 85%; margin: 2em auto; position: relative; padding: 1.5em; border: 2px solid #27ae60; border-radius: 10px; background: #fafff9;">
<div style="position: absolute; top: -10px; left: 20px; background: #fff; padding: 0 10px; font-weight: bold; color: #27ae60;">TIP</div>
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 1.5em; font-weight: 800; color: #1e8449;">말풍선 인용구 22</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #62c462;">https://galam.tistory.com/</span></p>
<div style="position: absolute; bottom: -40px; right: 30px; width: 0; border: 10px solid transparent; border-top-color: #27ae60;"> </div>
</div>MEMO
말풍선 인용구 23
https://galam.tistory.com/
<div style="max-width: 85%; margin: 2em auto; position: relative; padding: 1.5em; border: 2px solid #8e44ad; border-radius: 10px; background: #fbf7ff;">
<div style="position: absolute; top: -10px; left: 20px; background: #fff; padding: 0 10px; font-weight: bold; color: #8e44ad;">MEMO</div>
<p style="text-align: center;" data-ke-size="size16"><span style="font-size: 1.5em; font-weight: 800; color: #6c3483;">말풍선 인용구 23</span></p>
<p style="text-align: center;" data-ke-size="size16"><span style="color: #a569bd;">https://galam.tistory.com/</span></p>
<div style="position: absolute; bottom: -40px; right: 30px; width: 0; border: 10px solid transparent; border-top-color: #8e44ad;"> </div>
</div>728x90
See the Pen Quote: Jared Spool • Web Site Usability: A Designer's Guide by Juan Pablo (@jupago) on CodePen.
See the Pen Quote: Jared Spool • Web Site Usability: A Designer's Guide by Galam (@tserxuag-the-styleful) on CodePen.
인용구 관련글 바로가기
2024.03.14-티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 인용구 서식(HTML) 스타일 모음티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면
galam.tistory.com
2024.03.15-티스토리 꾸미기 | 인용구 따옴표 닫기 만들기
티스토리 꾸미기 | 인용구 따옴표 닫기 만들기
목차 인용구 따옴표 닫기 만들기 티 스토리의 인용구 따옴표의 경우 열림 따옴표만 존재하고 닫힘 따옴표가 존재하지 않는 것이 기본값입니다. 이 경우는 CSS 값을 추가해 줌으로써 아래처럼 따
galam.tistory.com
• https://galam.tistory.com
반응형
'- 티스토리 이야기 > 인용구, 글상자 꾸미기' 카테고리의 다른 글
| 티스토리 꾸미기 | 폴더 스타일 글상자, 인용구 HTML 서식 모음집 (9) | 2025.02.14 |
|---|---|
| 티스토리 꾸미기 | 포스트잇 메모장 스타일 글상자 HTML 서식 모음집 (5) | 2025.02.13 |
| 티스토리 꾸미기 | 책갈피 스타일 글상자 HTML 서식 모음집 (6) | 2025.02.13 |
| 티스토리 꾸미기 | 인용구 따옴표 닫기 만들기 (4) | 2024.03.15 |
| 티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음 (21) | 2024.03.14 |
