티스토리 Letter 스킨 모바일 화면 여백 조정

안녕하세요.

앞선 포스팅들에서 티스토리 Letter 스킨 메인 화면의 여백을 조절하였습니다. 그동안 편집했던 내용들은 PC 화면에만 적용이 되고 모바일 화면에서는 적용이 되지 않습니다. 반응형 스킨이기 때문에 PC 화면의 CSS와 모바일 화면의 CSS가 나누어져 있기 때문입니다. 이번 포스팅에서는 Letter 스킨의 모바일 화면의 여백을 조절해보겠습니다.

먼저 블로그 메인 화면에서 크롬 개발자 도구를 실행시키고, 모바일 화면 보기를 클릭합니다.

 

위의 그림과 같이 모바일 화면이 표시됩니다. 주관적인 의견으로는 모바일 화면에서 블로그 제목의 여백은 적당하다고 느껴지나 전체 글 문구의 여백은 너무 넓게 느껴집니다. 그럼 이제 CSS 편집을 통해 전체 글 문구의 여백을 margin 속성을 사용하여 상측 20px, 하측 20px로 줄여보겠습니다.

개발자 도구의 선택 도구로 전체 글 문구를 선택하면, 오른쪽 그림과 같이 @media screend and~ CSS 속성이 나타납니다. 이 의미는 가로 해상도 0 ~ 820px 까지는 margint-bottom : -10px와 padding-top : 15px를 적용한다는 의미입니다. 상/하 각 20px margin을 주기 위해서 이 부분의 속성 값은 삭제합니다.

티스토리 HTML 편집의 CSS 창에서 위의 그림과 같이 /* */ 로 주석 처리합니다. 주석 처리를 하면 해당 영역은 CSS 속성에 미적용됩니다. 주석 처리 대신에 해당 영역을 삭제해도 무방합니다. 

이제 모바일 화면을 새로 고침 하고 선택 도구로 전체 글 영역을 다시 선택합니다. 그럼 CSS 창에 오른쪽 그림과 같이 margin-top : 60px로 설정되어 있음을 확인할 수 있습니다. 모바일 화면에서 60px가 적용된다는 의미로, 이 부분을 삭제하면 기존에 편집한 PC 화면 기준 margin-top : 20px 속성 값이 모바일 화면에도 그대로 적용됩니다.

티스토리의 CSS 편집 창에서 해당 영역의 값을 찾아 주석 처리합니다. 

모바일 화면을 새로 고침 하면 위의 그림과 같이 상/하 20px의 margin이 적용되었음을 확인할 수 있습니다. 이처럼 여백을 조정하긴 하였으나 폰트의 크기가 너무 큰 것 같습니다. 폰트 크기 변경도 다음 포스팅에서 다루도록 하겠습니다.

 

행복한 하루 보내세요.

감사합니다.