티스토리 인용구 서식(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 1px 20px 1px; | 테이블 모서리 둥글게: 좌/상, 우/상, 우/하, 좌/하 |
| box-shadow: 5px 5px 5px #999; | 그림자 효과: 좌, 하, 그림자 크기, #색상 |
색상코드는 아래 '색상표' 홈에서 확인하시면 됩니다.
[▸ 티스토리 꾸미기] - 형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트
형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 블로그의 소제목에 사용할 수 있는 색상표와 사이트입니다. 색상을 잘 이용하면 작은 차이지만 좀 더 고급스럽고, 멋지게 블로그를 만들
galam.tistory.com
인용구 서식 HTML 모음
둥근 박스 인용구 1
- 글의 정렬은 티스토리 툴을 이용하여 좌, 우, 중앙 이동이 가능합니다.
- border-radius: 20px 20px;를 이용하여 박스의 테두리의 모서리 모양을 변경할 수 있습니다.
둥근 박스 인용구 1
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="border: 10px solid #ef6c57; border-radius: 20px; background-color: #ffffff; padding: 15px 30px; margin: 0px 20px;">
<div style="width: 100%; height: 12px; background-color: #ffffff; display: block; position: relative; top: -26px; margin: 0 auto;"> </div>
<p style="text-align: center; font-weight: bold;" data-ke-size="size18">제목</p>
<p style="text-align: center;" data-ke-size="size16">- 내용 -</p>
<div style="width: 100%; height: 12px; background-color: #ffffff; display: block; position: relative; bottom: -26px; margin: 0 auto;"> </div>
</div>
둥근 박스 인용구 2
- margin: 0px 20px;를 이용해 외부의 상, 하 / 좌, 우 여백을 조절할 수 있습니다.
둥근 박스 인용구 2
- 내용 -
https://galam.tistory.com/
<div style="border: 10px solid #cccfe3; border-radius: 20px; background-color: #ffffff; padding: 15px 30px; margin: 0px 20px;">
<div style="width: 100%; height: 12px; background-color: #ffffff; display: block; position: relative; top: -26px; margin: 0 auto;"> </div>
<p style="text-align: center; font-weight: bold;" data-ke-size="size18">제목</p>
<p style="text-align: center;" data-ke-size="size16">- 내용 -</p>
<div style="width: 100%; height: 12px; background-color: #ffffff; display: block; position: relative; bottom: -26px; margin: 0 auto;"> </div>
</div>
각진 박스 인용구 1
- 글의 정렬은 티스토리 툴을 이용하여 좌, 우, 중앙 이동이 가능합니다.
- border-radius: 0px 0px;를 이용하여 박스의 모서리 모양을 변경할 수 있습니다.
- margin: 0px 20px;를 이용해 외부의 상, 하 / 좌, 우 여백을 조절할 수 있습니다.
각진 박스 인용구 1
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="border: 10px solid #adb1f2; border-radius: 0px; background-color: #ffffff; padding: 15px 30px; margin: 0;">
<div style="width: 90%; height: 12px; background-color: #ffffff; display: block; position: relative; top: -26px; margin: 0 auto;"> </div>
<p style="text-align: left; font-weight: bold;" data-ke-size="size18">제목</p>
<p style="text-align: left;" data-ke-size="size16">- 내용을 적어주세요.</p>
<div style="width: 90%; height: 12px; background-color: #ffffff; display: block; position: relative; bottom: -26px; margin: 0 auto;"> </div>
</div>
각진 박스 인용구 2
- 글의 정렬은 티스토리 툴을 이용하여 좌, 우, 중앙 이동이 가능합니다.
- border-radius: 0px 0px;를 이용하여 박스의 모양을 변경할 수 있습니다.
각진 박스 인용구 2
- 내용을 적어주세요.
<div style="border: 5px solid #a6aa8d; border-radius: 0px; background-color: #ffffff; padding: 15px 30px; margin: 0;">
<div style="width: 90%; height: 12px; background-color: #ffffff; display: block; position: relative; top: -26px; margin: 0 auto;"> </div>
<p style="text-align: left; font-weight: bold;" data-ke-size="size18">제목</p>
<p style="text-align: left;" data-ke-size="size16">- 내용을 적어주세요.</p>
<div style="width: 90%; height: 12px; background-color: #ffffff; display: block; position: relative; bottom: -26px; margin: 0 auto;"> </div>
</div>
둥근 모서리 박스 인용구 1
- border-radius: 20px 0px;를 이용하여 박스의 모서리 모양을 변경할 수 있습니다.
내용
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="padding: 15px 20px; margin: 0.5em 0; background-color: #f6f8ea; border-radius: 20px 0px; border: 2px solid #959d86; line-height: 1.8;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">1.</p>
<p data-ke-size="size16">2.</p>
</div>
둥근 모서리 박스 인용구 2
- border-radius: 20px 0px;를 이용하여 박스의 모서리 모양을 변경할 수 있습니다.
내용
1. 배경색이 없습니다.
2. https://galam.tistory.com/manage/
<div style="padding: 15px 20px; margin: 0.5em 0; border-radius: 20px 0px; border: 2px solid #d9d9d9; line-height: 1.8;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">1.</p>
<p data-ke-size="size16">2.</p>
</div>
둥근 모서리 박스 인용구 3
내용
1. 배경색이 없습니다.
2. https://galam.tistory.com/manage/
<div style="padding: 15px 20px; border-radius: 10px; border: 1px solid #d9d9d9; margin: 10px 10px; border-radius: 10px; box-shadow: 2px 2px 2px #999;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">1.</p>
<p data-ke-size="size16">2.</p>
</div>
모서리 직각 박스 인용구 4
- border-radius: 0px 0px;를 이용하여 박스의 모서리 모양을 변경할 수 있습니다.
내용
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="padding: 15px 20px; margin: 0.5em 0; background-color: #f4f4f4; border-radius: 0px 0px; border: 1px solid #d9d9d9; line-height: 1.8;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">1.</p>
<p data-ke-size="size16">2.</p>
</div>
보드형 박스 인용구 1
내용
1. 내용을 적어주세요.
- https://galam.tistory.com/
<div style="padding: 20px 20px; margin: 0.5em 0; background-color: #f7db87; border-bottom: 10px #9d702d solid; border-radius: 0px 0px;">
<div style="padding: 20px 20px; background-color: #f2eed5; border-radius: 20px 20px;">
<p data-ke-size="size16">내용</p>
<p data-ke-size="size16">1.</p>
<p data-ke-size="size16">2.</p>
</div>
</div>
보드형 박스 인용구 2
내용
1 보드형 박스 인용구.
2 https://galam.tistory.com/.
<div style="padding: 20px 20px; margin: 0.5em 0; background-color: #eaadb2; border-bottom: 10px #7f3e7c solid; border-radius: 0px 0px;">
<div style="padding: 20px 20px; background-color: #ffffff; border-radius: 20px 20px;">
<p data-ke-size="size18"><span style="color: #7f3e7c;"><b>내용</b></span></p>
<p data-ke-size="size16">1.</p>
<p data-ke-size="size16">2.</p>
</div>
</div>
보드형 박스 인용구 3
내용
1. 내용을 적어주세요.
- https://galam.tistory.com/
<div style="padding: 20px 20px 10px 20px; margin: 0.5em 0; background-color: #dbe793; border-bottom: 10px #555 solid; border-radius: 10px 10px 0px 0px;">
<div style="padding: 20px; background-color: #006e33; border-radius: 10px;">
<p data-ke-size="size18"><span style="color: #ffffff;"><b>내용</b></span></p>
<p data-ke-size="size16"><span style="color: #ffffff;">1.</span></p>
<p data-ke-size="size16"><span style="color: #ffffff;">2.</span></p>
</div>
</div>
좌측라인 인용구 1
좌측라인 인용구 1
1. 라인의 색상과 동일한 타이틀 글색
2. Enter키를 이용해 글줄을 추가할 수 있습니다.
3. https://galam.tistory.com/
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
<p data-ke-size="size18"><span style="color: #009a87; font-weight: bold;">좌측라인 인용구</span></p>
<p data-ke-size="size16">1. 라인의 색상과 동일한 타이틀 글색</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>코드 수정법
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
#009a87의 색상을 변경하시면 사이드바의 색상을 변경할 수 있습니다.
좌측라인 인용구 2
좌측라인 인용구 2
1. 본문의 색상과 동일한 타이틀 글색
2. Enter키를 이용해 글줄을 추가할 수 있습니다.
3. https://galam.tistory.com/
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #fe3e64;">
<p data-ke-size="size18"><span style="font-weight: bold;">좌측라인 인용구</span></p>
<p data-ke-size="size16">1. 본문의 색상과 동일한 타이틀 글색</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>
좌측라인 인용구 3
좌측라인 인용구 3
1. 가는 라인 인용구
2. https://galam.tistory.com/
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 5px solid #af019d;">
<p data-ke-size="size16">좌측라인 인용구</p>
<p data-ke-size="size16">1. 가는 라인 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>
노트스타일 밑줄 인용구 1
노트스타일 밑줄 인용구
본 인용구는 티스토리 설정의 차이로 밑줄이 밀려서 틀어질 수 있습니다.
PC에서는 정상적으로 보이지만 모바일에서는 밑줄이 밀려서 틀어질 수 있습니다.
밑줄이 밀려서 틀어질 경우 (#D4E6CE, #D4E6CE 1px, #ffffff 1px, #ffffff 2.0em)에서
2.0em의 치수를 줄이거나 늘려 조정하세요.
<div style="background-image: repeating-linear-gradient(#D4E6CE, #D4E6CE 1px, #ffffff 1px, #ffffff 1.8em);">
<p data-ke-size="size16"><b>노트스타일 인용구 안내</b></p>
<p data-ke-size="size16">본 인용구는 티스토리 설정의 차이로 밑줄이 밀려서 틀어질 수 있습니다.</p>
<p data-ke-size="size16">PC에서는 정상적으로 보이지만 모바일에서는 밑줄이 밀려서 틀어질 수 있습니다.</p>
<p data-ke-size="size16">밑줄이 밀려서 틀어질 경우 (#D4E6CE, #D4E6CE 1px, #ffffff 1px, #ffffff 2.0em)에서</p>
<p data-ke-size="size16">2.0em의 치수를 줄이거나 늘려 조정하세요.</p>
<p data-ke-size="size16"> </p>
</div>
노트스타일 밑줄 인용구 2
노트스타일 밑줄 인용구
본 인용구는 티스토리 설정의 차이로 밑줄이 밀려서 틀어질 수 있습니다.
PC에서는 정상적으로 보이지만 모바일에서는 밑줄이 밀려서 틀어질 수 있습니다.
밑줄이 밀려서 틀어질 경우 (#D4E6CE, #D4E6CE 1px, #ffffff 1px, #ffffff 2.0em)에서
1.8em의 치수를 줄이거나 늘려 조정하세요.
<div style="padding: 15px 20px; background-color: #f8f8f8; border-radius: 5px 5px; border: 1px solid #f1f1f1; line-height: 1.8;">
<div style="background-image: repeating-linear-gradient(#cfe2c8, #cfe2c8 1px, #f8f8f8 1px, #f8f8f8 1.8em);">
<p data-ke-size="size16"><b>노트스타일 인용구 안내</b></p>
<p data-ke-size="size16">본 인용구는 티스토리 설정의 차이로 밑줄이 밀려서 틀어질 수 있습니다.</p>
<p data-ke-size="size16">PC에서는 정상적으로 보이지만 모바일에서는 밑줄이 밀려서 틀어질 수 있습니다.</p>
<p data-ke-size="size16">밑줄이 밀려서 틀어질 경우 (#D4E6CE, #D4E6CE 1px, #ffffff 1px, #ffffff 2.0em)에서</p>
<p data-ke-size="size16">2.0em의 치수를 줄이거나 늘려 조정하세요.</p>
<p data-ke-size="size16"> </p>
</div>
</div>
소제목 서식 HTML 관련글 보러가기
'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록
'▸티스토리 이야기/인용구, 글상자 꾸미기' 카테고리의 글 목록
우리들의 일상 속 소소한 이야기를 나누고 티스토리 꾸미기 등도 함께 하는 공간이 되기를 바랍니다.
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
