[티스토리 필수 설정] 다양한 제목 서식 꾸미기

 

지난 포스팅에서 기본 제목 서식 설정에 대해 알아보았습니다. 기본 제목 서식 설정 및 적용 방법에 대해 모르시는 분들은 지난 포스팅을 참고해주시면 감사하겠습니다.

 

[티스토리 필수 설정] 기본 제목 (대제목, 중제목, 소제목) 서식 총정리

 

그럼 이번 포스팅에서는 기본 제목 서식 외에 활용할 수 있는 다양한 대제목 서식에 대해 알아보도록 하겠습니다. 해당 서식은 중제목, 소제목에도 적용 가능합니다. 

 

1. 대제목 - 부드러운 박스

 

<h2 data-ke-size="size26"><span style="border-radius: 5px; padding: 0.6em 1em; ① background: #F1F1F3; ② color: #526d82; ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>1. 대제목 - 부드러운 박스</b></span></h2>

 

아래 3가지에 대해 변경하셔서 활용하시면 됩니다. 

① background: #F1F1F3 - 배경 색상

② color: #526d82 - 글자 색상

③ font-family: 'Noto Sans Demilight' - 글꼴

 

2. 대제목 - 글자 앞 포인트 및 배경색

 

<h2 data-ke-size="size26"><span style="① background: #F9F7F6; ② border-left: 0.5em  solid #525FE1; padding: 0.5em; ③ color: #526d82; ④ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"> <b>2. 대제목 - 글자앞 포인트 및 배경색 </b></span></h2>

 

아래 4가지에 대해 변경하셔서 활용하시면 됩니다. 

① background: #F9F7F6 - 배경 색상

② border-left: 0.5em  solid #525FE1- 왼쪽바 두께 및 색상

③ color: #526d82 - 글자색

④ font-family: 'Noto Sans Demilight', 'Noto Sans KR' - 글꼴

 

 

 

 

3. 대제목 - 글자 앞 포인트 및 둥근 모서리

 

<h2 data-ke-size="size26"><span style="border-radius: 0 15px 15px 0; border-left: inset; padding: 0.6em; ① background: #EBEEF0; ② color: #526d82; ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>3. 대제목 - 글자 앞 포인트 및 둥근 모서리</b></span></h2>

 

다음 ① background (배경 색상), ② color (글자 색상), ③ font-family (글꼴)을 변경해서 사용하시면 됩니다. 

 

4. 대제목 - 둥근 모서리 

 

<h2 data-ke-size="size26"><span style="border-radius: 5em; padding: 0.5em; ① background: #dcf1fb; ②  color: #526d82; ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>4. 대제목 - 둥근 모서리&nbsp;</b></span></h2>

 

다음 ① background (배경 색상), ② color (글자 색상), ③ font-family (글꼴)을 변경해서 사용하시면 됩니다. 

 

5. 대제목 - 말풍선 1

 

<h2 data-ke-size="size26"><span style="border-radius: 15px 15px 15px 0; border-bottom: 5px ① solid #FF9EAA; padding: 0.5em; ② background: #FFD0D0; ③ color: #526d82; ④ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>5. 대제목 - 말풍선1 </b> </span></h2>

 

다음 ① solid (아래선 색상), ② background (배경 색상), ③ color (글자 색상), ④ font-family (글꼴) 을 변경해서 사용하시면 됩니다. 

 

6. 대제목 - 말풍선 2

 

<h2 style="color: #000000;" data-ke-size="size26"><span style="border-radius: 15px 15px 15px 0; border: 3px ① solid #FFAD5B; padding: 0.5em 0.6em; ; ② color: #526d82; ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>6. 대제목 - 말풍선 2</b></span></h2>

다음 ① solid (테두리 색상), ② background (배경 색상), ③ color (글자 색상), ④ font-family (글꼴) 을 변경해서 사용하시면 됩니다. 

 

7. 대제목 - 인덱스

 

<h2 data-ke-size="size26"><span style="border-radius: 15px 15px 0 0; border-bottom: 2px ① solid #B2E0F7; padding: 0.5em;  ② background: #D8EFFB; ③ color: #526d82; ④ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>7. 대제목 - 인덱스</b></span></h2>

 

다음 ① solid (아래선 색상), ② background (배경 색상), ③ color (글자 색상), ④ font-family (글꼴) 을 변경해서 사용하시면 됩니다. 

 

 

8. 대제목 - 버튼

 

<h2 data-ke-size="size26"><span style="border-radius: 5em; padding: 0.6em 1em; ① background: #F9F9F9; box-shadow: 1px 2px 10px rgba(0,0,0,0.2); margin-left: 5px; ② color: #526d82;  ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>8. 대제목 - 버튼</b></span></h2>

 

다음 ① background (배경 색상), ② color (글자 색상), ③ font-family (글꼴)을 변경해서 사용하시면 됩니다. 

 

9. 대제목 - 둥근 모서리 연장

 

<h2 style="border-radius: 5em; padding: 0.5em; ① background: #D8EFFB;" data-ke-size="size26"><span style="② color: #526d82; ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>9. 대제목 - 둥근 모서리 연장</b></span></h2>

 

다음 ① background (배경 색상), ② color (글자 색상), ③ font-family (글꼴)을 변경해서 사용하시면 됩니다. 

 

10. 대제목 - 박스

 

<h2 style="border: 5px ① solid #C9C9C9; padding: 0.3em 1em; border-radius: 2px;" data-ke-size="size26"><span style="② color: #526d82; ③ font-family: 'Noto Sans Demilight', 'Noto Sans KR';"><b>10. 대제목 - 박스</b></span></h2>
<p data-ke-size="size16">&nbsp;</p>

다음 ① solid (테두리 색상), ② color (글자 색상), ④ font-family (글꼴)을 변경해서 사용하시면 됩니다. 

 

이상으로 다양한 제목 서식에 대해 알아보았습니다. 위의 서식을 중제목으로 적용하고 싶으시면 <h2>를 <h3>로, date-ke-size="size23"으로 변경하셔서 적용하시면 됩니다. 그리고 HTML 코드는 아래에서 다운 받으시면 됩니다. 

 

다양한 제목 서식.txt

0.00MB

 

서식들을 잘 활용하셔서 멋진 블로그를 만드시는 데 도움이 되면 좋겠습니다. 

 

 

---

방문해주셔서 감사드립니다. 

이글이 도움이 되셨다면, 공감, 댓글, 구독 부탁드릴께요!