티스토리 제목 태그 디자인 설정하는 방법(H2, H3, H4 태그 속성 설정)

티스토리 제목은 콘텐츠 구조를 명확히 하고, SEO에 중요한 역할을 하는데요. 이 제목 태그의 디자인은 특히, 콘텐츠 항목별로 내용을 구별하고 가독성을 올리는 역할을 합니다.

오늘은 이 티스토리 제목 태그 디자인을 설정하는 방법에 대해 알아보도록 하겠습니다.

티스토리 제목 태그 디자인 설정하는 법

티스토리 제목 태그 디자인은 티스토리 관리자 페이지에서 설정을 할 수 있습니다.

티스토리 공식 홈페이지 바로가기

1.티스토리 홈페이지 – 관리자 페이지 접속

먼저 티스토리 홈페이지에 접속하여 ‘관리’ 페이지를 들어갑니다.

그 다음으로는 [꾸미기 > 스킨 편집] 메뉴를 클릭해줍니다.

나오는 스킨 편집 메뉴에서 ‘html 편집‘ 버튼을 눌러줍니다.

2.CSS 코드 편집

위 화면처럼 보이는 코드 편집화면에서 CSS를 선택해줍니다. CSS 코드 편집창에서 ‘Ctrl + F’를 눌러 H2 태그를 찾아주는데요.

Ctrl + F 는 해당 페이지 화면에서 특정 글자를 찾아주는 기능을 제공합니다.

우측 상단의 검색창에서 ‘h2’를 검색하면 h2가 포함된 많은 항목이 나타납니다. 총 41번의 h2가 존재하는 것을 알 수 있습니다. 그러면 h2를 계속 밑으로 내리면서 .entry-content h2 태그를 찾아줍니다.

해당 태그가 바로 글쓰기에서 H2(제목1)에 해당하는 태그입니다.

3.태그 안의 각 요소 코드 확인하기

각 속성에 따른 속성값을 설정하여 H2 태그의 디자인을 설정해볼 수 있는데요. 몇 가지 속성에 대해 알아보도록 하겠습니다.

• border

border는 요소의 테두리를 설정하는 역할을 합니다. 테두리의 색깔, 선의 모양, 두께 등을 지정할 수 있습니다.

위와 같은 border-bottom은 h2 태그의 테두리를 아래만 적용하게 됩니다. 그렇게 두께는 5px, 선모양은 실선, 색상은 파란계열로 설정됩니다.

왼쪽의 글을 선택하여 ‘미리보기’ 버튼을 누르면, 제목 하단에 아무것도 없다가 파란색 밑줄이 적용이 되는 것을 확인할 수 있습니다.

• background

태그의 배경 설정을 하는 속성입니다. 배경을 원하는 색상으로 지정할 수 있습니다.

• font-size

글자 크기를 가독성이 좋은 사이즈로 변경할 수 있습니다.

4.H2, H3, H4 태그 CSS 코드 편집하기

위 코드는 H2(제목1), H3(제목2), H4(제목3)에 해당하는 CSS 코드를 편집하여 디자인을 설정한 모습입니다.

• H2 태그

border-bottom 속성을 사용하여 밑줄 효과를 주었습니다.

• H3 태그

왼쪽에 굻은 선을 입력하여 서브 제목 표시를 하였습니다.

• H4 태그

H4 태그는 배경색 설정으로 강조를 상대적으로 약하게 두어 세부 제목으로써의 기능을 강화한 모습입니다.

마무리 결론

티스토리 제목 태그 디자인을 설정하는 것은 단순히 페이지를 이쁘게 꾸미는 역할만 하는 것이 아닙니다.

방문자의 이목을 끌고, 가독성을 끌어올려 우리 블로그 페이지에 대한 경험을 향상시키는 것이 중요합니다. 이를 통해 사용자 경험(UX)을 증가시켰을 때, 티스토리 블로그에 대한 점수와 평가가 높아지고 SEO도 향상시켜 검색 노출이 활발해지는 효과를 얻을 수 있습니다.

<추가로 볼만한 글>

티스토리 블로그 글 작성시 제목 태그 올바른 사용법 수익화 블로그를 위한 티스토리 최적화 설정방법 1단계 보러가기