본문 바로가기
티스토리 블로그 관련

티스토리 블로그 H태그 제목 색상 꾸미기

by 지서방 2024. 11. 17.

 

티스토리는 h태그를 잘 활용해야 구글 SEO 점수를 좋게 받을 수 있다고 하더라고요. h 태그는 제목의 계층 구조를 나타내는 데 사용되며, 검색 엔진이 내용을 이해하는데 도움을 준다고 해요.

 

 

 

이번 포스팅은 h태그에 대해서 알아보고 제목 꾸미기와 서식 만들기를 활용해서 티스토리 블로그를 하는데 더욱 쉽게 할 수 있는 방법 노하우를 기록해 봤습니다.

 

 

1. 티스토리 h태그

 

 

 

 

티스토리의 제목과 본문 구성을 보게 되면 '제목 1', '제목 2', '제목 3' 그리고 '본문 1,2,3'으로 구성되어 있습니다.

 

 

 

 

제가 본문 내용을 위와 같은 내용으로 작성을 했을 때 글 제목은 h1, 본문 제목은 h2, h3, h4라고 적어놓았어요. 본문글을 티스토리 블로그 html로 적용시켜 보면 어떤 식으로 h태그가 적용되어 있는지 확인할 수 있습니다.

 

이것이 바로 구글 SEO 점수를 좋게 받기 위해 사용하는 h태그를 활용입니다. h2 ▶ h3 ▶ h4 제목 순서대로 사용하는 것이 올바른 사용 방법이지만, 반대로 h4 ▶ h3 ▶ h2 순서대로 사용하는 것은 좋지 않으니 제목 사용도 잘 활용하시기 바랍니다.

 

2. 제목 꾸미기

 

 

티스토리 블로그는 html을 코드를 통해서 위의 파란색 테두리에 흰 글씨가 쓰여있는 것처럼 제목 꾸미기를 할 수 있습니다. 뿐만 아니라 더 많은 제목 꾸미기도 코드만 바꿔준다면 더욱 다양한 제목으로 사람들의 시선을 끌 수도 있고, 깔끔하게 정리를 할 수도 있다는 것이 장점이에요.

 

저도 티스토리 블로그를 검색해 보며 다른 분이 남겨준 코드를 가지고 와서 해봤는데 똑같이 4가지의 파일이 담겨있는 파일은 남겨 놓았습니다.

 

 

티스토리 제목 HTML 코드.txt
0.00MB

 

 

 

쉽게 제목을 적용할 수 있는 방법을 설명해보려 해요.

 

 

 

 

1. 제일 먼저 다운로드한 텍스트 파일을 열어서 위의 코드를 복사합니다.

 

 

 

 

 

2. 그다음 티스토리 블로그 글쓰기를 실행하고, '기본모드'에서 'HTML' 모드로 변경을 해줍니다.

 

 

 

 

3. 복사를 했던 코드를 붙여 넣기 해 준 다음에 'HTML' 모드에서 다시 '기본모드'로 변경을 해줍니다.

 

 

 

 

4. 기본모드로 돌아오면 위의 제목처럼 꾸미기가 적용되어 있는 것을 확인할 수 있습니다. 그리고 제목의 글을 수정해서 사용을 하시면 됩니다. 

 

 

3. 제목 색상 꾸미기

 

 

제목 꾸미기에 대해 알았다면 이번에는 HTML을 활용해해서 제목 글씨와 색상을 바꿔볼게요.

 

 

 

 

여기서 우리가 필요한 것은 컬러 코드입니다. 검은 색상을 마우스로 클릭했을 때 컬러 코드가 "#000000" 이로 표시되는 것이 보여요. 이것을 활용해서 제목 바탕화면을 검은 색상으로 바꿔보겠습니다.

 

 

 

제목 HTML 코드를 보게 되면 색상 코드가 2개가 들어가 있는 것을 확인할 수가 있어요. 파란 바탕색과 흰색 글자 색상인 것을 확인 할 수 있겠죠? 위의 검은색 컬러 코드를 복사한 후에 파란 바탕색 코드를 검은색으로 바꿔줘 보겠습니다.

 

 

 

 

바탕 색상 코드 변경 후 '기본모드'로 바꿔줬더니 위의 이미지처럼 제목 바탕 색상이 검은색으로 바뀌었어요. 이런 식으로 글자색과 바탕색은 원하는 코드를 넣어서 바꿔서 사용하시면 됩니다. 다른 코드들도 마찬가지니 색상을 응용해서 활용해 보시길 바랍니다.

 

 

마무리

 

 

이번 포스팅은 티스토리 블로그 H태그와 HTML을 활용해서 제목 꾸미기와 색상 꾸미기까지 해 봤습니다. 저도 처음에는 너무 어려운 내용이라 생각했었는데 다시 천천히 알아보니까 이제는 HTML에 대해서도 이해가 조금씩 되어 가는 거 같네요.