티스토리 인용구 서식(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
- 책갈피 색상변경방법은 #bd59d4을 바꿔주면 됩니다.
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #bd59d4;">
책갈피 인용구
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #f9f9f9; padding: 10px 25px 10px 65px; margin: 0.5em 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #ef6c57;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #f9f9f9 transparent;"> </div>
<p data-ke-size="size18"><b>목차</b></p>
<p data-ke-size="size16">1. 가나다라</p>
<p data-ke-size="size16">2. 마바사아</p>
</div>
좌측 책갈피 인용구 2
책갈피 인용구
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #ffffff; padding: 10px 25px 10px 65px; margin: 0.5em 0; border: 1px solid #d9d9d9;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #bd59d4;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #ffffff transparent;"> </div>
<p data-ke-size="size18"><b>목차</b></p>
<p data-ke-size="size16">1. 가나다라</p>
<p data-ke-size="size16">2. 마바사아</p>
</div>
좌측 책갈피 인용구 3
책갈피 인용구
- 내용을 적어주세요.
- https://galam.tistory.com/
<div style="position: relative; background-color: #ffffff; padding: 10px 25px 10px 65px; margin: 0.5em 0; border: 1px solid #d9d9d9; border-radius: 10px;">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #01affd;"> </div>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #ffffff transparent;"> </div>
<p data-ke-size="size18"><b>목차</b></p>
<p data-ke-size="size16">1. 가나다라</p>
<p data-ke-size="size16">2. 마바사아</p>
</div>
좌측 책갈피 밑줄 인용구 1
책갈피 인용구
내용을 적어 주세요.
https://galam.tistory.com/
<div style="position: relative; background-color: #f9f9f9; padding: 5px 25px 5px 65px; margin: 0.5em 0; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #12b886;"> </div>
<p style="border-bottom: 2px solid #e3e3e3; font-weight: bold; font-size: 1.05em;" data-ke-size="size16">책갈피 인용구</p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #f9f9f9 transparent;"> </div>
</div>
좌측 책갈피 밑줄 인용구 2
책갈피 인용구
내용을 적어 주세요.
https://galam.tistory.com/
<div style="position: relative; background-color: #f9f9f9; padding: 5px 25px 5px 65px; margin: 0.5em 0; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #0098da;"> </div>
<p style="border-bottom: 2px solid #e3e3e3; font-weight: bold; font-size: 1.05em;" data-ke-size="size16"><span style="color: #0098da;">책갈피 인용구</span></p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #f9f9f9 transparent;"> </div>
</div>
우측 책갈피 밑줄 인용구 1
책갈피 인용구
내용을 적어 주세요.
https://galam.tistory.com/
<div style="position: relative; background-color: #fdfdfd; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #12b886;"> </div>
<p style="border-bottom: 2px solid #e3e3e3; font-weight: bold; font-size: 1.05em;" data-ke-size="size16">책갈피 인용구</p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fdfdfd transparent;"> </div>
</div>
우측 책갈피 밑줄 인용구 2
책갈피 인용구
내용을 적어 주세요.
https://galam.tistory.com/
<div style="position: relative; background-color: #fdfdfd; margin: 0.5em 0em; padding: 5px 65px 5px 25px; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #ff5c56;"> </div>
<p style="border-bottom: 2px solid #e3e3e3; font-weight: bold; font-size: 1.05em;" data-ke-size="size16">책갈피 인용구</p>
<p data-ke-size="size16">내용을 적어 주세요.</p>
<p data-ke-size="size16">https://galam.tistory.com/</p>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fdfdfd transparent;"> </div>
</div>
둥근 박스 인용구 1
- 글의 정렬은 티스토리 툴을 이용하여 좌, 우, 중앙 이동이 가능합니다.
- border-radius: 20px 20px;를 이용하여 박스의 테두리의 모서리 모양을 변경할 수 있습니다.
둥근 박스 인용구
- 내용을 적어주세요.
- 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;를 이용해 외부의 상, 하 / 좌, 우 여백을 조절할 수 있습니다.
둥근 박스 인용구
- 내용 -
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;를 이용해 외부의 상, 하 / 좌, 우 여백을 조절할 수 있습니다.
제목
- 내용을 적어주세요.
- 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;를 이용하여 박스의 모양을 변경할 수 있습니다.
제목
- 내용을 적어주세요.
<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.
2.
<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.
2.
<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-1
1. 내용
2. https://galam.tistory.com
<div style="padding: 5px 20px 20px 20px; margin: 0.5em 0; background-color: #eaeded; border-radius: 10px;">
<p data-ke-size="size18"><b>박스 인용구 1</b></p>
<div style="margin: 5px 0 0 0; border: 1px solid #a4a4a4; border-left: 5px solid #82b541; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div></div>
박스 인용구 1-2
박스 인용구 1-2
1. 내용
2. https://galam.tistory.com
<div style="padding: 5px 20px 20px 20px; margin: 0.5em 0; background-color: #f8d7da; border-radius: 10px;">
<p data-ke-size="size18"><b>박스 인용구 2</b></p>
<div style="margin: 5px 0 0 0; border: 1px solid #f4bec2; border-left: 5px solid #f5493d; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>
</div>
박스 인용구 1-3
박스 인용구 1-3
1. 내용
2. https://galam.tistory.com
<div style="padding: 5px 20px 20px 20px; margin: 0.5em 0; background-color: #bfeaff; border-radius: 10px;">
<p data-ke-size="size18"><b>박스 인용구 3</b></p>
<div style="margin: 5px 0 0 0; border: 1px solid #93b2b2; border-left: 5px solid #00a5fc; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>
</div>
박스 인용구 1-4
박스 인용구 1-4
1. 내용
2. https://galam.tistory.com
<div style="padding: 5px 20px 20px 20px; margin: 0.5em 0; background-color: #ffe8b6; border-radius: 10px;">
<p data-ke-size="size18"><b>박스 인용구 4</b></p>
<div style="margin: 5px 0 0 0; border: 1px solid #ff9a86; border-left: 5px solid #f5007b; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>
</div>
박스 인용구 2-1
박스 인용구 2-1
1. https://galam.tistory.com/
<div style="margin: 0.5em 0; padding: 20px; background-color: #cecece; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<div style="border: 1px solid #a4a4a4; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">박스 인용구 2</p>
<p data-ke-size="size16">1. https://galam.tistory.com/</p>
</div>
</div>
박스 인용구 2-2
박스 인용구 2-2
1. https://galam.tistory.com/
<div style="margin: 0.5em 0; padding: 20px; background-image: linear-gradient(#43ac20, #76df53); border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<div style="border: 1px solid #5a771e; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">박스 인용구 2</p>
<p data-ke-size="size16">1. https://galam.tistory.com/</p>
</div>
</div>
박스 인용구 2-3
박스 인용구 2-3
1. https://galam.tistory.com/
<div style="margin: 0.5em 0; padding: 20px; background-color: #08aeea; background-image: linear-gradient(#08AEEA 0%, #2AF598 100%); border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<div style="border: 1px solid #79a4af; padding: 10px; background-color: #fff; border-radius: 10px;">
<p data-ke-size="size16">박스 인용구 2</p>
<p data-ke-size="size16">1. https://galam.tistory.com/</p>
</div>
</div>
좌측라인 박스 인용구 3-1
박스 인용구 3-1
1. https://galam.tistory.com
<div style="margin: 0.5em 0; padding: 10px; border: 1px solid #a4a4a4; border-left: 5px solid #82b541; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p data-ke-size="size16">박스 인용구 3</p>
<p data-ke-size="size16">1. https://galam.tistory.com</p>
</div>
좌측라인 박스 인용구 3-2
박스 인용구 3-2
1. https://galam.tistory.com
<div style="margin: 0.5em 0; padding: 10px; border: 1px solid #a4a4a4; border-left: 5px solid #f24385; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p data-ke-size="size16">박스 인용구 3</p>
<p data-ke-size="size16">1. https://galam.tistory.com</p>
</div>
좌측라인 박스 인용구 3-3
박스 인용구 3-3
1. https://galam.tistory.com
<div style="margin: 0.5em 0; padding: 10px; border: 1px solid #a4a4a4; border-left: 5px solid #00b5e9; border-radius: 10px; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p data-ke-size="size16">박스 인용구 3</p>
<p data-ke-size="size16">1. https://galam.tistory.com</p>
</div>
좌측라인 밑줄 박스 인용구 3-4
박스 인용구 3-4
1. 내용
2. https://galam.tistory.com
<div style="margin: 0.5em 0; padding: 10px; 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: 1px solid #a4a4a4;" data-ke-size="size16">박스 인용구 3</p>
<p data-ke-size="size16">1. 내용</p>
<p data-ke-size="size16">2. https://galam.tistory.com</p>
</div>
폴더 인용구 1
내용
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;"><span style="position: relative; bottom: -10px; font-size: 1em;">폴더 소제목</span></div>
<div style="background: #fbd84b; 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>코드 수정법
<div style="width: 160px; height: 0px; ...이하생략>
1. width: 160px; 을 조절하여 폴더 상단 제목 부분의 크기를 조절할 수 있습니다.
2. width: 160px; 을 지우고 display: inline-block; 을 넣어 주시면 제목 부분의 글자 수를 늘릴 수 있습니다.
폴더 인용구 2
내용
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;"><span style="position: relative; bottom: -10px; font-size: 1em; color: #ffffff;">폴더 소제목</span></div>
<div style="background: #347ffd; 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>코드 수정법
<div style="width: 160px; height: 0px; ...이하생략>
1. width: 160px; 을 조절하여 폴더 상단 제목 부분의 크기를 조절할 수 있습니다.
2. width: 160px; 을 지우고 display: inline-block; 을 넣어 주시면 제목 부분의 글자 수를 늘릴 수 있습니다.
폴더 인용구 3
내용
https://galam.tistory.com/
<div style="width: 160px; height: 0px; margin: 0.5em 0em 0.05em 0em; padding: 0px 20px; border-bottom: 35px solid #f8c754; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="position: relative; bottom: -10px; font-size: 1em;">폴더 소제목</span></div>
<div style="border: 5px solid #fbd84b; 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>코드 수정법
<div style="width: 160px; height: 0px; ...이하생략>
1. width: 160px; 을 조절하여 폴더 상단 제목 부분의 크기를 조절할 수 있습니다.
2. width: 160px; 을 지우고 display: inline-block; 을 넣어 주시면 제목 부분의 글자 수를 늘릴 수 있습니다.
폴더 인용구 4
내용
https://galam.tistory.com/
<div style="width: 160px; height: 0px; margin: 0.5em 0em 0.05em 0em; padding: 0px 20px; border-bottom: 35px solid #0048c2; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="position: relative; bottom: -10px; font-size: 1em; color: #ffffff;">폴더 인용구</span></div>
<div style="border: 5px solid #4c8fff; 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>코드 수정법
<div style="width: 160px; height: 0px; ...이하생략>
1. width: 160px; 을 조절하여 폴더 상단 제목 부분의 크기를 조절할 수 있습니다.
2. width: 160px; 을 지우고 display: inline-block; 을 넣어 주시면 제목 부분의 글자 수를 늘릴 수 있습니다.
좌측라인 인용구 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
좌측라인 인용구
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>코드 수정법
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
#009a87의 색상을 변경하시면 사이드바의 색상을 변경할 수 있습니다.
좌측라인 인용구 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>코드 수정법
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
#009a87의 색상을 변경하시면 사이드바의 색상을 변경할 수 있습니다.
노트스타일 밑줄 인용구 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 2.0em);">
<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)에서
2.0em의 치수를 줄이거나 늘려 조정하세요.
<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 2.0em);">
<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>
공지 및 알림 인용구 1
1. 공지 및 알림 인용구
2. 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>본문박스 색상 수정
<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; → 폰트 사이즈 태그를 추가하면 폰트의 크기를 변경할 수 있습니다.
공지 및 알림 인용구 2
1. 공지 및 알림 인용구
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
1. 공지 및 알림 인용구
2. 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>
공지 및 알림 인용구 4 (응용편)
1. 공지 및 알림 인용구
2. 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: 25px;">공지 및 알림</span>
<p data-ke-size="size16">1. 공지 및 알림 인용구</p>
<p data-ke-size="size16">2. https://galam.tistory.com/</p>
</div>제목박스 모서리 수정
< span... color: #ffffff; border-radius: 25px;">공지 및 알림</span>
제목코드 끝 부분의 글꼴 색상코드 뒤에 border-radius: 25px;를 넣어주면 제목 박스의 모서리를 둥글게 만들 수 있습니다.
공지 및 알림 전체 태두리 인용구 5 (응용편)
1. 공지 및 알림 인용구
2. https://galam.tistory.com/
<div style="padding: 4px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #fff; border: 2px solid #959595;">
<span style="position: relative; background: linear-gradient(#313131, #959595); margin: 0px 5px; padding: 6px 15px; bottom: 15px; font-size: 1em; 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>본문박스 수정
<div style="padding: 4px 15px 10px 15px; margin: 1em 0em 0.5em 0em; background-color: #fff; border: 2px solid #959595;">
background-color: #fff; → 본문박스 배경색상응 화이트로 바꿔줍니다.
border: 2px solid #959595; → border-top: 2px solid;에서 -top를 지워주면 전체 태두리가 됩니다.
소제목 서식 HTML 관련글 보러가기
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1
소제목 서식 스타일 모음 #1 티스토리에서 서식을 사용하는 장점은 다음과 같습니다. 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성, 정보
galam.tistory.com
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 2
목차 소제목 서식 모음 #2 티스토리에서 서식을 사용하는 장점은 다음과 같습니다. 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성, 정보 전
galam.tistory.com
티스토리 소제목 꾸미기 | 두줄 소제목 서식(HTML) 스타일 모음
'두줄 소제목' 서식 스타일 모음 티스토리에서 서식을 사용하는 장점은 다음과 같습니다. 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성,
galam.tistory.com
티스토리 소제목 꾸미기 | 서식(HTML) 모음, 그라데이션 스타일
목차 그라데이션 소제목 서식 모음 티스토리에서 소제목 서식을 사용하는 장점은 다음과 같습니다. 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"
'▸ 티스토리 이야기 > └ 소제목 및 인용구 꾸미기' 카테고리의 다른 글
| 티스토리 꾸미기 | 말풍선 인용구 만들기 (1) | 2024.05.08 |
|---|---|
| 티스토리 소제목 꾸미기 | 서식(HTML) 모음, 그라데이션 스타일 (0) | 2024.03.22 |
| 티스토리 꾸미기 | 인용구 따옴표 닫기 만들기 (2) | 2024.03.15 |
| 티스토리 소제목 꾸미기 | 두줄 소제목 서식(HTML) 스타일 모음 (0) | 2024.03.13 |
| 티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 2 (21) | 2023.06.26 |
| 형광, 파스텔, 그라데이션 색상표와 컬러 코드 사이트 (0) | 2023.06.07 |
