[HTML,CSS] tistroy, 제목 글자 크기 수정하기

Solution)
tistory의 제목 글자 크기를 수정하는 방법을 알아보자!
 
필자는, HTML+CSS를 접한 입문자이다. CSS에 대해서 조금 알게되면서, tistory에서 title font size를 수정하는 방법을 찾던 중에, CSS에서 간단한 방법으로 해결할 수 있게되어서 아래와 같이 정리해보았다.
 
티스토리에서 제목의 기본 글자 크기(48px) 사이즈가 너무 커서, 제목이 좀 길어지면 아래와 같이 짤려서 보인다.
제목 텍스트를 클릭하는 등, 어떤 방법으로도 제목을 다 볼 수 없는 답답함이 있다. 아쉬운 부분이다.
 
필자는 간단한 수정으로 아래 붉은색 표시처럼 글자 크기를 48px에서 36px로 줄여서 제목 텍스트를 모두 보이게 해보았다.

 
 
> 수정 방법은 간단하다. 아래 순서로 해보자.
 
1. '관리' 클릭 후, 왼쪽에 꾸미기의 '스킨 편집' 클릭한다
2. 우측에 스킨 편집 창에서 'html 편집' 클릭한다
3. '확인' 클릭!

 
4. 'CSS' 클릭(선택)
5. 빈 칸에 커서를 클릭해서, 'ctrl + F키'를 실행서 검색창을 띄운 후, 'title-article' 을 타이핑 한다.
6. Enter 키를 누르면서 '.article-header .title-article' 을 찾는다. 대략 2780~2790 줄에 있다.
7. 기본값으로 되어 있는 font-size: 48px; 에서 기본 값인 '48px'를 원하는 값으로 수정하면 된다.
8. 필자는, 위에 한 줄을 추가하고 font-size: 36px; 로 새로 기입했다. 36px 정도면 적당할 듯 하다.
- 기존 라인의 텍스트( font-size: 48px; )를 선택한 후, 'ctrl+/키'를 눌러서 비활성화 해놓았다. 즉 비활성화된 /* 와 */ 사이에 있는 것은 실행되지 않는다. 백업 목적이다.
 

 
9. 원하는 숫자 px로 변경 후, '적용'을 클릭!
10. '확인'을 클릭하고, 글 창을 새로고침하면 제목 글자 크기가 바뀐 것을 확인할 수 있다.
- 첫번째 이미지의 하단, 붉은색 박스로 표시 (글자 크기가 작어져서 제목 전체가 잘 모인다.)
11. 8~10을 반복하여, 원하는 제목 크기를 결정하면, ' > ' 버튼을 클릭해서 스킨 편집 창을 닫아준다.
 
아니면, 제목의 텍스트를 모두 보이게 끔, 제목의 텍스트를 표시하는 칸의 수를 늘리는 것도 방법이겠지만, 제목의 글자 크기가 너무 커서 불필요하게 공간을 차지하는 느낌이 컸다. 그래서 글자 크기만 작게해도 충분했다. 필요하면, 글자 굵기나 색갈 등도 손쉽게 CSS의 클래스에서 변경 가능할 것 같다.
 
필자와 같은 고민을 한 분들에게 작은 도움이나마 되길 바랍니다~