Material 줄간격 폰트 크기 조정하기

Material 스킨으로 변경했습니다. 생각했던 것 보다 맘에 드는 부분이 너무 많이 있네요. 유동적인 움직임을 가진 부분들도 상당히 재미있다라는 느낌을 가지게 만들어서 잘 바꾸었다라는 생각이 듭니다. 

 

티스토리 스킨을 변경한 이후 뜯어 고칠 부분이 있을까 싶은데, 전체적인 분위기가 좋아서인지, 고칠만한게 없어서 더욱 기분이 좋네요.

 

그래도 차별성을 약간이라도 만들기 위해 배경쪽의 이미지만 바꾸어 보았습니다. 더욱 깔끔해지고 원하는 스타일이 만들어진 것 같아요.

 

딱히, 변경할게 있을까 싶어서 찾아 보던 중, html 소스에 대한 주석처리도 깔끔하게 있는 것을 보고, 만든 사람이 굉장히 섬세하면서 배려심이 많다는 느낌을 받았습니다. 

 

그렇다고 제가 전문가는 아니라서 평가를 할수는 없고, 태그를 활용하기 위한 곳곳에 설명을 넣어 놓아서 변경하기 쉽도록 주석이 들어가 있는것에 감탄해, 이것저것 만져보기 시작했습니다. 

 

테스트 하던 도중, 자세히 보니 줄간격에 대한 코멘트가 없더라고요. 우선적으로 line-height를 찾아보기 시작했습니다. 드롭다운에 대한 부분과 달력에 관한 것은 있는데, 본문에 해당하는 곳이 없더군요.

 

혹시 CSS 쪽에 있나 싶어서 찾아봤는데, 역시나 이쪽에도 없네요. 저처럼 줄간격이나 폰트 사이즈에 관심이 있는 사람도 있지 않을까 싶어서 이렇게 글로 남겨 봅니다. 

 

티스토리 블로그는 사용자 편의를 제공하기 위한 부분이 좋기 때문에, 원제작자 맘대로 치환자나 소스를 변경할 수 있도록 되어 있습니다. 

 

그러므로 다른 티스토리 스킨 사용자는 이글을 읽어도 관련된 부분을 찾을 수 없거나 다른 치환자를 이용해 찾지 못할수도 있답니다. Material 스킨만 해당하는 글이므로 다른스킨을 사용하는 유저라면, 우선적으로 원제작자에게 문의해 보는게 가장 빠르고,  자신의 스킨 이름으로 검색해, 관련글을 찾아 보는게 더 좋을 수 있답니다.

 

 

이제, 본문의 줄간격 폰트 크기 고칠 수 있는 방법을 알려줄께요.

스킨편집 - html편집 - CSS 로 이동해 Ctrl+F 로 article 를 검색해 보세요. 그럼 중간쯤에 몇개 나올겁니다. 이 중에 title과 body 태그가 들어간 부분을 찾아 줍니다. 찾으셨나요?

 

위와 같이 찾았다면 이제 설명드리겠습니다. 첫번째 title은 제목의 글자 크기를 변경하는 곳입니다. body 부분이 본문안에 해당하는 글자의 크기를 변경하는 곳이고요. 

 

제가 알려 줄 부분은 본문 폰트 크기와 줄 간격인데요. body라고 적혀 있는 부분을 살펴 보세요. font-size ~ 어쩌구 써 있고, 16px라는 글자가 보일겁니다. 이곳이 폰트 크기를 정하는 곳입니다. 그렇다면, 제목의 글자 크기도 쉽게 바꿀 수 있다는 것을 알거에요. 

 

제목쪽에 있는 글자 크기는 2em이라고 써 있고 본문 글자 크기는 16px라고 써 있습니다. 원래는 본문 쪽도 기본설정이 1em으로 되어 있었는데 제가 고쳤습니다. 

 

em은 대문자M을 기준으로 할 때 백분율로 나타내는 수치이며, px는 모니터에 따른 상대적인 픽셀값을 말하는 건데, 기본이 1em 일 경우 12px 와 비슷한 크기를 보여 줍니다. 현재 2em으로 되어 있는 부분을 자신의 티스토리 제목과 비교해 보면 크기가 어느정도 인지 감이 잡히지 않을까 싶네요. 

 

 

이제는 줄 간격을 만들 차례인데요. 

입력이 되어 있지 않은 경우에는 기본 1로 설정 되어 있는 것인데, 아래와 같이 line-height:2; 를 본문 글자크기 바로 밑에 입력해서 넣어 주세요. 그럼 현재 저와 같은 줄 간격이 나타납니다. 

 

줄간격이나 글자 크기는 직접 숫자를 늘려 보면서 테스트해 보세요. 그렇게 해서 자신의 블로그에 맞는 것을 찾아주는게 좋다고 생각합니다. 

 

글자 크기에 대한 부분은 더 쉽게 할 수 있는 방법도 있긴 한데요. 관리자모드 - 꾸미기 - 스킨변경 - 스킨 위자드 - 게시글 - 게시글 글자색 - 크기로 가보면 나오긴 하는데, 어찌된 것인지 여기서 글자 크기를 변경하면 배경 이미지가 사라지는 현상이 있더라고요. 

 

Css를 이용하지 않고 스킨위자드를 이용할 분들도 있긴 있을 것 같아, 스킨 위자드 찾는 방법만 알려 줄께요. 스킨변경 메뉴를 클릭해 보면, 사용중인 스킨이라고 위쪽에 보일겁니다. 그쪽을 잘보면 아래와 같이 끝 부분에 배경이나 타이틀, 게시글의 간단한 편집은 할 수 있도록 되어 있으며, 이미지를 바꾸거나 글자색, 글자크기 등을 변경할 수 있답니다.

 

 

이미지 변경할 때 조심하세요. 용량이 512kb 정도 밖에 못올려서 고해상도 이미지는 잘 올라가지 않습니다. 차라리 html편집- 파일업로드에서 homeBG.jpg , drawerBG.jpg , Background.jpg 와 동일한 이름으로 만들어 올려주는게 좋다고 생각합니다.