블로그 모바일 레이아웃 확인

안녕하세요.

그동안 티스토리 Letter 스킨을 편집하면서 PC 화면 기준으로만 편집하고 확인을 하였습니다. 반응형 스킨은 PC와 모바일 레이아웃이 서로 다르게 설정되어 있습니다. 따라서 PC 기준으로 편집을 한 뒤, 모바일 화면도 설정을 변경해줘야 합니다. 그러기 위해서는 내 블로그의 모바일 화면을 확인해야 하는데, 이번 포스팅에서 어떻게 모바일 화면을 확인하는지 알아보겠습니다.

우선 티스토리 꾸미기 설정에서 확인해야 할 부분이 있습니다. 꾸미기 설정에서 모바일을 클릭하여 모바일 꾸미기로 들어갑니다. 그런 다음 티스토리 모바일웹 자동 연결이 사용하지 않습니다로 체크되어 있는지 확인합니다. 반응형 스킨을 사용하시는 분들께서는 이 설정을 사용하지 않습니다로 반드시 변경해주셔야 합니다.

위의 그림은 현재까지 PC 화면 기준으로 편집한 블로그 메인화면 레이아웃입니다. 이제 모바일 화면을 확인하기 위해 크롬 개발자 도구(단축키 F12)를 실행시킵니다.

크롬 개발자 도구를 실행시킨 뒤 붉은색 테두리로 표시한 디바이스 변경 아이콘을 클릭합니다.

그럼 이제 위의 그림처럼 화면이 줄어들면서 모바일 화면으로 표시됩니다. 분명 전체 글 문구의 여백을 조정하였는데 위아래 여백이 너무 넓습니다. 즉, 모바일 화면에는 적용이 안된 모습을 확인할 수 있습니다. 참고로 모바일 화면의 해상도는 오른쪽 그림과 같이 상단에 있는 메뉴에서 변경이 가능합니다. 

선택 도구로 전체 글 문구의 영역을 선택해보면, 개발자 도구의 CSS 창에 그동안 못 보던 코드가 하나 보입니다. 바로 "@media screen and~ " 코드입니다. 이 코드를 활용하여 화면 해상도별로 CSS 속성 값을 추가하거나 변경할 수 있습니다.  예를 들어 가로 해상도 1280px 이상에서는 여백을 30px로 설정하고, 가로 해상도 728px부터 1279px 까지는 여백을 20px로 설정할 수 있습니다. 그리고 폰트 크기, 썸네일 크기 등 레이아웃과 관련된 모든 부분을 PC 화면 - 모바일 화면 간에 차이를 둘 수 있습니다.

이렇게 크롬 개발자 도구를 활용하여 내 블로그 화면의 모바일 레이아웃을 확인하는 방법을 알아보았습니다. 본격적으로 모바일 화면을 편집하는 방법은 다음 포스팅에 이어서 알아보도록 하겠습니다. 

 

행복한 하루 보내세요.

감사합니다.