"정보" 티스토리 꾸미기(웹폰트 적용편)

 

티스토리 꾸미기 두번째는 웹 폰트를 적용해 보는거에요.

 

포토샵을 이용해서 맘에드는 폰트를 적용하고,

디자인하는.. 작업은 한번정도 해보셨을꺼 같아요. 

그런 작업은 대부분

인터넷에서 폰트를 찾고 그걸 컴퓨터에 설치하면 사용할 수 있었조.

하지만 웹폰트는 살짝 적용방법이 달라요.

 

사실 웹폰트를 적용해 볼 일이 크게 없어요.

저야 직군이 웹퍼블리셔라서 항상 작업을 하니까 알고 있는 거지만....

그외 분들은 대부분 모르실꺼에요.

 

일단 폰트 적용 방법을 알려드리기 전에... 더 중요한게 있어요.

 

우리가 무엇을 바꾸던간에... 꼭 필요한 것이 있는데..

바로...어디 부분을 어떻게 바꿔야 하고,

소스는 어디에 있는지 위치를 찾을 수 있어야

어떤 작업이든 가능해요.

 

그 위치 찾는 방법이 여러가지가 있지만

그중 가장 손쉽게 찾을 수 있는걸 알려드릴께요.

처음엔 어렵다 느껴지지만 하다보면 정말 쉬워요.

 

 

 

 

일단 익스플로러를 이용해서 블로그로 접속하세요.

(다른 브라우저도 가능하지만 가장 많이 사용되는 익스플로러로 설명할께요~)

 

 

 

 

그런 다음 키보드에 있는 F12 버튼을 클릭~ 

그럼 DOM탐색기라는게 나올꺼에요.

 

 

 

 

화살표 아이콘을 누른 후 수정 원하는 부분에 마우스를 클릭하면 되요.

저는 티스토리 꾸미기! 라고 되어있는 본문 제목을 수정해 볼께요.

 

 

 

 

화살표가 있는 아이콘으로 제목 부분을 클릭하면 스타일이라는 부분에

이미지 처럼 소스들이 나올꺼에요.

내용을 보면 style.css:170 <<< 이라고 되어 있는 파란 글씨가 보이시조?

 

그 부분이 바로 소스의 위치에요.

티스토리 꾸미기! 라는 제목의 소스가

style.css 라는 파일의 170번째 줄에 있다 이런 말인거조.

 

이렇게 찾으니 생각보다 쉽조?

어렵게 느껴진다 해도 몇번 하다보면 쉬울꺼에요~ 걱정마세요!

눈에 익지 않으면 누구든 어렵게 느껴진답니다.

 

 

 

 

크롬의 경우는 이렇게 나와요.

파이어 폭스 등 다른 브라우저도 비슷한 형태로 나오니 참고하시면 되요~

 

 

 

 

소스의 위치를 찾았다면 블로그 관리자 페이지로 간 후

HTML / CSS 편집으로 접속하세요~

 

 

 

 

그럼 요런 화면이 나오조!

우린 구조(html)를 바꿀께 아니고 스타일(css)을 바꿀꺼니까

 

 

 

 

CSS 쪽으로 들어가면 되요.

그런 다음 아까 확인한 170번째 줄을 확인해 보는거조~

 

 

 

 

그럼 아까 확인했던 제목 부분의

 tit_post << 클래스 명이 170번째 줄에 있는게 보일꺼에요.

위치를 맞게 찾았네요.

 

 

 

 

tit_post 라는 클래스 명을 검색해서 찾을 수도 있겠지만...

초보인 경우... 위치로 찾는게 더 쉬울꺼에요.

쫌 익숙해지고 클래스가 무엇인가 라는것도 알게되면 그때는

검색을 통해 찾으면 되요.

 

우리는 티스토리에 한해 해볼꺼고 초보니까 그냥 위치로 찾는걸로 할께요~

 

 

 

 

위치도 알았으니 본격적으로 스타일을 바꿔봐야 겠네요.

젤 처음으로 할일은 원하는 폰트를 찾는거에요.

저의 경우 배달의민족 폰트가 요즘 괜찮더라구요.

저는 배달의 민족 폰트로 수정해볼께요!

 

무료로 제공 되는 폰트들이 많이 있으니 원하는 스타일을 찾은 다음

동일한 방법으로 적용하시면 되요~

 

단 상업적으로 사용될때는 반드시 무료 폰트인지 유료 폰트인지를 확인한 후 사용해야되요.

상업적인 공간에 유료폰트를 맘대로 쓰면 나중에 어마어마한 벌금을 내야 한답니다.

 

 

 

 

제가 사용할 배달의 민족 폰트를 찾으니 저렇게 확인이 되네요.

