티스토리 Letter 스킨 블로그 제목 여백 조정

안녕하세요.

티스토리에서 제공되는 스킨들은 모두 깔끔한 레이아웃을 가지고 있지만, 사용하다 보면 하나 둘 수정하고 싶은 부분이 생기게 됩니다. Letter 스킨도 직관적인 레이아웃으로 깔끔하지만 여백이나 다른 부분들을 수정하면 더욱더 깔끔한 화면을 만나볼 수 있습니다. 이번 포스팅에서는 티스토리 Letter 스킨의 상단 부분의 여백을 조정해보겠습니다. 

위의 그림과 같이 스킨 메인 화면에서 상단에 위치한 블로그 제목, 전체 글의 상/하 여백이 너무 넓어 보입니다. 포스팅 제목에 더 집중할 수 있도록 상단 부분의 여백을 줄여보겠습니다. 이번 포스팅에서는 두 영역 중 먼저 블로그 제목의 높이 영역을 줄여보겠습니다.

먼저 크롬 브라우저로 블로그에 접속합니다. 그런 다음 단축키 맥:F12, 윈도우:컨트롤+시프트+I를 눌러 크롬 개발자 도구를 실행합니다. 그럼 화면 우측에 위의 그림과 같은 HTML, CSS 속성을 볼 수 있는 창이 하나 생기게 됩니다. 상단 왼쪽에 있는 화상표 모양의 아이콘(선택 도구)을 클릭합니다.

이제 위쪽 그림처럼 블로그 제목 영역을 마우스로 클릭하게 되면, 아래쪽 그림처럼 개발자 도구 창에 CSS 속성 값이 나타나게 됩니다. Letter 스킨의 CSS 속성 중 516행에 블로그 제목과 관련된 속성 값이 위치한다는 의미입니다.

여기서 수정해야 하는 부분은 "height : 168px" 속성입니다. 이 속성의 의미는 블로그 제목 영역의 높이를 168px 크기로 유지한다는 의미이므로, 이 속성 값을 줄이게 되면 블로그 제목의 여백도 줄어들게 됩니다.

이제 블로그 설정 화면에서 스킨 편집으로 들어갑니다. 그리고 HTML 편집을 클릭하여 CSS 편집창으로 들어갑니다. 이제 앞서 말한 height 값을 수정하기 위해 516행으로 이동합니다.

516행부터 블로그 제목 영역의 속성 값이 시작되고, 수정할 값은 519행에 위치해 있습니다. height : 168px 값을 80px로 수정한 뒤 적용을 클릭합니다.

블로그 메인 화면을 새로고침 해보면, 위의 그림과 같이 블로그 제목 영역의 높이가 줄어든 것을 확인할 수 있습니다. 이처럼 크롬 개발자 도구를 활용하면 편집할 부분을 손쉽게 찾아서 적용할 수 있습니다. 다음 포스팅에서는 전체 글 문구의 여백을 조정해보겠습니다.

 

행복한 하루 보내세요.

감사합니다.