티스토리 블로그 글 제목 및 본문 서체 설정하기 ( CSS 또는 스킨위자드 이용 )

반응형

티스토리 블로그를 사용하면서, 포스트의 글제목 또는 본문의 서체를 자기가 원하는 서체로 바꾸고 싶다는 생각이 들었습니다. 스킨위자드? CSS? 뭔가 어려울 것 같다는 느낌이 듭니다만 실제로 따라해보니까 하나도 안 어렵습니다!자, 여러분도 그러면 한번 천천히 저를 따라해보시기 바랍니다.

 

(1) 스킨위자드를 이용하는 방법

 

스킨위자드는 티스토리 관리 메뉴에 존재하는 '프로그램'중 하나입니다. 스킨위자드를 이용하면 CSS의 어려운 코드들을 수정할 필요 없이 간단한 마우스 클릭만으로 원하는 블로그 스킨을 설정할 수 있습니다. 다만, 그 한계가 있기 때문에 좀 더 멋진 디자인, 인터페이스를 원하는 유저라면 CSS를 통하여 좀 더 '고급기술'을 시전할 필요가 있겠습니다. ^^; 그러한 고급기술을 배울려면 상당한 컴퓨터 일반지식, 웹 프로그래밍에 대한 지식이 필수라 생각됩니다. 저도 열심히 공부해서 그러한 기술들을 익히면 정말 좋을텐데.. 지금은 햇병아리 수준에 불과하네요.

 

잡담은 그만하고, 자 먼저 관리자 버튼을 클릭하여 관리자 화면으로 들어갑니다. 관리자 화면에서 스킨을 클릭하시면 스킨위자드를 선택하여 블로그 스킨을 설정할 수 있습니다.

 

 

 

스킨위자드 화면에서 보면 상단에 세가지 메뉴가 있습니다. 배경, 타이틀, 게시글이 그것인데요 게시글 버튼을 클릭하면 하단에 제목 글자색 글꼴 크기, 게시글 글자색 글꼴 크기 설정화면이 나옵니다. 여기서 원하는 크기, 색상, 서체를 설정해주시면 됩니다. 참 간단하죠?

 

 

(2) CSS를 이용하는 방법

 

블로그 메인 화면에서 관리자 버튼을 클릭하여 관리자 화면으로 들어옵니다. 그런 다음 HTML/CSS 편집을 누릅니다. 그리고 Ctrl+F 단축키를 사용하여 찾기 기능을 이용합니다. title Wrap으로 검색하면 아래 사진과 같이 화면이 나오게 됩니다.

 

 

 

여기서 우측에 빨간색 테두리 친 부분이 서체를 설정한 부분입니다. font-family: inherit 바로 이 부분입니다. inherit이 나오는 이유는 제가 스킨위자드에서 제목 글자색 - 글꼴을 기본값으로 설정했기 때문입니다. inherit의 뜻은 상속이며, 아마도 상위의 명령 코드에서 기본값이 설정된 것을 상속한다는 의미인 것 같습니다. ( 제가 예전에 배웠던 프로그래밍 지식이 맞다면... 맞겠죠? ) 그러므로 inherit을 바탕체로 바꾸고 싶으면 영어로 batang이라고 쓰시면 됩니다. 궁서체일 경우에는 gungsuh, 굴림체는 gulim, 돋움체는 dotum입니다. ( inherit(기본값) 상태로 두셔도 자동적으로 돋움체로 표시됩니다. )

 

이번에는 포스트 본문 서체로 바꿔봅시다. 먼저 style.css에서 .article { 혹은 @post-body-font를 검색하면 아래와 같이 해당 단어가 있는 부분이 나타납니다. 저 같은 경우에는 .article을 검색하였습니다.

 

 

자 척봐도 감이 오시죠? 이 명령코드 중에 우측하단에 있는 font-family: batang;이 바로 포스트 본문 서체를 설정하는 부분입니다. 저는 본문은 고딕계열보다는 산세프리체가 낫다고 생각되어 바탕으로 설정하기로 결정했습니다. 영문으로 batang 를 타이핑했습니다. 이같은 경우에 실제 티스토리 에디터상에서는 기본값은 돋움으로 글을 쓰게 되지만 최종적으로 블로그에 포스팅되어 보여지는 글은 css에서 설정한 바탕체로 나타납니다.

  

 

 

에디터상에서 일일이 바탕으로 고치기가 귀찮기 때문에 이렇게 해놓았습니다만, 계속 미리보기를 통해 어떻게 출력되는지를 확인해야되는 단점이 있습니다. 어느 쪽이 좋은지는 블로거 본인이 선택하시면 될 것입니다. 마지막으로 최종 화면출력 이미지를 올려놓는 걸로 마무리 하겠습니다.

 

 

 

참고 및 인용 - http://ccoma.tistory.com/789

반응형

이 글을 공유하기

댓글

Designed by JB FACTORY