티스토리 소제목 꾸미기

티스토리의 소제목을 긴 글에 대한 짧은 요약이라고 할 수 있습니다.

구글 seo는 H태그에 맞는 글형식을 좋아합니다. 이야기가 보고서 같이 간단히 요약된 정보를 원하죠.

오늘은 간단명료한 글 요약에 시각적 효과를 더해주는 티스토리 소제목 꾸미기를 알려드리겠습니다.

 

 

목차

 

 

티스토리 소제목 꾸미기

 

 

소제목 명령어의 의미

 

소제목 명령어가 참 길죠.

중요한 건 그것이 무슨 뜻인지 알 수가 없다는 것입니다. 

아래의 표를 보시고 각 명령어의 의미가 무엇인지 확인하시고 각자 개성에 맞게 조절하여 사용하세요.

 

테두리 및 선위치

구분	한줄직선	두줄직선	둥근점선	네모점선
테두리	solid	double	dotted	dashed
구분	왼쪽선	오른쪽선	윗선	아랫선
선위치	border-left	border-right	border-top	border-bottom

 

태그 및 속성

태그 및 속성	내용
border:5px solid #000000;	전체 테두리 : 선굵기,선스타일,색상
background-color:#0c0ae0	배경색
boder-top:#000000 1px solid; boder-bottom:#000000 1px solid;	위쪽선:#선색상, 선굵기,선스타일 아랫쪽선:#선색상, 선굵기,선스타일
border-left:#000000 1px solid; border-right:#000000 1px solid;	왼쪽선:#선색상, 선굵기,선스타일 오른쪽선:#선색상, 선굵기,선스타일
padding:10px 10px 10px 10px	박스 내부 여백 : 상, 하, 좌, 우
margin: 10px 10px	박스 외부 여백 : 상, 하 / 좌, 우
border-radius: 10px 10px 10px  10px	둥근 모서리:상, 하, 좌, 우
color; #0000e1;	문자색
letter-spacing: 1px	글자 사이 간격
line-height	줄간격
box-shadow: 10px 10px 10px 10px #000;	그림자:상, 하, 좌, 우 #색상

 

적용예시

폰트의 사용예시는 아래와 같습니다.

아래 이미지는 폰트의 서식입니다.

 

소제목 종류

 

색상의 위치를 함께 기록해 놓았으니 원하는 색상이 있으면 교체하여 사용하세요.

칼라칩과 그러데이션 칩 사이트는 색상 코드 및 그러데이션 코드에 있습니다.

 

 

style 01

border-left: 10px solid #980000;

style 01.txt

0.00MB

 

티스토리 소제목

style 02

왼쪽 바 : border-left-color: #980000 /  style 02 : border-left-color: #980000; color: #980000

style 02.txt

0.00MB

 

style 03

밑줄 : border-bottom: #980000 / 두꺼운 바 : border-left: #980000 

style 03.txt

0.00MB

 

style 04

밑색 : background: #FFD8 D8; / 왼쪽 바 : border-left: #980000

style 04.txt

0.00MB

 

 

 

style 05

 책갈피 : background-color: #980000;

style 05.txt

0.00MB

 

style 06

테두리점선 : border-color: #980000; / 바탕색 : background-color: #ffd8 d8;

style 06.txt

0.00MB

 

style 07

그러데이션 칩 색상 : "background-image: linear-gradient(45 deg, #ff9 a9 e 0%, #fad0 c4 99%, #fad0 c4 100%);

style 07.txt

0.00MB

 

style 08

상자배경 : "background-color: #fcf3 d4; / border: 5px solid #980000;

style 08.txt

0.00MB

 

style 09

배경색 : background: #980000; / 그림자: box-shadow: 1px 3px 3px 0px #FFD8 D8;

style 09.txt

0.00MB

 

style 10

바탕색 : "background-image: linear-gradient(45 deg, #ff9 a9 e 0%, #fad0 c4 99%, #fad0 c4 100%);

style 10.txt

0.00MB

 

style 11

바탕색 : "background: #980000;

style 11.txt

0.00MB

 

style 12

바탕 그러데이션 : "background: linear-gradient(to right, #a45 be1 0%, #219 ae3 100%);

style 12.txt

0.00MB

 

 

style 13

바탕 그러데이션 : "background: linear-gradient(#2575 fc, #6 a11 cb); color: #ffffff;

style 13.txt

0.00MB

 

 

sytle 14

윗폴더 : padding: 10px 100px 5px;50px; background: #050099 / 아래폴더 :;style="background: #D9 E5 FF; 

style 14.txt

0.00MB

 

 

색상 코드 및 그러데이션 코드

 

색상변경 코드는 아래의 색상을 찾아서 사용하세요.

 

색상칩

그러데이션 칩

 

소제목 사용법

 

소제목의 명령어를 서식에 저장해 놓고 필요시 사용하면 됩니다.

서식은 관리자 ▶ 콘텐츠 ▶ 서식관리 ▶ 서식 쓰기로 저장하고 html 모드에서 소제목텍스트를 복사하여 붙이세요.

저장 후 완료버튼을 클릭하면 언제든지 쉽고 편하게 쓸 수 있는 소제목 서식이 완료됩니다.

 

마무리

 

블로그의 내용을 간결하고 주제별로 단락 지어주는 것이 소제목의 역할이자 구글봇이 좋아하는 시스템입니다.

소제목 종류는 h2태그와 h3태그로 작성되어 있습니다.

사용 전 소제목의 태그를 확인하여 자신의 개성에 맞는 멋진 블로그를 만들어보세요.