지난 포스팅에서는, 러프하게 만든 스킨데이터를 티스토리에 업로드하여 적용시키는 과정까지 진행했다. 실제로 결과물을 보면서 작업하는 것이 더 좋기 때문에 진행한건데.. 바로 문제가 보였다. 바로 본문이 너무 작고, 폰트가 너무 못생겼다는 점이다.
그래서 이번 포스팅에서는 본문 글씨체를 키우고, 폰트도 원하는 것으로 바꾸는 방법에 대해 알아보자.
티스토리 글씨체를 바꿔보자
먼저 글씨체를 적용하는 방법에 대해서 알아보자. 두가지 방법이 있다. 첫째, 웹폰트를 이용, 별도의 폰트 업로드과정 없이 바로 적용. 둘째, 별도의 폰트를 다운받고, 티스토리 스킨 데이터에 같이 업로드해서 적용.
원하는 폰트가 웹 상에서 제공된다면, 굳이 다운받고 스킨에 업로드할 필요는 없다. 특히 아래 구글에서 제공하는 자체 웹폰트를 사용할 경우, 아주 간단한 코드 추가만으로 글씨체를 변경할 수 있다.
https://fonts.google.com/?subset=korean
보다시피 나눔체들을 제공하고 있는 모습이다.
각 폰트를 다양한 케이스로 바꿔가면서 비교해볼 수 있는데, 특히 폰트 사이즈를 바꿔가면서 미리볼 수 있는 기능이 아주 유용하다. 왜? 원하는 폰트 크기까지 한번에 결정할 수 있기 때문이다. 필자는 일단 나눔명조 15px, BOLD체로 결정하였다. 원하는 형태로 맞춘 후, 각 폰트의 우측 상단에 있는 플러스 모양을 눌러보자.
위와 같은 창이 뜰 것이다. 보다시피, 두가지 코드가 나와있는데...
<link href ~> : 웹 폰트를 불러오는 코드로, 우리가 만든 HTML 파일의 <head></head> 사이에 복붙해준다.
font-family ~ : CSS에 해당 코드를 복붙하여 적용.
여기서 첫번째 코드는 정말 복붙이나, 두번째는 약간의 코딩이 필요하다. 다음처럼 말이다.
위 코드를 작성하여, CSS 파일의 한켠에 복붙해준다. 이게 의미하는 바는, HTML의 body 사이에 들어있는 모든 형태의 코드에 대해 적용시키겠다는 것이다. 즉, 폰트를 나눔명조로 했기 때문에, 전체 폰트를 나눔명조로 바꾼다는 의미.
여기까지해서 스킨으로 업로드하면 글씨체가 바뀐 것을 알 수 있다. 업로드하는 방법은 지난포스팅에서..
그런데, 여전히 문제가 있다. 바로바로........
본문 글씨가 콩알만하다는 점.. 그리고 제목이나 지은이 이름도 폰트가 밸런스가 안맞는 느낌. 일단 본문 글씨를 바꾸는 방법은, 지난번에 포스팅한 것에서 이미 언급했던 부분이다. 즉, css의 .article 에서, font-size를 10px에서 15px로 늘려보자. (css에 있는 코드)
보다시피 이쁜 크기로 나타난 것을 볼 수 있다. (글씨체가 바뀐 이유는, 명조가 생각보다 안이뻐서... 고딕으로 바꾸었다.)
이렇게, 본문 크기와 글씨체를 바꾸는 방법에 대해서 알아보았다. 사실 이부분은 비단 필자만의 티스토리 뿐만 아니라, 대체로 모든 티스토리 스킨들에 적용할 수 있는 부분이다. 이 방법 외에, 별도의 폰트를 이용, 티스토리에 업로드하여 사용하는 방법은 다음 기회에..
[IT & IT/티스토리 스킨 제작] - #7. 티스토리 스킨 업로드하는 방법
[IT & IT/티스토리 스킨 제작] - #6. Bootstrap을 이용해서 티스토리 글제목, 글내용을 배치해보자.
[IT & IT/티스토리 스킨 제작] - #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자.
[IT & IT/티스토리 스킨 제작] - #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본
[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치
[IT & IT/티스토리 스킨 제작] - #2. 파워포인트로 티스토리 스킨을 만들어보자.
'Developer > 티스토리 스킨 제작' 카테고리의 다른 글
| #10. 티스토리 상단바를 창 크기에 따라 조절하기 (246) | 2018.04.10 |
|---|---|
| #9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법 (248) | 2018.04.05 |
| #7. 티스토리 스킨 업로드하는 방법 (598) | 2018.03.30 |
| #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. (757) | 2018.03.29 |
| #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자. (591) | 2018.03.28 |
댓글