왜 네이버가 아니라 티스토리를 하는 거야?
내가 정말 많이 들었던 질문이다. 많은 이유들 중, 가장 결정적인 이유는 바로 html 그리고 css 수정이 가능해 블로거들마다의 개성을 살릴 수 있다는 점이 가장 마음에 들었다. 그리고 html, css에 관심을 가지게 되면서 혼자 찾아보고 공부한 다음 따로 기록해두곤 했었는데 폰트 바꾸는 방법 그리고 크기 변경하는 방법을 물어보는 사람들이 있었는데, 오늘은 html 그리고 css 편집으로 폰트 변경하는 방법에 대해서 작성해보려고 한다.
내가 운영하고 있는 블로그가 티스토리 블로그이기 때문에, 티스토리를 이용해서 사진 자료를 가져왔으니, 참고하면 좋겠다. 폰트 변경은 10단계로 구성하였고 마지막에는 폰트 크기 변경하는 방법이 있으니 폰트 크기가 궁금한 분은 맨 밑으로 내려서 확인하면 좋을 것 같다.
1. 티스토리 블로그 관리 확인
먼저 자신의 티스토리 블로그에 들어간 다음, 블로그 관리를 찾아 눌러주면 된다. 보통 관리의 위치는 오른쪽 상단에 있는데 블로그 스킨에 따라서 위치가 다를 수 있다. 따라서 오른쪽 상단에 프로필이 없는 경우, 프로필을 눌렀을 때 위와 같이 보이기 때문에 참고하면 좋겠다!
2. 스킨 편집
관리에 들어간 다음, 왼쪽 사이드 바의 꾸미기를 찾은 다음 스킨 편집을 찾아주고 들어가면 된다.
스킨 편집을 누르게 되면, 왼쪽에는 실제 사용자들에게 보이는 화면이, 오른쪽에는 스킨을 편집할 수 있는 창이 보이게 된다.
3. html 편집
편집창 상단에 있는 html 편집을 볼 수 있는데 선택하면 된다.
4. CSS 선택
html 편집을 들어간 다음, 위쪽에 html/CSS/파일 업로드를 찾을 수 있는데 여기서 CSS 선택해주면 된다.
5. 구글 폰트/누누 에서 폰트 고르기
구글 폰트 혹은 눈누 라는 웹 사이트에서 제공하는 무료 폰트를 이용하려는 것인데, 이런 것을 웹 폰트라고 한다. 쉽게 말해 웹 폰트는 사용자가 가지고 있는 폰트가 아니더라도 특정 폰트를 웹에서 사용할 수 있게 하는 것이라고 생각하면 된다. 나는 '눈누'라는 사이트를 이용하기 때문에 눈누를 통해 소개하도록 하겠다. 구글 폰트에서 마음에 드는 것을 찾았더라도 똑같이 따라 하면 되기 때문에 걱정하지 않아도 된다!
눈누
상업용 무료한글폰트 사이트
noonnu.cc
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
눈누/구글 폰트에서 원하는 폰트를 고르고 클릭하면 된다.
6. 폰트를 티스토리에 업로드 하기
원하는 폰트를 선택하고 나면, 가운데 '웹폰트로 사용'을 확인할 수 있다. 안에 있는 코드를 통째로 복사한 다음, 아까 열어두었던 티스토리 CSS 편집으로 간다.
cmd+f / ctrl+f를 누르고 /*Web Font Load */를 찾아주고 붙여넣기 해주면 된다. 이 작업을 함으로써 접속할 때마다 웹 폰트를 불러오게 되는 것이다.
7. #header h1 :블로그 로고
cmd + f / crtl + f 를 이용해서 #header h1을 찾고, 불러 넣기 했던 폰트 이름을 붙여 넣기 해주면 된다 (' '를 잊지 않아야 한다!). 이 header는 블로그 로고에 적용되는 부분이기 때문에, 다른 폰트를 넣고 싶은 사람은 다른 폰트를 불러오면 된다 (당연히 다른 폰트도 업로드해두었다면 가능한 것이다!).
8.. post-cover h1 :본문 상단 제목
동일하게 cmd + f / ctrl + f를 이용해서 '. post-cover h1'을 찾아 똑같이 font-family에 폰트명을 똑같이 붙여 넣기 해주면, 본문 상단 제목의 폰트가 변경된다. 찾을 때 post 앞에 .을 입력하는 것을 까먹지 말자!
9. Entry Content :본문 제목
다음은 본문 제목을 위한 작업이다. Entry Content를 찾아 h 태그가 붙어있는 곳 모두 font-family의 폰트명을 붙여넣기 해주면 된다.
10.. sidebar h2 :사이드 바
사이드 바의 폰트를 바꾸는 작업이다. '. sidebar h2'를 찾고 font-family의 폰트명을 붙여 넣기 해주면 된다.
11. /* Type Selector Reset */ :전체 폰트
/* Type Selector Reset */를 찾은 뒤, font-family에 원하는 폰트명을 추가해주면 폰트 바꾸기는 끝이 났다.
12.. entry-content p :폰트 크기
entry-content p 부분을 찾아주면 된다. 이 부분은 본문 폰트 사이즈를 조절하는 수 있는 코드다. 그리고 font-size를 보면 숫자 em이라 적혀 있는 것을 확인할 수 있는데, 이 부분이 바로 글자 크기를 다루는 곳이다. em 단위가 낯설게 느껴질 수 있는데, 이 단위는 줌 기능이 없는 웹 페이지에서 글꼴 크기 옵션을 조절했을 때 작동하는 백분율 상대 크기이다. 따라서 픽셀을 사용해도 되지만, em을 사용하면 웹으로 볼 때 더 깔끔하다. 픽셀-em 단위 변환은 아래와 같다.
| pixels | em |
| 6px | 0.375em |
| 7px | 0.438em |
| 8px | 0.5em |
| 9px | 0.563em |
| 10px | 0.625em |
| 11px | 0.688em |
| 12px | 0.75em |
| 13px | 0.813em |
| 14px | 0.875em |
| 15px | 0.938em |
| 16px | 1em |
| 17px | 1.063em |
| 18px | 1.125em |
| 19px | 1.188em |
| 20px | 1.25em |
| 21px | 1.313em |
| 22px | 1.375em |
| 23px | 1.438em |
| 24px | 1.5em |
위 표를 참고해서 입력하면 되는데 글씨 크기가 가늠이 안된다면, 지금 보고 있는 블로그의 글씨 크기는 1.25em이니 크기가 마음에 든다면 동일하게 입력해주어도 좋을 것 같다.
위 사진이 바로 바뀐 글씨체와 크기 사진이다. 그럼 각자 개성에 맞게 블로그를 잘 꾸몄으면 한다. 좋은 하루 되었으면 좋겠다.
Instagram:
doyun._.gu
'Computer Programming > HTML, CSS, LaTex' 카테고리의 다른 글
| 아이폰/아이패드/맥북 Pages 수식 삽입하기 (26) | 2021.10.29 |
|---|
