티스토리 CSS, 서식을 활용한 소제목 꾸미기

 

요새 부쩍 티스토리에 재미가 들려서

 

이것 저것 공부를 많이 하고 있습니다.

 

확실히 네이버 블로그 보다는 꾸미는 재미도 있고,

 

(잘 못하면 지저분해 지지만..)

 

각자 개성이 뚜렷한 것 같습니다.

 

IT 일을 하고 있지만 웹쪽은 생소한데,

 

CSS,html 이게 다 무슨 말인지..

 

요새는 검색해서 안 나오는게 없잖아요?ㅋㅋ

 

그 중에 제가 하기 쉬웠고, 적용도 편했던 방법을

 

같이 공유해드리니 이웃님들도 한번 따라해보세요~!

 

하나씩 해낼 수록 블로그에 대한 애정이 뿜뿜합니다!!

 

 

티스토리 소제목이 뭐에요?

 

제목과 마찬가지로 소제목에도 키워드를 포함시키는 것이 검색 엔진 최적화(SEO) 에 도움이 된다고 합니다.

 

자신이 포스팅 하는 주제에 맞게 소제목도 연관 되게 작성해주는게 좋습니다.

 

또한 포스팅의 목차를 생성할 때 소제목 생성 해두면 목차 생성 시 편하게 할 수 있습니다.

 

 

 

이번에 작성하는 내용은 h3(제목2)에 해당하며 h2,h4는 편집할 때 코드 앞 부분에서 수정하면 됩니다.

 

소제목 꾸미는 방법

 

• CSS 활용
• HTML 
• 서식 사용

저는 서식을 활용한 소제목 꾸미기가 편해서 현재 그렇게 사용하고 있습니다.

 

전체적인 소제목 서식을 자동으로 변경하려면 CSS 또는 HTML을 수정하고

 

작성하는 글마다 다르게 소제목 서식을 변경하고 싶으면 티스토리-서식 기능을

 

사용하면 됩니다..

 

 

서식(html)을 이용한 티스토리 소제목 꾸미기

 

 

1. 블로그 관리 페이지에서 서식 관리 > 서식 쓰기 를 클릭해줍니다.

 

 

 

2. 기본모드에서 'HTML' 로 변경해줍니다.

 

3. 내용칸에 'HTML' 코드를 넣어 준 후 완료를 클릭합니다.

 

 

서식(html)을 이용한 소제목 사용법

 

 

1. 글쓰기에 들어가신 후 우측 상단 '더 보기(점 세개)' 를 선택 후 서식을 눌러 줍니다.

 

<h3 style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #FFC5FD 40%, transparent 40%); display: inline-block;" data-ke-size="size23">형광 밑줄 소제목</h3>

 

 

2. 방금 전 생성한 소제목 형광 밑줄을 선택 해줍니다.

 

3. 서식으로 소제목을 아래와 같이 불러왓습니다.

형광 밑줄 소제목

 

4. 마지막은 자신이 소제목을 클릭하셔서 제목을 본인이 원하는 내용으로 변경 하면 됩니다.

 

 

마무리

 

공부를 해보니 CSS를 활용해서 전체 적용을 하던 서식을 불러와서 개별로 적용을 하는 방식이든 다 장단점이 있는 것 같

 

습니다. 저는 서식을 활용해서 개별로 적용하는게 포스팅 꾸미기에는 더 좋았던 것 같네요.

 

그럼 활용 할 수 있는 예제 추가로 남겨드리고 포스팅 마무리하겠습니다.

 

 

소제목 서식 예제

 

아래 있는 예제와 소스를 활용해서 이쁘게 꾸며보세요 ^^

 

 

 

밑줄 소제목 1

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000; border-bottom: 4px #000 solid; font-weight: bold;" data-ke-size="size23">밑줄 소제목 1</h3>

 

밑줄 소제목 1

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000; border-bottom: 4px #f14c4c solid; font-weight: bold;" data-ke-size="size23">밑줄 소제목 1</h3>

밑줄 소제목 2

<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; color: #000; border-bottom: 8px #E68900 double; font-weight: bold;" data-ke-size="size23">밑줄 소제목 2</h3>

소제목 1

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #009a87; border-bottom: 2px #009a87 solid; font-weight: bold;" data-ke-size="size23">소제목 1</h3>

