h2 h3 본문 글자 폰트 크기 변경하기 (티스토리 css 편집 수정 방법)

h2 h3 본문 글자 폰트 크기 변경하기 (티스토리 css 편집 수정 방법)

자신의 스타일에 맞게 티스토리 기본 스킨인 오디세이 스킨을 수정 하는 중입니다. 현재도 마음에 들지만 글자 크기를 좀 더 키워서 읽기 편하게 만들고 싶었습니다.

이번 포스팅에서는 티스토리 본문 글자 크기 설정과 h2, h3 제목 태그 크기를 수정하는 과정과 해결 방법을 정리해보았습니다.

티스토리 스킨 편집 → html 편집 → css에서 글자 크기를 변경할 수 있습니다.

 

1. 티스토리 css에서 본문 글자 변경하기

css는 Cascading Style Sheets의 줄임말로 html이 뼈대라면 css는 위의 색상이나 크기 조절 등을 결정하는 시트입니다. 이 곳을 수정하면 티스토리 모든 글의 스타일을 변경할 수 있습니다.

 

본문을 감싸는 div class 이름이 article-view로 되어있습니다

티스토리 본문에 해당하는 부분은 .article-view p입니다. .article-view p을 검색한 후 아래와 같이 수정하시면 됩니다. 기본 문장은 <p></p> 태그 안에 작성이 되기 때문에 이 부분을 수정하였습니다.

기존 css

.article-view p {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 26px;
    color: #555;
}

@media screen and (max-width: 1060px) {
.article-view p {
    font-size: 15px;
    line-height: 26px;
    }
}

편집 후

.article-view p {
	margin-bottom: 28px;
	font-size: 1.1em;
	line-height: 1.7em;
	color: #555;
}

@media screen and (max-width: 1060px) {
.article-view p {
	font-size: 1.1em;
	line-height: 1.7em;
    }
}

기존의 글자 크기 font-size를 16px → 1.1em으로 변경하고, 줄 간격인 line-height를 26px → 1.7em으로 변경하였습니다.

모바일에서 보여지는 글자크기를 수정하려면 @media screen and (max-width: 1060px) {.article-view p{ 뒤에 나오는 font-size 숫자를 수정하시면 됩니다. 모바일 글자 줄 간격은 line-height 수치를 수정하시면 적용됩니다.

▲ 픽셀(px) → em 단위 변경 사이트 http://pxtoem.com

px은 픽셀을 의미하는 단위입니다. em은 폰트 사이즈의 M의 너비를 기준으로 하는 데요. 16px=1em으로 기본적으로 설정되어있습니다. 글자 크기는 px로 설정하여도 되고, 1em의 배수 형태(예: 0.5em / 1.8em 등)로 수정하는 것도 방법입니다.

2. 제목 태그 h2, h3 크기 및 속성 css 변경하기

마찬가지로 본문 영역인 article-view 안에 있는 h2, h3 글자 속성을 css에서 변경할 수 있습니다.

.article-view h2으로 검색 [ Ctrl+ F ]하여 글자 크기를 수정할 수 있습니다.

검색하여 h2, h3, h4 속성을 찾아볼 수 있습니다.

기존css

.article-view h2 { 
    font-size: 24px; 
    line-height: 1.38; 
    color: black; 
} 

.article-view h3 { 
    font-size: 20px; 
    line-height: 1.4; 
}

편집 후

.article-view h2 { 
    font-size: 2em; 
    line-height: 1.8; 
    color: black; 
} 

.article-view h3 { 
    font-size: 1.6em; 
    line-height: 1.8; 
    color: royalblue;
}

편집한 부분은 px을 em으로 단위를 변경한 것과 line-height를 1.38에서 1.8로 좀 더 글 줄 간격을 넓게 하여 가독성을 높혔습니다.

h2와 h3의 글자 크기는 좀 더 키웠고, h3 글자에 색상을 추가하였습니다.

색상은 royalblue 색상으로 설정했습니다. 원하는 색상이나 글자 크기, 자간을 수정하여 커스터마이징 하시면 됩니다. 하는 김에 h4 글자도 속성을 부여해봤습니다.

h2 테스트

h3 테스트

h4 테스트

위와 같이 티스토리 새 에디터에서 제목1(=h2), 제목2(=h3), 제목3(=h4)으로 입력하시면 css에 설정한 글자 크기, 색상, 자간 등이 적용되어 나타납니다.

추후에 스킨을 변경하시거나 css만 수정하면 모든 티스토리 글에 속성이 적용되기 때문에 쉽게 스타일을 변경할 수 있습니다.

▲ 티스토리 css 속성 변경 전

위와 같이 적용되는 글에는 h2, h3, p 태그로 작성이 되었습니다. 위에서 작성한 것처럼 css 속성을 변경하시면 다음과 같이 수정된 결과물이 나오게 됩니다.

▲ h2 글자 크기 확대/ h3 색상 설정 및 자간 설정 / 본문 글자 크기 확대 적용 후

본문 글자 크기를 한번에 변경하는 방법과 제목 태그인 h2, h3 태그 속성을 변경하는 방법에 대해서 알아보았는데요. 도움이 되셨길 바랍니다.