목차
반응형
본문 제목 서식 모음 # 6
제목은 제목구분이지만, 티스토리에서 글작성 하실 때
사용하면 좋은 서식모음이라고 생각하시고 보시면 좋겠습니다.
제목에 사용하셔도 좋고, 여러분들이 편하신 데로 사용하세요.
그럼 디자인을 한번 보시도록 하겠습니다.
대각선 둥근 라인
1.
2.
<div style="padding: 15px 20px; 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>
<p data-ke-size="size16"> </p>대각선 둥근 라인 2
1.
2.
<div style="padding: 15px 20px; border-radius: 20px 0px; border: 2px solid #000; 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>
<p data-ke-size="size16"> </p>기본 사각 형
1.
2.
<div style="padding: 15px 20px; 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>
<p data-ke-size="size16"> </p>삼색 박스형
1.
2.
<div style="padding: 20px 20px; 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>
<p data-ke-size="size16"> </p>삼색 박스형 2
1.
2.
<div style="padding: 20px 20px; 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>
<p data-ke-size="size16"> </p>좌측라인 인용구
1. 라인의 색상과 동일한 타이틀 글색
2. https://moon65.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://moon65.tistory.com/</p>
</div>
<p data-ke-size="size16"> </p>좌측라인 인용구 2
1. 본문의 색상과 동일한 타이틀 글색
2. https://moon65.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://moon65.tistory.com/</p>
</div>
<p data-ke-size="size16"> </p>깔끔하고 가독성 있는 글을 작성하기 좋은
템플릿 같은 느낌의 서식입니다.
많은 분들에게 도움이 되었으면 좋겠습니다.
기타 문의 사항이 있으시면 댓글 남겨주세요.
반응형
'IT인터넷' 카테고리의 다른 글
| 일단 저장해 두면 언제든 도움이 되는 사이트 Top8 (0) | 2023.07.31 |
|---|---|
| 티스토리 게시글 카테고리 URL 리디렉션으로 관리 (0) | 2023.07.31 |
| 티스토리 블로그 동영상 반응형으로 설정하는 방법 (0) | 2023.07.31 |
| 서치콘솔 다른 4xx 문제로 인해 차단됨 오류 해결 (0) | 2023.07.25 |
| 티스토리 본문 작성 스타일 제목구분 서식모음 # 5 (0) | 2023.07.24 |
| 티스토리 본문 작성 제목 서식모음 # 4 (0) | 2023.07.23 |