티스토리 글자크기, 줄간격, 글자색_간단 수정법(font size)

티스토리에서 글자크기 변경하기/

 

안녕하세요? 오늘작업실입니다.

오늘은 티스토리 블로그 본문에서 글자 크기와 줄 간격, 글자색을 바꾸는 아주 간단한 방법을 알아보겠습니다. 티스토리에서 제공하는 스킨을 사용하지만 저는 글자가 빽빽해 보이는 게 조금 답답하게 느껴져서 글자 크기와 줄간격을 조금 키우고 싶더라고요. 티스토리에서 기본설정된 글자크기나 줄간격을 바꾸려면 html로 수정을 해야 합니다. html을 수정해야 된다니 그러면 코딩부터 배워야 하나? 생각을 하게 됩니다. 하지만 글자크기나 줄간격 정도는 한가지만 알면 간단하게 수정할 수 있습니다.

 

1. 스킨편집

먼저, 관리자 모드에 들어가 꾸미기 -> 스킨편집을 눌러줍니다. 

 

 

2. HTML

다음 페이지에서 오른쪽 창에 스킨편집란으로 가서 html을 누릅니다.그리고 왼쪽 상단 박스에서 내가 편집하고자 하는 페이지를 선택할 수 있습니다. 저는 오늘 본문 글자크기와 줄간격을 바꿀 예정이니 글을 선택합니다.

 

제가 작성한 글이 왼쪽에 보이고, 오른쪽에 이 글의 html이 나옵니다.

 

3. CSS

우리가 오늘 수정할 곳은 여기 CSS입니다. HTML이 웹페이지를 만들기 위한 언어라면, CSS는 HTML로 만들어진 언어가 웹사이트상에서 어떤 방식으로 보이는가를 적어두는 스타일 시트입니다. 일종의 코디북이라고나 할까요? 여기 CSS에서 수정을 하면 전체 페이지에 수정된 내용이 적용되게 됩니다. 일일이 페이지 마다 들어가서 수정을 하지 않아도 된다니 정말 편리한 기능입니다. CSS를 누르면 이렇게 알지 못할 언어들이 잔뜩 나옵니다... 하지만 지금 우리는 지금 한 줄 명령어만 알면 글자 크기를 수정할 수 있습니다.

 

3. 글자크기, 줄간격 바꾸기

 CSS창을 한번 클릭(선택)하고 Ctrl-F(찾기)를 누른 다음, 아래와 같이 새로 뜨는 창에  .entry-content p 를 입력해 줍니다.

 

그러면 찾기는 우리가 수정해야 할 목록을 보여줍니다.  

 

여기서 폰트크기와 줄간격을 바꿔줍니다. 아래 예시에서 폰트크기를 1em에서 18px로, 줄간격을 1.2에서 1.8로 바꿔보았습니다. 

참고로, 폰트 크기를 나타내는 단위는 여러 가지가 있습니다. 그중에서 기본 설정값이었던 em은 상대적 크기를 나타내고 px은 절대적 크기라고 합니다. 저는 익숙한 크기로 확인하고 싶어서 px로 입력했지만, 어떤 기종에서 봐도 상대적 크기를 똑같이 유지하고 싶은 분은 기본 em값을 조정해 보면서 크기를 조정하시면 되겠습니다.  

 

4. 글자색 바꾸기

여기서 본문 글자색도 함께 바꿀 수 있습니다. 

color 번호앞에 있는 작은 박스는 현재 지정된 색을 보여줍니다. 여기에 마우스를 갖다대면 이렇게 색상표가 뜨게됩니다. 마우스를 움직이면서 원하는 색을 선택하면 자동으로 선택값이 입력됩니다. 

 

이제 마지막으로 제일 위쪽에 적용과 새로고침을 눌러주면 수정이 끝났습니다. 

 

오늘은 티스토리 글자크기와 줄간격, 글자색 변경하는 법을 알아보았습니다. 차근차근 짚어보니 html편집이 그리 어렵지만은 않게 느껴지네요. 여러분은 어떠셨나요? 지금까지 오늘작업실이었습니다.

 

HTML과 CSS의 차이가 궁금하다면 다음 글을 읽어주세요.

HTML과 CSS의 차이, 블로그 폰트 크기 변경 어디서 할까?