티스토리 예쁜 서식 공유 & 서식 사용법으로 가독성을 높이자

네이버 블로그 운영하다가 티스토리를 처음 접하신 분들(바로 저 같은 분들) 어떻게 써야 글이 가독성이 좋고 예쁘게 써질지 고민되시지 않나요? 저도 처음에는 티스토리는 예쁨을 포기해야 하는가로 많이 고민했는데, 유명한 다른 티스토리 블로거님들 블로그에 들어가면 글 중간중간 소제목이 예쁘게 되어 있더라고요. 알고 보니 HTML로 글을 작성할 수 있는 티스토리는 서식을 따로 만들어서 저장해 두고 많이들 사용하시더라고요. 이번에 제가 공부하면서 기록해두고 여러분들에게도 공유하면 좋을 것 같아서 글을 작성하게 되었어요.

티스토리 서식 설정해서 사용하는법

1) 티스토리 관리 화면에서 콘텐츠-서식관리 메뉴로 접속해준 후 서식 쓰기를 눌러줍니다.

2) 글쓰기 창이 뜨면 오른쪽의 기본 모드를 누른 뒤 HTML로 변경해 줍니다.

3) 빈 화면에 HTML 소스를 붙여 넣어 줍니다. 그 뒤 다시 기본 모드로 변경 후 완료를 눌러줍니다.

4) 글쓰기 화면에 접속한 뒤, 서식을 눌러줍니다. 그런 후 설정한 서식을 선택해주면,

5) 서식이 불러와지고 글씨만 수정하여 사용하시면 됩니다.

대제목 서식 만들기

제가 만들어서 사용하고 있는 대제목 서식은 위에서 이미 한번 보셨지만 아래와 같은 서식입니다. 궁금돋보기 이미지 색과 맞춰서 만들어 보았습니다. 사실 서식 사용하시는게 다 비슷해서 색상, 글짜 변경이 대부분을 차지한다고 보시면 됩니다. 제가 저의 HTML파일을 올려 드리겠지만, 그래도 색상같은것을 바꿔 사용하고 싶으신 분들을 위하여 간단히 설명 드리겠습니다.

궁금돋보기 대제목 서식 HTML

border-width: 아래선, 왼쪽 선 두께

border-bottom-color: 아래선 색상

border-left-color: 왼쪽선 색상

letter-spacing: 자간

padding: 정의된 경계로부터의 거리 (네 가지 값을 입력할 시 상, 우, 하, 좌 순서 / 두 가지 값일 시 상하, 좌우 값 / 한 가지 값 입력 시 상하좌우 전부)

margin: 바깥 여백 영역 (네 가지 값을 입력할 시 상, 우, 하, 좌 순서 / 두 가지 값일 시 상하, 좌우 값 / 한 가지 값 입력 시 상하좌우 전부)

line-height: 왼쪽선 높이

<b>bold</b> 폰트를 굵게

font-size: 폰트 크기

font-family: 글꼴(본고딕R)

color: 폰트 색상

**만약 폰트 부분에 font-weight: normal; 표기가 있다면 <b>bold</b> 태그로 폰트를 굵게 설정하더라도 기본 폰트 스타일처럼 나오도록 만들기 때문에 font-weight: normal;를 지워야 폰트가 굵게 처리가 됩니다.

대제목 응용 편

본명조 입니다.

1) 핑크 스타일 / 본명조 폰트

궁서체 입니다.

2) 그레이스 타일 / 궁서체 폰트

나눔고딕 입니다.

3) 옐로 스타일 / 나눔고딕 폰트

응용 HTML

1) 핑크/본명조체
<h3 style="box-sizing: border-box; border-width: 3px 13px; border-bottom-style: solid; border-bottom-color: #ffa8cf; border-left-style: solid; border-left-color: #ffa8cf; letter-spacing: -1px; padding: 8px; margin: 5px 0px; line-height: 1.3;">
<span style="font-family: 'Noto Serif KR';"><b><span style="font-size: 24px; color: #e782af;">본명조 입니다.</span></b></span></h3>

