티스토리 티에디션 디자인 폰트 변경 하기

티스토리 블로그를 운영 하면서 어떻게 메인을 이쁘게 꾸밀지 고민은 누구나 다 해 보았을 것이다. 그렇다면 티에디션을 이용한 블로그 디자인에 대하여 한번쯤 시도 해 보았을 것이다. 그러나 이것도 마음데로 되지 않는다. 정해져 있는 메뉴 내에서 디자인을 변경 하려고 하니 머릿속에서 그려져 있는 디자인을 그대로 표현 할수가 없는 것은 당연하다. 그래서 html을 이용하면 정해져 있는 메뉴 외의 설정을 할 수 있는데 평소 프로그래밍에 깊은 지식이 있지 않으면 쉽지가 않다. 필자는 티에디션을 통한 디자인 중 html을 이용하여 제한없이 글꼴 변경을 해보겠다.

티에디션을 이용하여 디자인을 하다 보면 위 사진과 같이 글꼴에 대한 제한에 막히는 경우가 있을 것이다. 선택 할 수 있는 글꼴이 5개 뿐인데 그것도 모두 디자인이 구리다. 이 글꼴을 이용해 디자인을 한다고 하더라도 안하니만 못할 것 같다는 생각이 든다. 그러면 다른 글꼴을 적용 하는 방법은 아래와 같다.

방법은 의외로 간단하다. 위 사진과 같이 선택한 아이템의 디자인 탭에서 HTML 수정 화면으로 들어간다. 그 후 <h2 class="tt-item title"> 문구 뒤에 원하는 폰트를 입력한다. ( h가 header의 약자인 것으로 추정된다.) 코드를 보면 대충 눈치가 오겠지만 이부분은 각 아이템의 title에 대한 글꼴을 설정한다. 위 그림에서 음영처리 된 구문을 입력하면 된다.

<span style="font-family:원하는글꼴'">

이렇게 입렵하면 바로 적용 된다. html을 이용 하면 방금 적용 한 아이템의 title 외에 디자인 된 모든 글꼴을 변경 할 수 있다.

디자인 내의 포스트의 제목을 편집 하기 위해서는 위 사진에서 보이듯이 <p class="tt-post-title"> 문구 뒤에 원하는 글꼴을 입력하면 된다. ( 여기서 나오는 p는 post의 약자로 추정 된다. )

<p style="font-family:원하는글꼴'">

<p class="tt-post-title">이 포스트의 제목이라면 <p class="tt-post-summary"> 는 포스트 내용 요약 부분이라는 것을 코딩을 보면 쉽게 감을 잡을 수 있다. 이부분 뒤에 위와 같이 코드를 적용 한다면 원하는 글꼴로 적용 할 수 있다. 티에디션으로 적용 되는 모든 아이템의 경우 같은 로직으로 동작 하기 때문에 위와 같은 방법으로 하나씩 찾아서 적용 한다면 모든 글씨체를 변경 할 수 있다.