[티스토리] 블로그 글쓰기, 소제목 서식 꾸미기와 적용

블로그 글쓰기에서 소제목의 필요성

 

모든 문서의 작성에서 소제목의 역할은 글의 구조를 명확히 하고, 내용을 요약하며, 흥미를 유발하는 역할을 합니다. 구독자의 입장에서도  어떤 부분에 대한 글인지 파악할 수 있어 가독성을 증가시켜 주기 때문에 소제목은 중요합니다. 이와 함께 소제목이 눈에 쏙쏙 들어오면 글도 깔끔해 보이고 구독자가 안정감을 느낄 수 있으며, 다른 포스팅까지 이어질 수 있다는 점도 노려 보며 블로그 글을 작성하시는 분들은 검색 엔진 최적화를 위해서도 도움이 되겠습니다.

 

 

소제목 꾸미기

이제 소제목이 필요하고 눈으로 구분하기 좋게 꾸미면 좋겠다는 마음이 들지만  이 소제목을 어떻게 꾸며 갈 건지에 대한 이야기입니다. 먼저 티스토리에서 서식을 사용하려면 전체적인 1) 소제목 서식을 변경하는 CSS 또는 HTML을 수정하는 방법, 2) 글마다 다르게 소제목을 변경하고 싶을 때 쓰는 서식 기능이 있습니다. 사용하고자 하는 서식의 코드를 매번 수정하는 방법을 사용하시기에는 번거로움이 있기 때문에 좀 더 간편하게 사용할 수 있는 서식을 저장해 놓고 불러와서 쓸 수 있는 기능을 이용하는  방법에 대하여 포스팅해보고자 합니다.

 

 

1.  블로그로 들어가서 - 계정 사진을 클릭한 후 - 블로그 옆에 톱니바퀴모양의 설정을 눌러 줍니다.

 

계정 - 블로그 설정

 

 

2.  블로그 관리 홈에서 화면 왼쪽의 서식 관리 - 화면 오른쪽에 서식 쓰기를 순서대로 눌러줍니다.

 

설정 - 서식관리 - 서식 쓰기

 

 

3. 글쓰기 화면으로 들어왔다면 기본모드를 HTML 모드를 전환해 줍니다.

 

기본모드를 HTML모드로 전환

 

 

4. 여기에서!! 저장하고 싶은 서식의 제목을 입력해 주고 서식의 코드를 내용에 입력해 주고 완료를 누르면 저장이 됩니다.!

 

HTML모드에서 재목설정 및 코드 넣기 > 완료

 

 

4. 저장한 서식을 실제 글쓰기에 적용하기 위해서 글쓰기 >  상단에... 버튼 > 서식  > 원하는 서식 선택 > 적용 완료

 

글쓰기 > .. 누른후 > 서식 > 원하는 서식을 선택해 적용

 

 

 

 

서식 코드

서식을 저장하고 적용하는 방법은 어렵지 않으나, 서식의 코드를 어떻게 만들어야 하냐가 머리를 아프게 만드는 문제입니다. 먼저 제가 해당포스팅에  사용한 서식의 코드를 한번 확인해 보겠습니다.

 

 

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

 

 

 

위의 코드를 해석하면 이렇게 됩니다.

Background:#25 abe;  - 소제목의 배경컬러

color: #ffffff; - 폰트의 컬러

font-weigt: bold; - 폰트의 체 (글씨체)

margin: 1em 0em; 폰트의 여백 마진 (상하/좌우)

 padding: 15px 20px; - 박스 내부의 여백

 border-radius: 25px 25px 25px 0px;"  - 박스 모서리를 둥글게 좌상/우상/우하/좌하

" data-ke-size="size23"> 단색 스타일 소제목 </h2> -소제목 폰트 크기

<p data-ke-size="size16">&nbsp;</p>- 소제목 다음 본문의 폰트 크기

 

 

기본코드가 있다면 가볍게 색상이나, 폰트, 폰트의 크기 등을 수정해서 응용해 보실 수 있겠습니다.

가장 가볍게 바꿀 수 있는 HTML 색상 코드를 확인할 수 있는 사이트와 파스텔, 그라이데이션 컬러 사이트를 함께 포스팅  하단에 첨부하겠습니다. 코드가 어려우신 분들은 기본 코드에 색상을 먼저 변경해 사용하는 것부터 차근차근해보시면 도움이 될 것입니다.

 

다음은 코드에 사용되는 간단한 용어를 정리 해두니 응용해 보시기 바랍니다.

 

 

 

소제목 테두리 스타일

직선	네모점선	동그란 점선	두줄
solid	dashed	dotted	double

 

 

 

소제목 테두리 위치

왼쪽	오른쪽	위	아래
border-left	border-right	border-top	border-bottom

 

 

 

태그 및 속성	뜻
background-color:#0000;	배경색: #색상
color:#0000;	글꼴색: #색상
border: 5px solid #0000;	전체 테두리 선: 선굵기px,선스타일,#색상
border-left:#0000 10px solid;	왼쪽 선: #색상 선굵기px,선스타일
border-bottom: #0000 2px solid;	아래쪽 선: #색상 선굵기px,선스타일
border-radius: 20px 1px 20px 1px	테이블 모서리 둥글게 : 좌상,우상,우하,좌하 (시계방향)
box-shadow: 5px 5px 5px  #999;	그림자 효과: 좌,하,그림자크기,#색상
padding: 10px 1px 10px 1px	박스 내부 여백: 상, 좌, 하,우
margin: 10px 0px	박스 외부 여백: 상하,좌우
크기를 나타내는 용어 (1em=16px,1.1em=18px)

 

컬러 코드 공유 사이트 모음

 

https://html-color-codes.info/Korean

HTML 컬러 코드

 

 

https://saeksang.com/theme/saeksang/color/color_pastelgen.php#google_vignette

파스텔 컬러 색상표 | 색상 :: SAEKSANG.COM

 

 

https://webgradients.com/

Free Gradients Collection by itmeo.com

 

 

 

다음엔 여러 가지 서식을 가지고 공유하는 포스팅으로 돌아올게요.