본문 바로가기
티스토리 정보

티스토리 블로그 서식 만들기

by ※&★*◈ 2021. 12. 28.
반응형

 

티스토리 블로그 서식 만들기

 

안녕하세요~오늘은 티스토리 블로그 서식 만드는 방법에 대해 알아보려고 합니다. 한 가지 주제를 가지고 글을 작성할 때 글의 내용도 중요하지만 '얼마나 깔끔하게 글을 전달하는가?'도 중요하다고 생각해요. 글을 깔끔하게 전달하는 방법에는 여러 가지가 있겠지만 저는 서식을 이용하여 글을 보기 좋게 작성하는 방법을 알려드리겠습니다.

 

 

● HTML을 사용하여 서식 만들기

 

1. 티스토리 블로그 - 관리 - 콘텐츠 - 서식관리 - 서식 쓰기-로 들어가 줍니다.

2. 기본 모드를 HTML로 바꿔줍니다.

3. 아래 코드를 복사하여 넣어줍니다.

 

 

주제어</h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #8080ff 2px solid; margin: 5px 0px; border-left: #8080ff 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;">

 

 

4. 다시 기본 모드로 들어가 줍니다. 기본 모드에서 아래와 같은 서식이 만들어졌다면 [완료] 버튼을 누르고 나가주면 됩니다.

 

이제 포스팅을 할 때 위의 서식을 이용하여 글의 제목을 강조할 수 도 있고 글을 깔끔하게 작성할 때 도움이 될 거예요. 위의 서식을 포스팅에 사용하기 위해서는 티스토리 블로그 - 글쓰기 - 더보기 (점 3개) - 서식을 눌러주면 필요한 서식이 글쓰기 화면에 나타날 거예요. 

 

● 서식 색깔 바꾸는 방법

 

저는 일단 연보라색으로 서식을 만들었는데 다른 색깔로 만들고 싶다면 아래의 색상코드에서 마음에 드는 색의 코드를 복사한 뒤 HTML에 넣어 수정해 주시면 됩니다.

 

컬러 헥스 색상 코드 (color-hex.com)

 

Color Hex Color Codes

Color Hex Color Codes Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selecte

www.color-hex.com

 

그럼 어느 부분에 넣어줘야 할까요? 

 

<h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom#8080ff 2px solid; margin: 5px 0px; border-left#8080ff 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;">주제어</h3>

 

처음에 복사 붙여넣기한 코드입니다.

 

border-bottom = 아래 밑줄 색상

border-left: = 왼쪽 바 색상

 

만약 색을 변경하고 싶다면 #8080ff 부분을 원하는 색의 코드를 넣어준 뒤 저장하시면 됩니다. 크게 어렵지 않죠? 한 번 따라 해 본 다음 글에 적용하여 글을 써보면 훨씬 가독성이 좋은 글이 완성되어 있을 거예요. 그럼 모두 좋은 하루 보내세요.

반응형

댓글