웹폰트는 인터넷에서 찾으시면 되요.(예 나눔고딕 웹폰트, 나눔고딕 구글 웹폰트 등.. )

그리고 구글 웹폰트로 적용하시는게 가장 대중적이고 문제없이 사용하기 좋아요~

 

저 많은 내용 중 빨간 표시가 된 부분만 우리는 사용할꺼에요.

 

 

 

 

웹 폰트는 (https://www.google.com/fonts/) 사이트로 접속해서

맘에 드는 폰트가 있는지 확인 후 사용해도 되고,

리스트에 없는 폰트는 검색을 통해 찾으면 되요~

 

 

 

 

일단 웹 폰트를 내 블로그로 불러와야 사용이 가능한건데

아까 찾은 내용을 css소스에 적어주는게 웹폰트를 불러오는 작업을 하는거에요.

 

 

 

 

이미지와 같이 젤 첫 줄에 있는 @charset "UTF-8"; << 내용 밑에 작성해 주면 되요~

굳이 타이핑 할 필요 없이 복사 + 붙여넣기~ 

 

이미지 처럼 작성이 됐다면 일단 웹폰트를 블로그로 불러오는 것 까지는 성공한거에요.

그럼 이제 블로그에 적용을 해야겠조??

 

각각의 폰트에는 이름이라는게 있어요.

그 폰트 이름을 소스에 작성해 주면 되는데..

우리가 불러온 배달의 민족 폰트 이름은 무엇일까요???

 

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css); http로 시작되는 url보이시조?

그 url을 브라우저 주소창에 넣고 엔터~ 누르면 메모장이 하나 열릴꺼에요.

 

 

 

 

메모장에서 우리가 확인 할 내용은

font-family: 'Hanna'; 라는 부분이에요.

'Hanna' 라는 이름이 제가 적용할 폰트의 이름이였네요!

 

폰트 이름을 알았으니 이제 소스에 작성해줘야겠조?~

 

 

 

 

원래 작성 된 소스에 font-family: 라는게 있다면 그걸 수정해주거나 추가해주면 되지만...

소스에 아예 font-family: 라는게 없으니 >> font-family: 'Hanna'; << 요렇게 넣어주면 되요.

이것도 복사+붙여넣기 하시면 됩니다~

(폰트입력 시 한글이거나 공백이 있는경우 '' << 감싸주는게 좋습니다.)

 

소스에 넣으실 때는 반드시 { 내용 } 대 괄호 안에 작성이 되야만 하고,

이미지를 잘 보고 똑같이 넣으면 됩니다~

 

그런 후 저장버튼을 클릭~

 

 

 

 

오호~ 확인해 보니 폰트가 바뀌어 있네요..ㅋㅋ

만족 스럽군요 ㅎㅎㅎ

 

 

 

 

폰트 스타일만 바꾸니 먼가.. 밍밍한 느낌이에요.

이미지 처럼 색도 바꾸고 크기도 좀더 크게 하고 싶네요.

 

그렇다면 다시 170번 줄로 가서 소스를 좀더 추가해 넣으면 되요.

일단 폰트 색상을 변경하는 속성은 color 이고,

폰트 사이즈를 변경하는 속성은 font-size 라고 해요.

 

170번째 줄 소스를 일단 확인합니다.

.tit_post { font-family: 'Hanna'; color:red; font-size:40px; padding:5px 0 10px; font-weight:normal; line-height:43px; }

일단 {} 대 괄호 안에 모든 내용이 입력되어 있조? 반드시 확인해 주세요~

기존 소스에 color / font-size 라는게 있다면 내용을 수정을 해주면 되고

없다면 아까처럼 추가를 해주면 되요.

 

 

 

 

일단 원하는 컬러를 적용하려면 컬러의 이름을 알아야 하조.

색상의 이름은 포토샵에서 컬러 추출을 해보면 알수 있어요.

#까지 포함해서 #64696c << 이렇게가 컬러 이름이 되는거에요. 

아님 그냥 yellow , red, 요런 값으로 넣어도 되구요.

 

포토샵에서 추출한 값을 넣을때는 #을 함께 작성해 주면 되구요. ( color:#64696c; )

그냥 red 이렇게 넣을때는 # 없이 그냥 작성하면 되요~ ( color:red; )

 

이번엔 색상이 아닌 폰트 크기 조절을 할께요!

font-size:40px; 라는건데..

24px , 30px... 뭐 요런식으로 원하는 크기 뒤에 px만 넣어주면 되요.

 

px 말고도 em등등 단위가 있지만...

설명하려면 한도 끝도 없고 우리는 초보니까 그냥 px로~

 

여기서 중요한건...

color 다음에는 : 나오고 #64696c 나오고 ; 마무리 한다는거에요.