소제목 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>

소제목 1

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #fe3e64; border-left: 10px solid #fe3e64; border-bottom: 2px #fe3e64 solid; font-weight: bold;" data-ke-size="size23">소제목 1</h3>

소제목 1-1

<h3 style="padding: 0.6em 0.5em 0.6em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #0f2443; border-bottom: 2px solid #e5e5e5; font-weight: bold;" data-ke-size="size23">소제목 1-1</h3>

소제목 밑줄 각

<h3 style="border-left: 10px solid #fe3e64; border-bottom: 2px solid #fe3e64; border-top: 10px solid #fff; background: #fff; color: #fe3e64; font-weight: bold; margin: 0.5em 0em; padding: 0.2em 1em 0.4em 0.5em; border-radius: 0px 0px 0px 0px;" data-ke-size="size23">소제목 각 빨강</h3>

소제목 밑줄 각 파랑

<h3 style="border-left: 10px solid #4c8fff; border-bottom: 2px solid #4c8fff; border-top: 10px solid #fff; background: #fff; color: #000; font-weight: bold; margin: 0.5em 0em; padding: 0.2em 1em 0.4em 0.5em; border-radius: 0px 0px 0px 0px;" data-ke-size="size23">소재목 각 파랑</h3>

소제목 밑줄 각 검정

<h3 style="border-left: 10px solid #444; border-bottom: 2px solid #444; border-top: 10px solid #fff; background: #fff; color: #000; font-weight: bold; margin: 0.5em 0em; padding: 0.2em 1em 0.4em 0.5em; border-radius: 0px 0px 0px 0px;" data-ke-size="size23">소제목 각 검정</h3>

소제목 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>

소제목 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>

소제목 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>

소제목 3

<div style="background-color: #909200; margin-top: 20px; margin-bottom: 15px; padding: 5px 10px;">
<h3 style="border-left: #FAFABE 10px solid; padding: 0.2em 0.5em; margin: 0.2em 0em; color: #FAFABE; font-weight: bold;" data-ke-size="size23">소제목 3</h3>
</div>

소제목 3

<div style="background-color: #c7cfff; margin-top: 20px; margin-bottom: 15px; padding: 5px 10px;">
<h3 style="border-left: #1636f7 10px solid; padding: 0.2em 0.5em; margin: 0.2em 0em; color: #1636f7; font-weight: bold;" data-ke-size="size23">소제목 3</h3>
</div>

 

소제목 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>

소제목 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>

소제목 두줄 -1 

<h3 style="padding: 9px 15px; margin: 0.5em 0em; background-color: #ededed; border-style: solid; border-color: #bbb; border-width: 5px 0px 5px 0px; font-weight: bold;" data-ke-size="size23">box-shadow 소제목 8</h3>

소제목 두줄-2

<h3 style="padding: 9px 15px; margin: 0.5em 0em; background-color: #ededed; border-style: solid; border-color: #bbb; border-width: 5px 0px 5px 0px; font-weight: bold;" data-ke-size="size23">box-shadow 소제목 8</h3>

소제목 두줄-3

<h3 style="padding: 9px 15px; margin: 0.5em 0em; background-color: #fcf3d4; border-style: solid; border-color: #f6d258; border-width: 5px 0px 5px 0px; font-weight: bold;" data-ke-size="size23">box-shadow 소제목 8</h3>

소제목 두줄-4

<h3 style="padding: 9px 15px; margin: 0.5em 0em; background-color: #ececff; border-style: solid; border-color: #6c7ae0; border-width: 5px 0px 5px 0px; font-weight: bold;" data-ke-size="size23">소제목 4-4</h3>

소제목 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>

소제목 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>

그라데이션 소제목 8

<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">그라데이션 소제목 8</h3>

삼색 그라데이션 소제목 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>

삼색 그라데이션 소제목 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>

혼합색상 소제목 8

<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">혼합색상 소제목 8</h3>

둥근 모서리 소제목 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>

단색 스타일 소제목 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>

단색 스타일 소제목 8

<h3 style="background: #25abe5; color: #ffffff; font-weight: bold; margin: 1em 0em; padding: 15px 20px; border-radius: 25px 25px 25px 0px;" data-ke-size="size23">단색 스타일 소제목 8</h3>