티스토리 블로그 CSS로 폰트 변경하는 방법

---

이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 

---

 

 

 

오늘은 티스토리 블로그의 폰트 글꼴과 사이즈를 변경하는 방법을 알아보겠습니다.

 

CSS 폰트 사이즈는 rem

제 블로그의 CSS 카테고리에 위와 같은 글이 있습니다.

대충 요약하자면 '웹페이지 사용자의 편의를 위해 폰트의 단위는 픽셀(px)을 쓰는 것보다 rem을 쓰는 것이 좋다'라는 것인데, 이 블로그 말고 저의 메인 블로그가 스킨 편집의 CSS를 들어가 보니 폰트의 단위가 픽셀로 되어있는 것을 발견했습니다.

 

CSS 폰트의 글꼴, 굵기, 줄 간격 설정

그리고 폰트의 글꼴을 변경하는 방법은 위의 글을 참고바랍니다.

 

참고로 저의 메인 블로그의 스킨은 #2 스킨입니다. 하지만 잘 읽어보시면 다른 스킨들에도 얼마든지 적용이 가능합니다.

 

 

 

 

티스토리 #2 스킨의 경우

 

티스토리 블로그 html 편집 들어가는 법

혹시라도 티스토리 블로그의 html과 css 편집을 어떻게 들어가는지 모르시는 분이나 html과 css의 소스 코드 내에서 검색을 하는 방법을 모르시는 분들은 위의 글을 확인 바랍니다.

 

 

 

저의 메인 블로그의 CSS입니다.

폰트 사이즈의 단위가 픽셀로 되어있는 것이 보이실 겁니다.

 

 

 

반면 이 블로그는 폰트 사이즈가 em으로 되어있습니다.

em과 rem의 차이는 정확히는 모르겠지만, 어쨌든 둘 다 웹페이지의 사용자가 폰트 사이즈를 변경할 수 있는 단위입니다.

 

 

 

위의 이미지가 폰트를 변경할 저의 메인 블로그이고, 아래의 이미지가 현재의 블로그입니다.

 

 

 

이미지로 잘 전달이 될지 모르겠지만, 글씨의 크기에 미묘한 차이가 느껴지고 메인 블로그보다 이 블로그가 더 읽기 편하게 느껴집니다.

 

 

 

 

아직은 따라하지 마세요. 실패하는 과정을 보여드리는 겁니다.

메인 블로그의 body 선택자의 폰트 글꼴과 사이즈를 변경해봤더니..

 

 

 

블로그 글의 본문뿐만이 아니라 블로그의 이름까지도 글꼴이 변경이 됐고, 무엇보다 중요한 폰트의 크기가 그냥 그대로인 것 같은 느낌이 듭니다. (캡처는 하지 않았지만, 블로그의 카테고리들도 글꼴이 변경되었습니다.)

분명 더욱더 상세한 하위의 선택자가 있을 것 같다는 느낌이 듭니다.

 

 

 

이 선택자가 문제였습니다.

#2 스킨의 경우에는 .area_view p{ } 라는 선택자의 속성을 변경해줘야 합니다. 여기가 본문에 해당하는 곳입니다.

저는 블로그의 이름이나 카테고리 등의 글꼴은 그대로 두고, 본문만 손대고 싶습니다. 그래서 body의 속성은 다시 원상태로 되돌려놓았고, .area_view p{ } 의 속성에 font-family가 없길래 추가를 해서 글꼴을 변경해주었고, 폰트 사이즈도 15px 에서 1rem으로 바꿨습니다.

 

 

 

그랬더니 폰트가 확실히 눈에 띄게 바뀌었습니다.

 

 

 

본인의 티스토리 블로그의 본문에 해당하는 선택자를 찾아내는 방법은 (크롬 기준으로) F12를 눌러서 페이지의 소스 코드를 봐야 합니다.

이렇게 본문의 선택자가 .area_view p{ }라는 것을 알게 됐습니다.

 

 

 

이 글만 보고는 뭐가 뭔 소리인지 하나도 모르겠다... 하시는 분들은 아직 함부로 티스토리 블로그의 html이나 css를 손대서는 안되는 분들이실지도 모릅니다.

저의 블로그의 html과 css 카테고리를 하나씩 다 봐가면서 차근차근 공부해보시면 무슨 말인지 다 알게 되실 겁니다.

코딩에는 크게 관심 없고 그냥 단순히 블로그의 폰트만 변경해보고 싶을 뿐이다.. 하시는 분들에게는 쓸데없이 많은 걸 공부하게 되는 것일 수도 있지만요..

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---