티스토리 - 오디세이 스킨 글자 크기 변경 방법 (종합)

지난번에는 티스토리에서 H 태그 (제목 태그)가 무엇이고, 왜 중요하며, 어떻게 적용하고 사용하는지에 대한 글에 이어 어떻게 H 태그의 글자 크기를 변경할 수 있는지를 오디세이 스킨을 기준으로 설명드리고자 하니 참고하시기 바랍니다

 

티스토리 - H 태그 기본서식 적용으로 구글검색 상위노출

특히, H 태그를 서식에 적용하여 글을 작성했을 때의 장점 중 하나가 글자크기 변경이 필요할 때 CSS에서 변경하면 블로그에 있는 모든 포스팅 글의 글자 크기가 일괄적으로 변경된다고 말씀드렸습니다

오늘은 그럼 어떻게 글자크기를 변경하는지에 대해 제가 알아본 방법을 공유드리고자 합니다

저는 티스토리의 오디세이 (Odyssey) 스킨을 사용함으로 이를 기준임으로 설명드립니다
혹여, 다른 스킨을 사용하시는 분들은 방법은 다를 수 있으나 전체적 방법은 같으니 참고하시기 바랍니다

그럼 시작하겠습니다

 

목차

1. 글자 크기 변경을 위한 CSS 편집 진입 방법

2. 글자 크기 변경 방법
  가. H 태크 (제목 태그) 글자 크기 변경 방법
  나. 본문 글자 크기 변경 방법
  다. 글머리표 글자 크기 변경 방법

3. 맺음말

 

 

1. 글자 크기 변경을 위한 'CSS 편집' 진입 방법

 

글자크기를 변경하기 위해서는 'CSS 편집'에 먼지 진입을 해야 합니다

블로그 설정에 들어가서 왼쪽의 꾸미기 카테고리 내의 '스킨 편집'을 클릭합니다

 

스킨 편집 선택

스킨 편집에서 아래 그림의 붉은 박스로 쳐진 'html 편집'을 클릭합니다

 

html 편집 선택

그러면 처음에 'HTML' 편집 화면이 뜨는데 아래 그림처럼 'CSS'를 클릭합니다

 

CSS 선택

☆여기서부터가 중요합니다

저 같은 초보가 여기서부터 헷갈렸는데 여러분들은 잘 보고 따라오시기 바랍니다

CSS를 클릭한 후 "Ctrl +F"를 누르라고 하는데 CSS 클릭 후 바로 "Ctrl +F"를 누르면 문서 전체에 대한 '찾기' 모드에 들어가 더 이상 진행이 되지 않습니다

반드시 아래 그림의 붉은 박스 부분을 한번 클릭하신 후에 "Ctrl +F"를 키보드에서 눌러 주시기 바랍니다

 

html 편집 Ctrl + F

그렇게 하면 아래와 같이 노란색의 'CSS내의 검색' 화면이 나오게 되고, 거기에 "article-view"를 그림과 같이 쳐 넣은 후 'Enter'를 쳐 주십시오

 

article-view 찾기

그럼, 아래 그림과 같이. article-view 가 시작되는 라인으로 옮겨지게 되는데 보통 3600번째 라인입니다

여기서부터 글자크기를 변경하는 라인이 시작되니 계속되는 다음 설명을 참고하시기 바랍니다

 

article-view p { 찾기

 

 

 

2. 글자 크기 변경 방법

가. H 태크 (제목 태그) 글자 크기 변경 방법

 

먼저, H 태그 즉 제목 태그의 글자 크기를 변경하는 방법부터 설명드리겠습니다

아래와 같은 내용이 시작되는 부분부터 변경 라인이 시작되는데 그 아래에서 . article h1을 찾으시기 바랍니다

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

글을 찾으셨으며 아래 CSS 문구 중 붉은색 글을 참고하셔서 수정해 주시기 바랍니다

.article-view h1,
.article-view h2,
.article-view h3,
.article-view h4 {
margin-bottom: 24px;
font-weight: 900;
color: rgba(0, 0, 0, 0.87);
}

.article-view h1 { '글 제목'에 해당
font-size: 30px; → 30px의 숫자 변경
line-height: 1.33;
}

.article-view h2 { '제목1'에 해당
font-size: 20px; → 20px의 숫자 변경
line-height: 1.38;
}

.article-view h3 { '제목2'에 해당
font-size: 20px; → 20px의 숫자 변경
line-height: 1.4;
}

.article-view h4 { '제목3'에 해당
font-size: 18px; → 18px의 숫자 변경
line-height: 1.33;
}

각각의 숫자를 변경하여 적용하면서 본인이 원하는 글자 크기로 찾으시면 됩니다

 

나. 본문 글자 크기 변경 방법

이번에는, 본문 글자 크기를 변경하는 방법입니다

여기서도 제가 처음에 엄청 헤맸는데 그 이유는 변경하라고 말씀하시는 라인의 문구 자체가 전의 CSS에 존재하지 않았기 때문입니다

결국 오디세이 스킨에는 본문 글자 크기를 변경하는 라인이 없어서 아래 라인을 추가하여야 했습니다

★ 추가 필요 라인

#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] { font-family: 'Sunflower', sans-serif !important;
font-size: 1.12em;//
}
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] { font-family: 'Sunflower', sans-serif !important;
font-size: 1.05em;//
}
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14'] { font-family: 'Sunflower', sans-serif !important;
font-size: 0.8em;//
}