color 는( : ) #64696c 이걸로 할께 ( ; ) 끝 이라는 뜻이조.

font-size 는( : ) 40px 로 할께 ( ; ) 끝 이렇게 : , ; 는 매우 중요해요.

 

; 이것이 있어야만 color 다음에 폰트 크기를 쓸수 있다는 것만 알고 계시면 되요.

그리고 이 모든 내용은 {  } 안에 작성이 되야 한다는 점!

 

.tit_post { font-family: 'Hanna'; color:red; font-size:40px; font-weight:normal; line-height:43px; }

.tit_post << 이것에 대한 스타일 작성은 { 속성:값; 속성:값; 속성:값; } 이다

이런 개념 이에요.

스타일의 이름은 : 이거야 ; 스타일작성 끝 이런 구조라고 이해하시면 되요.

 

 

 

 

최종적으로 위 내용대로 다 수정하면 이미지처럼 바뀌에 되는 것이조~

 

엄청 먼가 복잡하조?? ㅎㅎㅎ

저도 어떻게든 풀어서 쉽게 쓴다고 썼지만

처음 보는 분들인 경우 복잡해 보일꺼 같다는 생각이 들어요.

 

이럴땐 그냥 그대로 넣어보는게 가장 빨리 이해할 수 있는 방법이니까

일단 소스에 추가하고 저장해 보세요!

 

color:#000000; 또는 color:red; 컬러 바꾸기 (색상 코드는 포토샵에서 확인 가능)

font-size:11px; 글자 크기 바꾸기 (숫자에 따라 글자 크기가 지정)

font-weight:normal; 또는 font-weight:bold;  글자 굵기 바꾸기 (글자 굵기가 굵게/bold ,얇게)

line-height:150%; 글자 간격 바꾸기 (문장이 두줄로 나올때 글자 라인 간격)

font-family:'Hanna'; (폰트 스타일 지정)

font-style:italic; 또는 font-style:normal; 글자 기울기 바꾸기 (비스듬하게 눕히기/italic, 기본 글자체)

 

보통 많이 쓰는게 이정도인거 같네요.

 

만약 내용을 맞게 입력했는데도 원하는데로 수정이 안된경우.

color:red!important; << !important 라고 작성해 주세요.

 !important는 ; < 바로 앞쪽에 쓰여지면 되요~

 

!important 라고 쓰는 이유는 해당 부분 스타일을 무조건 이 내용으로 지정한다.

다른곳에 작성된 내용보다 지금 내용을 최우선으로 적용한다. 라는 뜻이에여.

 

소스를 직접 작성 한게 아니다 보니

어딘가에 동일한 내용이 약간 다르게 중복으로 작성되어 있을수도 있거든요.

그로인해 가끔 맞게 작성을 했어도 적용이 안되는 경우가 있어요.

 

tit_post 이것에 대한 스타일 지정을 170번 줄에 했는데

180번 줄에 약간 틀린 내용으로 tit_post 스타일이 또 작성되어 있는 경우

나중에 작성 된 내용 (180번째 줄)이 적용되어 지기 때문에 (나중에 작성 된 순서대로 적용)

가끔 적용이 안되는 경우가 있어요.

그런경우 !important 를 써주게 되면 180번째 줄 내용은 무시하고

170번줄(!important 가 작성된 내용) 컬러를 우선 적용한다.

이렇게 선언이 되는거조.

 

글로는 어렵지만.. 나중에 써볼일이 있다면 바로 이해가 갈거에요~

 

 

 

 

 

참 블로그 전체 폰트 스타일을 한번에 바꾸고자 할 경우..

 

css 상단에 /* reset */ << 요렇게 써있는 부분이 있을꺼에요.

그 부근 내용을 확인하다 보면

body,th,td,input,select,textarea,button { } << 요렇게 써있는 부분이 확인 되는데

해당 부분의 font-family를 수정해 주면 됩니다.

 

만약 저곳을 수정했는데 안된다 하면

body * {font-family:'hanna'!important;}
body a {font-family:'hanna'!important;}  

 /* reset */ << 요 부분 위에 해당 내용을 써주면 되구요~

 

 

 

 

그럼 소스 하단에 별도 처리가 되어있지 않는 한

이미지처럼 블로그 전체 폰트가 바뀔꺼에요!

 

 생각처럼 글로 쉽게 풀어 설명하는게 어렵네요..ㅋ_ㅋ

그래도 최대한 쉽게 쓴다고 썼는데....ㅠ_ㅜ

반복적으로 해보면 충분히 이해할 수 있으니 꼭 도전해보세요~

 

* 궁금한 부분이 있으면 댓글 남겨주세요.

포스팅을 통해 최대한 알려드리겠습니다. *

 

 

 

티스토리 꾸미기, 웹폰트적용,웹폰트