2) 그레이/궁서체
<h3 style="box-sizing: border-box; border-width: 1px 10px; border-bottom-style: solid; border-bottom-color: #8e8e8e; border-left-style: solid; border-left-color: #8e8e8e; letter-spacing: -1px; padding: 5px; margin: 5px 0px; line-height: 1.3;">
<span style="font-family: GungSeo, serif;"><b><span style="font-size: 23px; color: #4c4c4c;">궁서체 입니다.</span></b></span></h3>

3) 옐로/나눔
<h3 style="box-sizing: border-box; border-width: 5px 15px; border-bottom-style: solid; border-bottom-color: #ffe53a; border-left-style: solid; border-left-color: #ffe53a; letter-spacing: -1px; padding: 5px; margin: 5px 0px; line-height: 1.3;">
<span style="font-family: 'Nanum Gothic';"><b><span style="font-size: 22px; color: #fcca00;">나눔고딕 입니다.</span></b></span></h3>

궁금돋보기 대제목HTML.txt

0.00MB

▲대제목 HTML 소스 필요하신 분들 다운받으세요.

소제목 서식 만들기

소제목은 위에화 매우 유사하게 구성되어 있고 이 또한 글꼴 색상, 종류만 변경해서 사용하시면 될 것 같습니다. 하단에 이미지와 함께 설명해 드리겠습니다. 보시고 참고해 주세요.

궁금돋보기 소제목 서식 HTML

<h4 style="border-left: 10px solid #5e4d79; letter-spacing: -1px; padding: 0px 0px 0px 7px; margin: 5px 0px;"><span style="font-size: 21px; font-family: 'Noto Sans Demilight', 'Noto Sans KR'; color: #5e4d79;"><b>소제목입니다.</b></span></h4>

위에 설명드린 대제목과 거의 태그가 같지만 다른 점이 조금 있어 설명드리겠습니다.

border-left: 10px solid #5e4d79 소제목에는 왼쪽선만 있기 때문에 왼쪽선 높이와 색상을 한꺼번에 표기하였습니다.

padding: 0px 0px 0px 7px 네 가지 값을 전부 입력하여 상0px, 우0px, 하0px, 좌7px입니다.

소제목 응용 편

본명조 입니다.

1) 블루 스타일 / 본명조 폰트

궁서체 입니다.

2) 다크 그레이스 타일 / 궁서체 폰트

나눔고딕 입니다.

3) 오렌지 스타일 / 나눔고딕 폰트

응용 HTML

1) 블루/본명조체
<h4 style="border-left: 5px solid #006DD7; letter-spacing: -1px; padding: 0px 0px 0px 7px; margin: 5px 0px;">
<span style="font-size: 21px; font-family: 'Noto Serif KR'; color: #006dd7;"><b>본명조 입니다.</b></span></h4>

2) 다크 그레이/궁서체
<h4 style="border-left: 2px solid #333333; letter-spacing: -2px; padding: 0px 0px 0px 7px; margin: 5px 0px;">
<span style="font-size: 21px; font-family: GungSeo, serif; color: #333333;"><b>궁서체 <span style="color: #333333;">입니다.</span></b></span></h4>

3) 오렌지/나눔
<h4 style="border-left: 15px solid #F89009; letter-spacing: -1px; padding: 0px 0px 0px 7px; margin: 5px 0px;">
<span style="font-size: 21px; font-family: 'Nanum Gothic'; color: #f89009;"><b>나눔고딕 입니다.</b></span></h4>

궁금돋보기 소제목HTML.txt

0.00MB

▲소제목 HTML 소스 필요하신 분들 다운받으세요.

표 부분도 함께 공유해 드리려 했는데, 생각보다 글이 길어져서 다음 포스팅에 공유하겠습니다. 티스토리 예쁜 서식 많이들 사용하시고 예쁜 블로그 만드세요.

저작자표시 비영리 변경금지

'블로그정보' 카테고리의 다른 글

티스토리 트위터 내보내기 하는법(트위터 연동) (0)	2022.04.01

궁금 돋보기 정보창고

티스토리 예쁜 서식 공유 & 서식 사용법으로 가독성을 높이자