생활정보연구소

html 티스토리 제목태그 사용법과 h태그 꾸미기 본문

블로그

html 티스토리 제목태그 사용법과 h태그 꾸미기

생활정보연구소 2019. 2. 7. 01:09

블로그 작성시 중요한 것중 하나가 바로 적절한 제목을 넣는 것입니다. 중간중간에 부제목, 소제목이 구분되어 있으면 보기에도 좋고 글을 읽는 독자들이 편하고 쉽게 내용을 파악할 수 있습니다. 그래서 저도 제목을 잘 넣기 위해 노력중입니다.


1. html 티스토리 제목태그 h태그 꾸미기 


적재적소에 좋은 제목을 넣는 것도 중요하지만 뭔가 포인트를 주는 방법도 좋을 거 같습니다. 제목은 보통 h태그를 사용하는데요, h태그를 꾸미는 방법에 대해 자세히 알아보겠습니다. 

h태그?

h태그는 heading tag로 <h1> ~ <h6> 까지 있습니다. 숫자가 낮을수록 더 큰제목이라 생각하시면 됩니다. 또한 큰 제목일수록 글자 크기도 커지고 두껍게 표시됩니다. 아래와 같이 <h3>태그를 쓰면 문단의 제목 역할을 하죠. 

2. 제목태그 변경전제목태그 변경전


제목태그가 중요한게 SEO에 영향을 끼칩니다. 검색엔진은 구조화되고 계층적인 데이터를 좋아합니다. 따라서 제목을 작성할 때 


<h1>글제목</h1>

<h2>부제목</h2>

<h3>소제목</h3>


이런 식으로 작성하시는 것이 좋습니다. 



티스토리에서 제목태그 사용

h태그를 어떻게 계층화 시켰는지는 웹사이트마다 다릅니다. 보통 h1이 페이지의 제목이 되고 순차적으로 내려가는 방식입니다. 


티스토리의 경우 보통 h1은 블로그의 제목(뚝딱 강가이버), h2는 포스팅제목 (html 제목태그 h태그에 효과넣기)로 사용을 합니다. 이 부분은 스킨마다 달라서 별도로 체크를 해야 합니다. 제 스킨은 이미 h1, h2가 사용중이므로 본문에서는 주로 h3과 h4를 사용합니다. 


가장 많이 사용하는 h3 태그에 밑줄을 주는 효과를 줘 보겠습니다. 색깔도 약간 컬러풀한 색으로 바꿔서 시각적으로 눈에 띄도록 하려고 합니다. 밑줄 외에도 글자앞에 네모칸을 넣는 효과도 있는데 개인적으로 그것보다는 밑줄만 들어간 것이 더 보기가 좋더라고요. h4태그는 밑줄은 안하고 글자를 좀더 크게 수정하려고 합니다. 


3. h태그 변경후제목태그 변경후

티스토리 제목태그 꾸미기

티스토리 html 편집모드로 들어가서 .area_view h3을 검색합니다. 그리고 해당 소스코드를 붙여넣고 적용을 시키면 됩니다. 


4. 티스토리 html 편집창티스토리 html 편집창


티스토리 제목태그 꾸미기 코드 (복사가능)

1
2
3
4
5
6
.area_view h3{ font-size:24px; color:#000066; line-height:30px; 
    margin:52px auto 10px 0px; 
    padding: 2px 10px 2px 0px;
  border-bottom: 3px solid #000066;
  }
.area_view h4 { font-size:20px; line-height:22px; margin:20px auto 12px }
cs



글자의 크기는 font-size, 글자색은 color에서 변경할수 있습니다. 밑줄은 border-bottom에서 수정하는데요. 밑줄을 두껍게하고 싶다면 3px로 되어 있는 부분의 숫자를 크게 하면 됩니다. 밑줄의 색깔은 solid #000066 부분을 수정하면됩니다. 색상은 아래 포스트를 참고하시면 도움이 될거 같네요. 


2018/12/29 - [HTML & CSS] - WhatFont로 웹사이트나 블로그의 폰트와 글자색 쉽게 확인하기



수정을 마치면 아래와 같이 h3, h4 태그가 바뀝니다. 


5. h3, h4 꾸미기h3, h4 밑줄효과

티스토리 제목태그 설정방법

제목태그는 포스팅할때 따로 설정을 해줘야 합니다. 그렇게 어렵진 않아요. 티스토리 에디터에서 왼쪽 본문메뉴에서 지정을 해주면 됩니다. 제목으로 지정하고 싶은곳에 마우스를 클릭하고 머리말3 또는 4를 선택하면 됩니다. 머리말1이 h1, 머리말4가 h4입니다. 



단축키로도 쉽게 지정이 가능합니다. Ctrl+숫자로 원하는 제목태그를 선택할 수 있습니다. 가령 h3으로 지정하고 싶을땐 Ctrl+3을 누르면 됩니다. 


6. 티스토리 h태그 사용티스토리 h태그 설정방법

Epilouge

제목태그를 잘 활용하면 최적화에도 도움이 되고 독자들이 글을 읽기도 편해집니다. 블로그에 있어서 중요한 요소라고 생각합니다. 그동안 h태그를 사용하지 않았다면 오늘부터라도 잘 활용해 보시기 바랍니다. 저도 뒤늦게 알아서 후회를 많이한 부분이거든요. 

공유하기 링크

Comments