[티스토리] 제목 소제목 스타일 1분만에 만들기

 

 

 

 

목차

 

 

 

 

티스토리 제목 스타일은 어떻게 만들까?

 

티스토리 블로그에서 글을 작성할 때 제목을 이용해서 문단을 구분하는데요.

기본 제목들은 스타일이 안되어 있어서 가독성이 좋은편이 아닙니다.

 

아래 이미지를 보시면 제목의 사이즈와 굵기만 다르고 동일하죠?

글을 읽는 사람에게는 제목이나 문단의 구분을 많이 보게 되는데 

텍스트의 크기와 굵기만으로는 제목인지 문단인지 알아보기가 쉽지 않습니다.

스타일이 없는 제목들

 

문단을 구분하는 제목이 가독성이 좋아야 글의 구조도 한 눈에 볼 수 있겠죠?

또한 글을 읽는 사람에게도 각 문단의 내용을 쉽게 파악할 수 있게 해줍니다.

 

현재 보고 계신 제 블로그의 소제목인 "티스토리 제목 스타일은 어떻게 만들까?"도 CSS로 스타일을 입혀서 만든건데요.

티스토리 제목 스타일 꾸미기는 기본적으로 CSS에 대한 지식이 있으면 더 쉽게 만들 수 있습니다.

 

하지만!

 

CSS 코딩에 대한 지식이 없어도 간단한 원리만 이해하면 금방 적용할 수 있습니다.

 

몇 번 따라하다 보면 자신이 원하는 색상으로 금방 적용할 수 있을테니 포기 하지 마시고 끝까지 따라해 보세요!

 

1분만에 제목 스타일 만들기

 

우선은 간단하게 가장 많이 사용하는 제목 CSS 스타일을 보여드릴게요.

 

우리는 1분만에 만들어야 하기 때문에 바로 코드를 보여드리고 적용해 보겠습니다.

다음 순서대로 진행해 주세요.

 

1. 아래 코드에 마우스를 올리면 나오는 '복사' 버튼 클릭.

<h4 style="margin: 10px 0; padding: 8px 15px 8px 15px; border-left: #a00 8px solid; background: #f8f8f8;" data-ke-size="size20">제목2 스타일 만들기</h4>

 

2. HTML 편집기 모드로 진입 후 가장 마지막 줄에 붙여넣기.

HTML 편집 모드에서 코드를 붙여넣기

 

3. 다시 기본모드로 돌아와서 적용된 제목 스타일 확인.

스타일이 적용된 제목

 

위 이미지 처럼 기본모드로 보실 때 제목에 스타일 적용이 잘 되셨나요?

저는 예시로 제목2로 스타일을 했는데요. 코드 부분에서 style="..." 에 적힌 코드를 제목1이나 제목3에 적용하셔도 됩니다.

 

여기까지는 생각보다 어렵지 않으셨죠?

 

다음은 내가 원하는 색상으로 직접 꾸미는 작업을 알려드릴게요.

 

제목 앞에 있는 라인 색상을 내 블로그 색상과 어울리는 색으로 꾸미면 더욱 좋겠죠?

 

제목 스타일 강조 색상 직접 넣어보기

 

위에서 알려드린 예시 CSS코드를 보시면 다음과 같은 부분이 있습니다.

border-left: #a00 8px solid;

 

이 코드에서 border-left란 바로 제목 옆에 있는 빨간색 선을 의미합니다.

그 다음에 나오는 #a00 으로 적힌 부분이 라인 색깔을 담당하는데요.

 

색상 코드를 마음에 드는 코드로 직접 변경해 보시면 자신만의 제목 색상을 만들 수 있습니다.

CSS 색상 코드는 16진수로 이루어진 Hex 코드를 사용하는데요.

 

내가 원하는 색상을 직접 16진수로 만들기는 어렵기 때문에

구글에서 직접 색상을 만들 수 있는 방법을 알려드리겠습니다.

 

아래 링크를 통해 구글의 색상 선택도구를 바로 사용해 보세요!

 

색상 선택도구

 

구글의 색상 선택도구에서 마음에 드는 색상을 클릭해 보시면 아래 이미지 처럼 16진수 Hex코드로 된 색상 코드가 만들어집니다.

 

빨간색으로 표시된 버튼을 눌러서 코드를 복사 하신 다음에 위에서 알려드린 색상 코드 대신 붙여넣기 하시면 적용이 됩니다.

코딩을 모르셔도 금방 따라하실 수 있을거에요.

 

아래는 위에서 제가 선택한 컬러로 제목을 스타일링한 코드입니다.

 

border-left: #3297a8 8px solid;

 

이 코드를 적용한 HTML 코드도 보여드리면 다음과 같습니다.

<h4 style="margin: 10px 0; padding: 8px 15px 8px 15px; border-left: #3297a8 8px solid; background: #f8f8f8;" data-ke-size="size20">제목2 스타일 만들기</h4>

 

위 코드에서 border-left의 색상 코드가 바뀐걸 확인해 주세요!

 

이렇게 티스토리 제목의 스타일 직접 바꿔보는걸 배웠습니다.

제목의 스타일을 입혀서 글을 읽는 사람들에게 더 정확한 정보를 전달해 보세요!

 

함께 보면 좋은 글

 

티스토리는 제목 스타일 뿐만 아니라 제목의 목차를 넣는 것도 중요한데요.

티스토리에 자동으로 제목의 목차를 추가하는 방법도 쉽게 만들 수 있습니다.

자세한 내용은 아래 링크의 포스팅을 통해 확인 부탁드립니다.

 

가장 쉽게 티스토리 자동 목차 (TOC) 만들기

 

[초급] 티스토리 자동 목차 (TOC) 만들기 - 쉬운 설정