반응형
포스팅을 하면서 사용하고 싶은 소제목 스타일들을 모아놨습니다.
그때그때마다 사용하고 싶은 것들이 달라서요~
개인적으로 골라서 적용하기 쉽게 모아놓은 것들이고, 자주 사용할만것들은 서식에 적용해놓고 사용하시면 편해요~
서식 만들기 : 각 포스팅에 쉽게 적용
원하는 포스팅과 위치에 적용하기 위해 서식을 만듭니다.
서식은 글 작성시 자주 사용하는 문구나 기능들을 간편하게 불러와 적용할 수 있도록 해주는 기능입니다.
① 블로그관리 > 콘텐츠 > 서식관리
② 서식쓰기
③ 편집기 모드 : 기본모드 → 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; | 그림자 효과: 상 / 하 / 좌 / 우 #색상 |
깔끔한 밑줄 스타일
<h3 data-ke-size="size23"><span style="border-bottom: 5px solid #f54f3d; padding: 0 0 0 0.2em; font-weight: bold;">깔끔한 밑줄 스타일</span></h3>
<p data-ke-size="size16"> </p>
두꺼운 밑줄 스타일
<h3 data-ke-size="size23"><span style="border-bottom: 12px solid #dcf1fb; padding: 0 0 0 0.2em; font-weight: bold;">두꺼운 밑줄 스타일</span></h3>
<p data-ke-size="size16"> </p>
소제목
<h3 style="border-bottom: 2px solid #ef6c57; text-align: left; color: #ef6c57; font-weight: bold;" data-ke-size="size23"><span style="background-color: #fff; position: relative; padding: 10px 15px 10px 0px; bottom: -19px;">소제목은 이곳 입력</span></h3>
<p data-ke-size="size16"> </p>
소제목
<h3 style="border-bottom: 2px solid #9b80ce; text-align: center; color: #9b80ce; font-weight: bold;" data-ke-size="size23"><span style="background-color: #fff; position: relative; padding: 10px 15px; bottom: -19px;">소제목은 이곳에 입력</span></h3>
<p data-ke-size="size16"> </p>
라인 소제목 3
<h3 style="border-bottom: 5px solid #00b26f; text-align: left; color: #00b26f; font-weight: bold;" data-ke-size="size23"><span style="display: inline-block; border-radius: 15px 15px 0px 0px; background-color: #e5efec; position: relative; padding: 10px 20px 5px 15px; bottom: 0px;">라인 소제목 3</span></h3>
<p data-ke-size="size16"> </p>
라인 소제목 3
<h3 style="border-bottom: 5px solid #ffd646; text-align: left; color: #434343; font-weight: bold;" data-ke-size="size23"><span style="display: inline-block; border-radius: 15px 15px 0px 0px; background-color: #ffeead; position: relative; padding: 10px 20px 5px 15px; bottom: 0px;">라인 소제목 3</span></h3>
<p data-ke-size="size16"> </p>
글자 그라데이션 스타일
<h3 style="background: linear-gradient(to right, #5673bd, #ffa7a3, #A7A3FF, #671cc4, #5673bd, #ffa7a3, #A7A3FF, #671cc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;" data-ke-size="size23">글자 그라데이션 스타일</h3>
<p data-ke-size="size16"> </p>
소제목입니다.
<h3 data-ke-size="size23"><span style="border-radius: 0px 20px 20px 0px; padding: 0.5em 1em 0.5em 0.5em; background: #fdf2f1; border-left: 10px solid #f54f3d; margin: 0.5em 0em; color: #f54f3d; font-weight: bold;">소제목입니다.</span></h3>
<p data-ke-size="size16"> </p>
소제목 B스타일
<h3 style="display: inline-block; padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #8568e1; border-left: 10px solid #8568e1; background-color: #f2f2f2; border-radius: 0px 20px 20px 0px; font-weight: bold;" data-ke-size="size23">소제목 B스타일</h3>
<p data-ke-size="size16"> </p>
말풍선 테두리
<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; border: 3px solid #FFAD5B; padding: 0.5em 1em 0.5em 0.8em; color: #ff8000; font-weight: bold;" data-ke-size="size23">말풍선 테두리</h3>
<p data-ke-size="size16"> </p>
말풍선 테두리
<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; border: 3px solid #846add; padding: 0.5em 1em 0.5em 0.8em; color: #846add; font-weight: bold;" data-ke-size="size23">말풍선 테두리</h3>
<p data-ke-size="size16"> </p>
box-shadow 말풍선 테두리
<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; padding: 0.5em 1em 0.5em 0.8em; border: 1px solid #00AFAE; background: #D8FFFF; box-shadow: 2px 2px 2px 0px #00AFAE; color: #00afae; font-weight: bold;" data-ke-size="size23">box-shadow 말풍선 테두리</h3>
<p data-ke-size="size16"> </p>
box-shadow 말풍선 테두리
<h3 style="display: inline-block; border-radius: 15px 15px 15px 0; padding: 0.5em 1em 0.5em 0.8em; border: 2px solid #FF9800; box-shadow: 2px 3px 3px 0px #FF9800; color: #000000; font-weight: bold;" data-ke-size="size23">box-shadow 말풍선 테두리</h3>
<p data-ke-size="size16"> </p>
깔끔한 인텍스 스타일
<h3 data-ke-size="size23"><span style="border-radius: 15px 15px 0 0; border-bottom: 5px solid #B2E0F7; padding: 0.5em 1em; background: #D8EFFB; font-weight: bold;">깔끔한 인텍스 스타일</span></h3>
<p data-ke-size="size16"> </p>
버튼 스타일
<h3 data-ke-size="size23"><span style="border-radius: 5em; padding: 0.5em 1em; background: #F2F2F2; box-shadow: 0.2em 0.15em 0.3em #999; margin-left: 5px; font-weight: bold;">버튼 스타일</span></h3>
<p data-ke-size="size16"> </p>
내용
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>
내용
1.
2.
<div style="padding: 15px 20px; 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>
<p data-ke-size="size16"> </p>
제목
- 내용 -
- border-radius: 20px 20px; 를 이용하여 박스 모양 변경 가능
<div style="border: 10px solid #ef6c57; border-radius: 20px 20px; 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: center; font-weight: bold;" data-ke-size="size18">제목</p>
<p style="text-align: center;" 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>
<p data-ke-size="size16"> </p>
제목
- 내용을 적어주세요.
<div style="border: 10px solid #adb1f2; border-radius: 0px 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>
<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. 라인의 색상과 동일한 타이틀 글색
<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>
</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) 모음 2 (0) | 2024.03.28 |
