[정보] 티스토리 모바일웹 본문 꾸미기 2탄 | 폰트 추가하기

1. 티스토리 모바일웹 본문 꾸미기 2탄 | 폰트 추가하기

 

2탄이라고 거창하게 썼지만, 사실 간단하게 쓸 수 있다. 먼저 1탄을 안 본 사람들은 1탄을 마저 보고 오시면 좋다. 대충 어떻게 모바일웹을 꾸밀 수 있는지 확인할 수 있을 것이다.

 

[정보] 티스토리 모바일웹 본문 꾸미기 1탄 | 폰트 바꾸기

 

먼저 우리는 다양한 폰트를 사용해볼 것이고, 문장간의 간격을 넓혀주는 등의 활동을 해볼 거다. 그리고 위쪽에 있는 제목 부분을 예쁘게……까지는 모르겠고, 일단은 내가 마음에 드는 폰트로 수정해줄 것이다.

 

 

2. 폰트 다양하게 사용하기

 

2.1 폰트 추가 방법

 

1탄을 봤으면 알겠지만, 나는 나눔스퀘어 네오체를 사용하고 있다. 그래서 앞선 1탄에 있는 폰트를 가지고 와줄 것이다.

 

<style>
여기는 폰트
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }

여기는 꾸미기 영역
.blogview_content{ font-family: 'NanumSquareNeo-Variable'; }
</style>

 

위에는 구분하기 쉬우라고 나름 구분을 해놓은 것이니, 여러분은 저렇게 적지 않아도 된다. 실제로 저렇게 작성할 경우, 코드가 전혀 안 먹힌다.

 

일단 폰트를 추가해줄 건데, 나는 나눔명조체를 한 번 추가해보도록 하겠다. 아무래도 나눔스퀘어 네오체와 나눔명조체는 차이가 있고 변화하는데 쉽게 보이기 때문에 그렇게 선택했다. 여러분들은 원하는 폰트로 사용하시면 된다.

 

눈누 사이트나 구글 폰트를 활용하시면 되고, 나 같은 경우는 눈누 사이트를 활용해서 웹폰트를 가져와보겠다.

 

<style>
여기는 폰트
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);.nanummyeongjo * {font-family: 'Nanum Myeongjo', serif;}

여기는 꾸미기
.blogview_content{ font-family: 'NanumSquareNeo-Variable'; }
</style>

 

두 번째 줄에 적힌 것이 나눔 명조체다.

 

그럼 나는 이걸로 뭘 할 거냐면, 제목 1, 제목 2, 제목3에 대해서 나눔명조체를 적용해줄 거다.

 

2.2 제목에만 다른 폰트로 적용하기

 

우리는 글쓰기에서 제목1, 제목2, 제목 3, 본문 1, 본문 2, 본문 3을 본 적이 있을 것이다. 나도 이것만 보고 제목 1은 h1, 제목 2는 h2, 제목 3은 h3일 거라고 생각했지만, 이건 오산이다. 제목 1은 h2, 제목 2는 h3, 제목 3은 h4이다. 그리고 본문 1, 본문 2, 본문 3은 p라는 태그를 사용하는데, 가끔 span이 사용되기도 한다.

 

---

* p와 span의 차이는 div와 같이 비교가 되는데 span은 자녀의 요소라서 div와 p를 감싸줄 수 없지만, div와 p는 감싸줄 수 있다. 이런 설명으로만 나는 이해했다. 대신 내가 피부로 느꼈던 p와 span은 기본 모드에서 색상을 변경하면 색상 변경한 부분은 span의 값으로 입력됨을 알 수 있었다.

---

 

일단 제목에만 다른 폰트를 사용할 건데, 앞서 말했듯 우리는 사용하는 스킨 따로, 티스토리 모바일웹에 따로 적용되는 폰트를 지정해줄 거라, 아래와 같이 입력해준다.

 

<style>
폰트1 코드
폰트2 코드

.blogview_content{ 폰트명 1}
.blogview_content h1, .blogview_content h2, .blogview_content h3{ 폰트명 2}
</style>

예시)

<style>
여기는 폰트
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css); .nanummyeongjo * {font-family: 'Nanum Myeongjo', serif;}

여기는 꾸미기
.blogview_content{ font-family: 'NanumSquareNeo-Variable'; }
.blogview_content h1, .blogview_content h2, .blogview_content h3{font-family: 'Nanum Myeongjo', serif;}
</style>

 

위와 같이 해주면 아래 그림처럼 h1, h2, h3에는 나눔 명조체가 적용되고 그 외에 남은 폰트는 다음과 같이 설정이 된다.

 

h2, h3, h4에 다른 폰트 적용하기

 

이렇게까지 해줘도 사실 가독성이 좋지는 않다. 안타깝게도 그게 현실이다. 폰트만으로 가독성이 좋아지는 경우는 거의 없다. 내가 생각하는 가독성은 폰트도 폰트지만 자간, 줄 간격이 상당히 많은 비중을 먹고 들어간다고 생각한다.

 

여기에서 말하는 줄 간격부터 먼저 수정을 해주자면 줄 간격은 line-height라는 걸 써서 꾸며줄 거다.

 

<style>
여기는 폰트
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css); .nanummyeongjo * {font-family: 'Nanum Myeongjo', serif;}

여기는 꾸미기
.blogview_content{ font-family: 'NanumSquareNeo-Variable'; line-height:1.8; }
.blogview_content h1, .blogview_content h2, .blogview_content h3{font-family: 'Nanum Myeongjo', serif;}
</style>

 

내 개인적으로는 1.7 이상을 추천한다. 글자 크기에 따라서 줄 간격이 너무 크면 조금 그렇지만, blogview_content의 본문 2의 기준으로  p의 크기는 16px 정도로 알고 있다. 따라서 그에 맞춰서 줄 간격을 설정해주는 것이 가장 좋다.

 

line-height의 값을 수정하여 주었다.

 

 

앞선 사진과 비교해봐도 글자 보이는 게 다르지 않은가? 여기에서 word-spacing과 letter-spacing을 사용해서 꾸며줄 거다. 여기에서 word-spacing과 letter-spacing의 차이는 word-spacing은 단어 사이의 간격 letter-spacing은 글자와 글자 사이 간격을 뜻한다.

 

「2탄이라고 거창하게 썼지만」이라는 문장을 놓고 보자.

 

word-spacing의 간격은 "2탄이라고/거창하게/썼지만"처럼 /의 간격을 의미한다면,

letter-spacing의 간격은 "2/탄/이/라/고/거/창/하/게/썼/지/만"처럼 /의 간격을 의미한다.

 

 

<style>
여기는 폰트
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css); .nanummyeongjo * {font-family: 'Nanum Myeongjo', serif;}

여기는 꾸미기
.blogview_content{ font-family: 'NanumSquareNeo-Variable'; line-height:1.8; letter-spacing: 1.5px; word-spacing: 2.3; }
.blogview_content h1, .blogview_content h2, .blogview_content h3{font-family: 'Nanum Myeongjo', serif;}
</style>

 

이걸 잘만 써줘도 가독성이 꽤 괜찮아진다. 아래의 값은 단순한 예시이니, 여러분이 원하는 값을 찾는 과정은 본인이 거치는 것이 좋다고 생각한다. 미리보기를 통하면 티스토리 모바일웹에서 어떤 식으로 보이는지 알 수 있기 때문에 그런 식으로 사용하면 된다.

 

원래는 제목까지 꾸미는 걸 쓰려고 했는데 다음 편으로 넘겨서 설명해봐야 할 것 같다. :-) 차근차근 다 설명할 테니 그때까지 안녕히!!!