반응형
제목1, 제목 2 서식들입니다.
개인적으로 골라서 사용하기 편하게 모아놓은 것으로, 필요하신것들은 코드 복사해서 사용해주세요.
개인적으로 골라서 적용하기 쉽게 모아놓은 것들이고, 자주 사용할만것들은 서식에 적용해놓고 사용하시면 편해요~
다른 소제목들만 모아놓은 것은 아래 포스팅 참고해주세요.
서식 만들기 : 각 포스팅에 쉽게 적용
원하는 포스팅과 위치에 적용하기 위해 서식을 만듭니다.
서식은 글 작성시 자주 사용하는 문구나 기능들을 간편하게 불러와 적용할 수 있도록 해주는 기능입니다.
① 블로그관리 > 콘텐츠 > 서식관리
② 서식쓰기
③ 편집기 모드 : 기본모드 → HTML로 변환
④ 코드 붙여 넣기
자주 사용하고자 하는 디자인 코드를 붙여넣습니다.
● 참고
- h2 : 제목1
- h3 : 제목2
- h4 : 제목3
⑤ 제목을 정하고 저장합니다. 끝!!!
HTML 코드 상세
● 테두리 적용
| 직선 | 네모 점선 | 동그란 점선 | 두줄선 |
| solid | dashed | dotted | double |
● 선위치
| 왼쪽 선 | 오른쪽 선 | 위쪽 선 | 아래쪽 선 |
| border-left | border-right | border-top | border-bottom |
● 태그, 속성
| 태그 및 속성 | 설명 |
| color: #8568e1; | 글꼴색 |
| background-color: #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; | 그림자 효과: 상 / 하 / 좌 / 우 #색상 |
밑줄 소제목 1
<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000000; border-bottom: 4px #000000 solid; font-weight: bold;" data-ke-size="size23">밑줄 소제목 1</h3>
<p data-ke-size="size16"> </p>
밑줄 소제목 1
<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000000; border-bottom: 4px #f14c4c solid; font-weight: bold;" data-ke-size="size23">밑줄 소제목 1</h3>
<p data-ke-size="size16"> </p>
밑줄 소제목 2
<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000000; border-bottom: 8px #E68900 double; font-weight: bold;" data-ke-size="size23">밑줄 소제목 2</h3>
<p data-ke-size="size16"> </p>
소제목1
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000000; border-left: 10px solid #009a87; border-bottom: 2px #009a87 solid; font-weight: bold;" data-ke-size="size23">소제목1</h3>
<p data-ke-size="size16"> </p>
소제목 1
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #2c6ed5; border-left: 10px solid #2c6ed5; border-bottom: 2px #2c6ed5 solid; font-weight: bold;" data-ke-size="size23">소제목 1</h3>
<p data-ke-size="size16"> </p>
소제목2
<h3 style="padding: 0.4em 1em 0.4em 0.5em; background: #e9efed; margin: 0.5em 0em; color: #000000; border-left: #00a667 10px solid; font-weight: bold;" data-ke-size="size23">소제목2</h3>
<p data-ke-size="size16"> </p>
소제목2
<h3 style="border-left: #ffa037 10px solid; padding: 0.5em 0.5em; background: #fcf3d4; margin: 0.5em 0em; color: #ffa037; font-weight: bold;" data-ke-size="size23">소제목2</h3>
<p data-ke-size="size16"> </p>
소제목2
<h3 style="padding: 0.4em 1em 0.4em 0.5em; background: #fde6ec; margin: 0.5em 0em; color: #fe3e64; border-left: #fe3e64 10px solid; font-weight: bold;" data-ke-size="size23">소제목2</h3>
<p data-ke-size="size16"> </p>
소제목4
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #37421d; border-left: 10px solid #638418; border-bottom: 2px #638418 solid; border-right: 2px #638418 solid; border-top: 2px #638418 solid; font-weight: bold;" data-ke-size="size23">소제목4</h3>
<p data-ke-size="size16"> </p>
소제목4
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #fa4251; border-left: 10px solid #FF928A; border-bottom: 2px #FF928A solid; border-right: 2px #FF928A solid; border-top: 2px #FF928A solid; font-weight: bold;" data-ke-size="size23">소제목4</h3>
<p data-ke-size="size16"> </p>
소제목5
<h3 style="padding: 0.3em 0.5em 0.3em 0.5em; margin: 0.5em 0em; color: #e5173b; border-left: 10px solid #e5173b; font-weight: bold;" data-ke-size="size23">소제목5</h3>
<p data-ke-size="size16"> </p>
소제목5
<h3 style="padding: 0.3em 0.5em 0.3em 0.5em; margin: 0.5em 0em; color: #000000; border-left: 10px solid #5b63fb; font-weight: bold;" data-ke-size="size23">소제목5</h3>
<p data-ke-size="size16"> </p>
티스토리 소제목 꾸미기
두줄 소제목 스타일 서식 5
<h3 style="box-sizing: border-box; border-width: 10px; border-left-style: solid; border-left-color: #549325; color: #549325; padding: 1px 10px; letter-spacing: 0px; 0.5em 0em; line-height: 0.8;" data-ke-size="size23"><span style="font-size: 12pt; font-family: 'Noto Serif KR'; color: #000000;">티스토리 소제목 꾸미기<br /><br /></span><b>두줄 소제목 스타일 서식 5</b></h3>
<p data-ke-size="size16"> </p>
티스토리 소제목 꾸미기
두줄 소제목 스타일 서식 5
<h3 style="box-sizing: border-box; border-width: 10px; border-left-style: solid; border-left-color: #ff703a; color: #ff703a; padding: 1px 10px; letter-spacing: 0px; margin: 0.5em 0em; line-height: 0.8;" data-ke-size="size23"><span style="font-size: 12pt; color: #000000;">티스토리 소제목 꾸미기<br /><br /></span><b>두줄 소제목 스타일 서식 5</b></h3>
<p data-ke-size="size16"> </p>
티스토리 소제목 꾸미기
두줄 소제목 스타일 서식 5
<h3 style="box-sizing: border-box; border-width: 10px; border-left-style: solid; border-left-color: #fe3e64; color: #fe3e64; background: #fde6ec; padding: 10px 10px; letter-spacing: 0px; margin: 0.5em 0em; line-height: 0.8;" data-ke-size="size23"><span style="font-size: 12pt; color: #000000;"><span style="font-family: 'Noto Serif KR';">티스토리 소제목 꾸미기</span><br /><br /></span><b>두줄 소제목 스타일 서식 5</b></h3>
<p data-ke-size="size16"> </p>
티스토리 소제목 꾸미기
두줄 소제목 스타일 서식 5
<h3 style="box-sizing: border-box; border-width: 10px; border-left-style: solid; border-left-color: #414e92; border-bottom: 1px solid #d9d9d9; color: #414e92; padding: 1px 10px 10px 10px; letter-spacing: 0px; margin: 1em 0em; line-height: 0.8;" data-ke-size="size23"><span style="font-size: 12pt; font-family: 'Noto Serif KR'; color: #000000;">티스토리 소제목 꾸미기<br /><br /></span><b>두줄 소제목 스타일 서식 5</b></h3>
<p data-ke-size="size16"> </p>
소제목6
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000000; border-style: dashed; border-width: 1px, 1px, 1px, 1px; border-color: #A9A9F5; font-weight: bold;" data-ke-size="size23">소제목6</h3>
<p data-ke-size="size16"> </p>
소제목6
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000000; border-style: dashed; border-width: 1px, 1px, 1px, 1px; border-color: #A9A9F5; background-color: #dce5fb; font-weight: bold;" data-ke-size="size23">소제목6</h3>
<p data-ke-size="size16"> </p>
소제목 7
<h3 style="border-radius: 15px 0px 15px 0px; padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border: 5px solid #f6d258; background-color: #fcf3d4; font-weight: bold;" data-ke-size="size23">소제목 7</h3>
<p data-ke-size="size16"> </p>
그라데이션 소제목
<h3 style="background: linear-gradient(to right,#6a11cb 0%, #2575fc 100%); color: #fff; font-size: 22px; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 1px 20px 1px;" data-ke-size="size23">그라데이션 소제목</h3>
<p data-ke-size="size16"> </p>
삼색 그라데이션 소제목 8
<h3 style="background: linear-gradient(-225deg, #69EACB 0%, #EACCF8 50%, #6654F1 100%); color: #000000; font-size: 22px; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 1px 20px 1px;" data-ke-size="size23">삼색 그라데이션 소제목 8</h3>
<p data-ke-size="size16"> </p>
삼색 그라데이션 소제목 8
<h3 style="background: linear-gradient(to right,#f4d03f, #fffb89, #16a085); color: #000000; font-size: 22px; font-weight: bold; margin-top: 30px; margin-bottom: 15px; padding: 15px 20px; border-radius: 25px 25px 25px 1px;" data-ke-size="size23">삼색 그라데이션 소제목 8</h3>
<p data-ke-size="size16"> </p>
혼합색상 소제목
<h3 style="background: linear-gradient(to right,#3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%); color: #ffffff; font-size: 22px; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 20px 20px 1px;" data-ke-size="size23">혼합색상 소제목</h3>
<p data-ke-size="size16"> </p>
둥근 모서리 소제목 8!
<h3 style="background: linear-gradient(to right,#00a0e9, #e4007f); color: #fff; font-size: 22px; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 20px 20px 20px;" data-ke-size="size23">둥근 모서리 소제목 8!</h3>
<p data-ke-size="size16"> </p>
세로 그라데이션 소제목
<h3 style="background: linear-gradient(#2575fc, #6a11cb); color: #fff; font-size: 22px; font-weight: bold; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 20px 0px 0px;" data-ke-size="size23">세로 그라데이션 소제목</h3>
<p data-ke-size="size16"> </p>
단색 스타일 소제목 8
<h3 style="background: #fbd84b; color: #000000; font-weight: bold; margin: 1em 0em; padding: 15px 20px; border-radius: 20px 0px 20px 0px;" data-ke-size="size23">단색 스타일 소제목 8</h3>
<p data-ke-size="size16"> </p>
box-shadow 소제목 8
<h3 style="background: #bee9b4; color: #000000; font-weight: bold; margin: 1em 0em; padding: 15px 20px; border-radius: 25px 25px 25px 0px; box-shadow: 1px 3px 3px 0px #469789;" data-ke-size="size23">box-shadow 소제목 8</h3>
<p data-ke-size="size16"> </p>
box-shadow 소제목 8
<h3 style="background-color: #fcf3d4; padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border: 5px solid #f6d258; border-radius: 15px 15px 15px 0px; font-weight: bold; box-shadow: 5px 5px 5px #999;" data-ke-size="size23">box-shadow 소제목 8</h3>
<p data-ke-size="size16"> </p>
폴더 스타일 소제목
<div style="display: inline-block; border-radius: 20px 35px 0px 0px; padding: 10px 100px 5px 50px; background: #f8c754; margin: 30px 0px 0px 0px;"> </div>
<h3 style="background: #fbd84b; color: #000000; font-size: 22px; font-weight: bold; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 10px 20px; border-radius: 0px 20px 0px 0px;" data-ke-size="size23">폴더 스타일 소제목</h3>
<p data-ke-size="size16"> </p>
폴더 스타일 소제목
<div style="display: inline-block; border-radius: 20px 35px 0px 0px; padding: 10px 100px 5px 50px; background: #0271c5; margin: 30px 0px 0px 0px;"> </div>
<h3 style="background: #25abe5; color: #ffffff; font-size: 22px; font-weight: bold; margin-top: 0px; margin-bottom: 15px; padding: 15px 20px 10px 20px; border-radius: 0px 20px 0px 0px;" data-ke-size="size23">폴더 스타일 소제목</h3>
<p data-ke-size="size16"> </p>
책갈피 소제목
<div style="position: relative; background-color: #ffffff; padding: 0px 25px 0px 60px; 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>
<h3 data-ke-size="size23"><b>책갈피 소제목</b></h3>
</div>
<p data-ke-size="size16"> </p>
반응형
'티스토리, 애드센스' 카테고리의 다른 글
| 애드센스 Ads.txt 파일 문제 해결 (0) | 2024.03.28 |
|---|---|
| 애드센스 글쓰기 42일째, 수익은 얼마나? (2) | 2024.03.28 |
| 애드센스 승인, 중복계정 해결하고 4번만에 승인됨 (0) | 2024.03.28 |
| [티스토리 자동 목차(TOC)] 쉽게 만들기(3분), 포스팅별 적용 (8) | 2024.03.28 |
| 티스토리 소제목 서식(HTML) 모음 (0) | 2024.03.28 |
