티스토리 Letter 스킨 메인 화면 전체 글 문구 여백 편집

안녕하세요.

앞선 포스팅에서는 Letter 스킨의 블로그 제목 여백을 조정해보았습니다. 이번 포스팅에서는 메인 페이지의 전체 글 문구의 여백을 편집해보겠습니다.

먼저 크롬 브라우저로 티스토리 블로그 메인 페이지에 접속합니다. 위의 그림처럼 지난 포스팅에서 편집했던 블로그 제목 영역이 줄어든 상태이고, 이번 포스팅에서 편집할 부분은 전체 글 문구 주위 여백입니다.

지난번과 마찬가지로 크롬 브라우저에서 개발자 도구를 실행시킵니다.

그리고 화살표 모양의 선택 도구를 클릭하여 전체 글 부분을 마우스로 클릭합니다.

전체 글 문구를 선택하게 되면 개발자 도구 HTML 창에 왼쪽 그림과 같이 표시가 됩니다. <h2 class=~ > 이 부분이 선택되어 있는데 오른쪽 그림처럼 마우스로 한 행 위의 <div class=~ > 부분을 선택합니다.

이제 개발자 도구의 CSS 창을 보면 편집해야 할 속성이 나타납니다. CSS 속성 1090행부터 시작되는 전체 글 부분의 여백 값을 수정해야 합니다.

[참고] CSS에서 여백의 개념으로 사용되는 속성은 Margin과 Padding이 있습니다. 이 둘의 차이는 경계선(border) 외부의 여백이냐, 내부의 여백이냐입니다. Margin은 경계선 외부, Padding은 경계선 내부의 여백이며 이 부분은 앞으로 스킨 편집을 해나가면서 보다 자세히 설명드리겠습니다.

이제 본격적인 CSS 속성 값 편집을 위하여 티스토리 HTML 편집기를 열고 CSS창을 선택합니다. 그리고 1090행을 찾아서 margin-top이라고 되어 있는 속성 값을 변경합니다. 기본값이 80px인데 확 줄여서 오른쪽 그림처럼 20px로 값을 바꿉니다. 그리고 적용을 클릭하여 블로그 메인화면에 반영합니다. 참고로 margin-top은 상단 영역의 마진을 나타내며 좌/우/하 영역의 마진은 각각 margin-left, margin-right, margin-bottom으로 설정할 수 있습니다.

블로그 메인 화면을 새로 고침을 해보면 위의 그림처럼 전체 글 상/하 여백이 줄어들었음을 확인할 수 있습니다.

 

앞선 포스팅에서 블로그 제목 영역, 이번 포스팅에서는 전체 글 문구 영역을 편집하였습니다. 이렇게 편집한 값은 PC 화면에서만 반영이 됩니다. 왜냐하면 Letter 스킨은 반응형 스킨이기 때문에 PC 화면 레이아웃과 모바일 화면의 레이아웃이 다르게 설정되어 있습니다. 모바일 화면에서는 CSS 속성 값이 다르게 적용되어 있어 한번 더 모바일 화면에 맞추어 편집을 해주어야 합니다.

[참고] 반응형 스킨은 PC 화면과 모바일 화면에 각각 자동으로 최적화되는 스킨입니다. 만약 CSS 속성 중에 모바일 화면을 별도로 설정해주지 않으면 모바일 화면에서도 PC 화면과 동일한 레이아웃이 보여지기 때문에 사용에 큰 불편함이 있습니다. 따라서 티스토리 무료/유료 스킨의 대부분은 반응형 스킨으로써 모바일 화면 레이아웃이 CSS에 추가되어 있습니다.

 

행복한 하루 보내세요

감사합니다.