티스토리 내 맘에 들게 바꾸기 - 색깔 변경, 줄간격 변경

material T 라는 반응형 스킨을 이용중이다. 

처음에는 티스토리를 어떻게 설정하는지 잘 몰라서 material T 처음 상태 그대로 두었는데, 

찾아보니 티스토리 스킨을 내 마음대로 편집할 수 있다는 것을 알게 되었다. 

 

우선 기본 색상은 초록색으로 진행했다. 

 

https://www.htmlcsscolor.com/hex/EDE6DB

HEX color #EDE6DB, Color name: White Linen, RGB(237,230,219), Windows: 14411501. - HTML CSS Color

https://color.adobe.com/ko/create

Color

위의 두 사이트에서 내가 원하는 기본 색상을 설정하고, 

아도베 color라는 사이트를 통해서 그 기본색상과 어우러지는 다른 색깔을 고를 수 있다. 

따라서 다음 세가지 색상으로 내 블로그를 설정했다. 

 

header는 #798C79

 

footer는 #4D594D

 

background는 #EDE6DB

 

 

 

  color:/*@post-body-color*/#000000/*@*/;
  font-family:/*@post-body-font-family*/"NanumBarunGothic"/*@*/;
  font-size:/*@post-body-font-size*/1.125em/*@*/;
line-height:200%;

 

이렇게 CSS를 설정했다. 

CSS가 뭔지, HTML이 뭔지 하나도 모르는 사람이라 어떤식으로 변경하는 건지 고민을 많이 했는데, 생각보다 문자 그대로의 뜻을 가지고 있어서 손댈만 했던 것 같다. 

 

 

나는 내 블로그의 줄간격을 변경하고 싶어서 여기저기 찾아봤다. 

다른 사람들의 블로그에서는 CSS 값에서 "article" 부분의 "line-height"를 변경해주라고 하는데, 

material T의 CSS에서는 line-height를 아무리 검색해도 없었다. 

검색이 잘못되었나 해서 직접 찬찬히 읽어봐도 없었다. 

당황해서 다른 블로그들도 검색해보았는데 마찬가지로 비슷비슷한 말들과 함께 line-height를 설정해주라고 되어있었다. 

따라서 그냥 article이라고 써있는 곳에 내가 원하는 line-height를 입력했다. 

 

 

line-height를 설정할 때는 단위가 px가 있고 %가 있다. 

px의 경우 절댓값처럼 글자 크기에 영향을 받지 않고 줄 사이의 간격을 일정하게 설정하는 것이고 

%로 설정한다면 글자 크기에 영향을 받는 설정값이라고 한다. 

나는 한글 문서를 작성할 때 늘 %로 줄간격이 설정하는 것에 익숙해져있어서 200%로 설정해두었다. 

훨씬 보기 좋은 본문 형식을 만든 것 같아서 기분이 좋다. 

 

 

또한, 글씨 크기도 나는 지금까지 12 point 등 point단위만 알고 있었는데, CSS에서 em 이라는 단위를 처음 접하게 되었다. em 단위는 zoom 기능이 없는 브라우저에서 글꼴 크기 조절 옵션을 설정하기 위해 쓰이는 단위라고 한다. 내가 모바일에서 접했을 떄 1.125em 정도가 가장 적절한 글씨 크기로 보였다.

따라서 원래 설정값이던 1em 에서 1.125em으로 변경하였다. 

 

티스토리 블로그를 만들어가는 기록을 하나하나 정리하려고 한다. 

뭔가 메이플스토리 같은 RPG 게임을 하는 기분이다. 

오늘도 경험치를 쌓은 것 같아 기분이 좋다.