본문 바로가기
INTERESTS/알찬 일상

티스토리 블로그 포스팅 제목, 소제목 서식 적용하기(html 코드, 쉬움!)

by deardays 2020. 6. 5.
반응형

안녕하세요! 디어입니다.

요즘은 티스토리 블로거들의 글을 보면서, 본문 안의 소제목에 별도의 서식을 넣어주면 가독성이 훨씬 좋다는 것을 느꼈어요!
그래서 디어도 찾아봤습니다.

자주 쓰이는 스타일 2가지의 html 코드, 티스토리 <서식> 활용으로 포스팅 시 간편하게 사용하는 방법을 알아볼게요!

 

1. A타입, B타입 서로 다른 스타일!

 

우선 A타입!

티스토리 블로그에서 많이 쓰이는 스타일이죠!

테두리는 SOLID, 테두리 & 글자 색상은 #656665, 배경 색을 #f4ebf5 로 했습니다!

solid

 

다음으로는 B타입!

-모든 것을 동일하되, 테두리만 바꾼 것인데요!

-코드의 border-style: 뒤에 나오는 것을 선택하셔서 바꾸시면 됩니다.

-타입을 9가지: none | dotted | dashed | solid | double | groove | ridge | inset | outset 

 

어떤 게 제일 마음에 드나요?

 

코드 정보는 html 이라, 하단에 별도 첨부하도록 하겠습니다!
CTRL + F 찾기를 이용해 테두리 스타일 none | dotted | dashed | solid | double | groove | ridge | inset | outset | 중 마음에 드는 것을 찾은 후,
<div>에서 </div> 까지 복사하셔서 사용하면 돼요 :)

 

none

 

dotted

 

dashed

 

solid

 

double

 

groove

 

ridge

 

inset

 

outset

다운 받으실 분들은 아래 파일을 클릭해주세용! 

deardays 소제목 서신 HTML 코드.txt
0.00MB

 

2. 색상표

 

디어는 글자 색상은 #656665, 배경 색을 #f4ebf5로 통일했는데요!

이건 여러분의 취향에 맞춰서 바꾸시면 됩니다 

딱 색을 집어서 선택할 수 있는 무료 사이트 <HTML COLOR CODES>를 추천해드려요

 

htmlcolorcodes.com/

 

HTML Color Codes

Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.

htmlcolorcodes.com

HTML 색상 코드를 알려주는 HTML COLOR CODES

 

위와 같이 내가 원하는 색을 클릭하면 상단 HEX에 HTML 코드가 나옵니다! #부분부터 복사하시면 돼요!

 

border-color : 테두리 색

background-color: 배경 색, 채우기

font-size: 14pt; color: 여기에 폰트 색을 입력 

 

3. 티스토리 서식 적용하기

 

마지막으로 등록해둔 서식을 포스팅 시 간편하게 사용하기 위해 <서식> 등록을 해야죠!

 

블로그 관리 화면에서 콘텐츠-서식 관리

블로그 관리 화면에서 콘텐츠-서식 관리로 이동할게요.

우측 상단의 <서식 쓰기>를 클릭, HTML 편집 모드에서 선택하신 코드를 입력합니다.

 

소제목 A타입 서식 HTML 코드

디어는 A타입 하나, B타입-ridge 이렇게 두개를 저장할 거예요!

각각 작성해주시면 됩니다.

그럼 아래와 같이 서식 목록이 생기겠죠?

디어가 만든 소제목용 서식 목록

이제 포스팅을 해볼까요?

바로 이 글을 쓰면서 캡쳐해봤습니다.

글쓰기- ... 클릭- 서식

(이건 스킨을 뭘 쓰는지에 따라 조금씩 차이를 보일 수 있는데, 글 편집 도구 창에서 <서식>을 찾아주세요!

 

포스팅 시 바로 미리 작성해둔 서식을 사용할 수 있습니다!

방금 만들어둔 서식 A타입, B타입을 클릭해보면, 각각 아래와 같이 포스팅 화면에 뜹니다!

 

A타입

solid

B타입

ridge

 

끝!

그럼 안에 있는 글 내용만 제목에 맞게 편집하면 됩니다!

 

어렵지 않죠?

 

이렇게 마무리 멘트를 넣기에도 딱입니당!

 

도움이 되는 글이었다면 공감 하트 와 구독하기를 눌러주세요 :)

더 유익한 글로 보답하겠습니다 - from 디어

 

 

모두 잘 활용하시길 바라요 :)

 

반응형

댓글