위 문구를 아래 .article-view p { 문구의 " } " 가 끝나는 다음 줄에 복사해 넣으시기 바랍니다

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

그리고 이제 본문의 글자 크기를 변경하시면 되는데 (붉은색 글자 참고)
em이라는 단위 앞의 숫자를 변경하시면 되는데 기본이 1.0이고 그 기준의 배수의 숫자를 써넣어 주시면 됩니다

지금 보고 계시는 글자 크기가 "1.06" 사이즈인 점도 참고하시기 바랍니다

#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] { font-family: 'Sunflower', sans-serif !important;
font-size: 1.12em;// 본문1 글자 크기
}
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] { font-family: 'Sunflower', sans-serif !important;
font-size: 1.05em;// 본문2 글자 크기
}
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14'] { font-family: 'Sunflower', sans-serif !important;
font-size: 0.8em;// 본문3 글자 크기
}

 

다. 글머리표 글자 크기 변경 방법

 

마지막으로 글머리표 글자 크기를 변경하는 방법을 알아보겠습니다

글머리표는 두 가지가 있습니다

① 순서 없는 목록

예를 들어 아래 글과 같은 형태입니다

• 순서 없는 목록의 예

② 순서 있는 목록

예를 들어 아래 글과 같은 형태입니다

1. 순서 있는 목록의 예
2. 순서 있는 목록의 예

아래 박스의 문구를 CSS 라인에서 찾습니다 보통 H 태그 글자 크기 변경 아래에 바로 있습니다

".article-view ul" 이 순서 없는 목록이고
".article-view ol" 이 순서 있는 목록입니다

 

.article-view ul {
margin-top: 18px;
}

.article-view ul li {
font-size: 16px; 순서 없는 목록 글자 크기
line-height: 24px;
color: rgba(0, 0, 0, 0.87);
word-break: break-all;
}

.article-view ol {
margin-bottom: 32px;
}

.article-view ol li {
margin-bottom: 6px;
font-size: 16px; 순서 있는 목록 글자 크기
line-height: 1.75;
color: rgba(0, 0, 0, 0.87);
word-break: break-all;

 

원하는 크기 변경을 모두 하신 후 적용을 누르시고 창을 닫으시면 됩니다

처음에는 글자 크기와 숫자의 감이 없는데 여러 번 변경해서 PC로도 보고 핸드폰 화면으로도 보면서 최적의 원하는 글자 크기로 수정하시면 됩니다

 

 

3. 맺음말

블로그를 시작한 지 한 달이 되어 가고 있습니다

정말 배울 것이 많아 열심히 찾고 적용하면서 익혀 가고 있는데 정말 많은 분들이 열심히 활동하시고 자신의 정보를 다른 분들께 나누어 주시고 계시는 것을 보고 적잖이 놀랐습니다

참 내가 안일하게 노력하지 않고 살았구나라고 느끼며 많이 배우고 또한 재밌어 지속적으로 활동해 보려 합니다 ^^

최대한 글자 크기 변경에 대해 제가 익히면서 했던 실수를 반복하시지 않게 쉽고 자세히 썼는데 글 작성에 도움이 되셨으면 좋겠습니다

 

지금까지 알심파파였습니다

Apple 아이폰 13 Pro 자급제

Apple 2021 에어팟 프로 블루투스 이어폰 맥세이프 호환

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."