티스토리 본문 글씨크기 H2 H3 H4 제목 색상변경

티스토리 본문 글씨크기 H2 H3 H4 제목 색상변경

티스토리에서 본문 글씨 크기 변경과 색상 변경하는 방법에 대해 포스팅을 하려고 합니다. 이 포스팅에서는 예시를 들어가며 H1, H2, H3 태그를 포함한 본문의 글씨 크기와 색상을 변경하는 방법을 설명하고, 해당 태그에 대한 기능에 대해서도 알려드리겠습니다. 또한, 티스토리 제목과 머리말의 글씨 크기와 폰트 변경에 대해서도 다루겠습니다.

티스토리는 네이버 블로그와는 다르게 HTML이나 CSS를 이용하여 개인의 홈페이지를 손쉽게 만들 수 있는 블로그 웹 기반 서비스입니다. 그리고 자유로운 그리드 형태의 홈페이지를 만들다 보니 해상도에 맞지 않는 글씨 폰트나 폰트 크기 등이 가독성을 해칠 수 있고, 개인의 아이덴티티를 살리기 위해 본문 글씨를 지정하는 방법이 필요합니다.

티스토리 본문 글씨크기 H2 H3 H4 제목 색상변경

기본적으로 글을 작성할 때마다 글씨 폰트 등을 설정하는 것은 글이 1~2개가 아니라면 시간이 많이 소요될 뿐만 아니라, 앞으로 작성할 글에도 불편함을 초래할 수 있습니다. 이를 해결하기 위해 홈페이지의 CSS에서 폰트 부분을 고정시키는 것이 좋습니다.

티스토리 본문 글씨 크기 변경

본문의 글씨 크기를 변경하기 위해 티스토리 관리자 페이지로 이동합니다.

"꾸미기" 메뉴를 선택하고, "스킨 편집"을 클릭 후 "Html 편집"으로 이동한 뒤, "CSS 탭"을 선택합니다.

Ctrl + F를 눌러 "Post"라고 검색하여 본문에 대한 스타일 부분을 찾습니다.

해당 부분에서 font-size를 설정하는 코드를 찾습니다. 일반적으로 다음과 같이 표시됩니다.

font-size: /*@post-body-font-size*/12px/*@*/;

이 부분을 찾아서 원하는 폰트 크기로 수정합니다. 예를 들어, 폰트 크기를 16px로 변경하려면 다음과 같이 수정합니다.

font-size: /*@post-body-font-size*/16px/*@*/;

변경 내용을 저장합니다.

티스토리 본문 글씨 색상 변경

본문의 글씨 색상을 변경하기 위해 앞서 설명한 방법을 따르며 본문 글씨 색상을 설정하는 코드를 찾습니다.

웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML

이때 주로 사용하는 색상코드는 위 내용을 참고하며 일반적으로 다음과 같이 표시입력합니다.

color: /*@post-body-color*/#000000/*@*/;

이 부분을 찾아서 원하는 색상으로 수정합니다. 예를 들어, 글씨 색상을 빨간색(#FF0000)으로 변경하려면 다음과 같이 수정합니다.

color: /*@post-body-color*/#FF0000/*@*/;

변경 내용을 저장하면 본문 글씨 색상이 변경이 적용됩니다.

본문 제목(H1, H2, H3) 글씨 크기 및 폰트 변경

본문 제목의 글씨 크기와 폰트를 변경하기 위해 앞서 설명한 방법과 크게 다르지 않으며 각각의 제목에 해당하는 코드를 찾아서 폰트 크기와 폰트 스타일을 수정합니다.

예를 들어, H1 제목의 폰트 크기를 20px로 변경하고 Arial 폰트를 적용하려면 다음과 같이 수정합니다.

h1 {
  font-size: 20px;
  font-family: Arial, sans-serif;
}

필요한 제목의 글씨 크기와 폰트를 수정하고 변경 내용을 저장합니다.

이렇게 티스토리의 본문의 글씨 폰트크기와 색상, 그리고 제목의 글씨 크기와 폰트를 변경할 수 있으며 티스토리에서는 HTML과 CSS를 이용하여 자신만의 홈페이지를 꾸밀 수 있으며, 이를 통해 가독성을 높이고 나만의 스타일을 적용할 수 있습니다.

CSS 폰트크기 및 DIV 가로세로 단위 - In, Cm, mm, em, px

 

HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성

티스토리 본문 글씨 폰트크기 및 링크 색상 변경