티스토리 블로그 본문 글씨크기, 모바일 에서만 조절하기

컨텐츠를 이용할 때 모바일의 비중이 커졌다. 하지만 보통 포스팅은 PC에서 할 텐데, 의외로 모바일 쪽 레이아웃은 신경을 안 쓰는 경향이 있다. 이번엔 모바일에서만 글씨 크기를 조절하는 방법을 알아보도록 하겠다.

 

1. 모바일 레이아웃의 중요성

  필자의 경우 모바일과 PC의 접속 비율이 40 : 60 정도인데, 글 주제에 따라서 50 : 50 에서 오히려 모바일 접속 비율이 높은 경우도 있을 것이다. 때문에 모바일에서의 레이아웃을 쓰는 것이 당연히 좋을 것이다. 특히 표 같은 경우엔 모바일에서 봤을 때 보기 안 좋은 경우도 많기 때문에 포스팅 후 모바일에서도 한번 확인해 보는 것이 좋다.

 

필자는 모바일에서의 가독성을 위해 글씨 크기를 살짝 키운 상태이다. 아마 북클럽스킨 쓰시는 분들이 필자의 블로그를 모바일에서 보면 미묘하게 글씨 크기가 큰 것을 알 수 있을 것이다.

 

재미있는 건 티스토리에서는 모바일용 티스토리 전용 앱을 지원해 주는데 티스토리 앱을 통한 블로그 접속은 스킨을 완전히 무시하고 티스토리 앱의 자체 레이아웃으로 통일돼서 보여진다. 때문에 모바일 레이아웃을 보겠다고 티스토리 앱으로 보면 아무 의미가 없다. 심지어 필자는 댓글 입력창 자체를 없애버렸는데 티스토리 앱에선 다 무시하고 댓글 입력창이 보인다.

 

2. 본문글씨 크기에 관한 CSS 찾기

  필자는 북클럽 스킨을 쓰고 있기 때문에 북클럽 스킨 기준으로 쓰지만, 찾는 방법은 같기 때문에 다른 스킨을 사용하는 분들도 따라 할 수 있을 것이라 생각한다. 특히나 필자의 글을 정주행 하시는 분들이라면, 어느 정도 이해하고 계실 거라 생각한다.

 

  2.1. 크롬 개발자모드 실행

    크롬에서 본인이 쓴 글 중 아무거나 열고 F12(혹은 Ctrl-Shift-I)를 눌러 개발자 모드를 활성화시키고, 디바이스 변경 아이콘(아래사진의 빨간 원)을 클릭해서 모바일 화면으로 바꾸자, 아이콘을 누르면 본문의 폭이 좁아지면서 모바일에서 보는듯한 화면으로 전환이 된다.

빨간 원 안의 아이콘을 누른다.

  2.2. 본문 글의 CSS 확인하기

  아래 그림과 같이 단락선택 아이콘을 누르고(ⓛ), 마우스로 본문 단락을 선택해주면(②) 오른쪽에 해당 본문의 CSS를 보여준다.(③) 한번 따라 해 보자.

본문의 CSS를 확인한다.

 

  여기서 ③ 번 항목만 확대해 보면 아래와 같다.

 

본문의 CSS 구성

우선 두 번째 단락의 .entry-content p { 라는 부분이 있는데  이 안의 내용의 일반 본문에 대한 정의 부분이다 그리고 그 아래쪽 줄을 보면 font-size 라는 부분이 있는데 이 부분이 바로 폰트의 크기를 정하는 부분이다. 문제는 북클럽 스킨은 저 크기를 수정하면 PC용이나 모바일용이나 같이 커지거나 작아진다는 것이다.

 

이번엔 첫 번째 단락을 보자. 아래와 같은 코드가 들어있는 것을 볼 수 있다.

@media screen and (max-width: 767px)

이 코드는 스크린 가로폭이 767px 이하일 때 CSS를 어떻게 구성할 것이냐를 정의하는 부분인데, 이 코드 밑에 줄을 보면 방금 봤던 .entry-content p { 라는 코드가 또 있는 것을 볼 수 있다.

 

위에서 이야기 했지만 .entry-content p 라는 부분은 일반 본문 글의 형태를 정의 한다고 했는데 @media screen and (max-width: 767px) 태그로 화면 가로폭이 767픽셀 이하일때의 본문글의 형태를 .entry-content P 태그로 다시 정의하겠다는 선언이다.

 

그런데 북클럽 스킨은 @media screen and (max-width: 767px) 태그 안에 폰트 사이즈에 대한 정의를 특별히 해주지 않았기 때문에 PC용으로 정의한 폰트 크기가 그대로 적용이 되어서, PC 화면을 보고 본문 크기를 바꿔버리면 모바일 화면에서도 같이 바뀌게 되는 것이다.

 

그렇다면 모바일 화면의 글씨만 키우고 싶다면?

@media screen and (max-width: 767px) 밑에 있는 .entry-content p{ 태그 안에 font-size: xxxx em; 이라는 한줄만 추가해 넣으면 된다. 즉 이런식이 된다.

@media screen and (max-width: 767px) {   /* 만약 화면 가로폭이 767픽셀 이하라면 */
     .entry-content p{                              /* 본문 글의 형식 정의는 아래와 같다 */
      font-size: 1.1em;                            /* 폰트 사이즈는 1.1em 으로 한다 */
     }
}

 

일부 스킨은 @media screen 태그 안에 폰트 사이즈가 이미 따로 정의되어있는 스킨도 있다 역시 개발자 모드에서 확인이 가능하다. 만약 이미 따로 정의되어 있는 스킨이라면 그 숫자만 바꿔서 폰트 크기를 바꿀 수 있다.

 

3. CSS 코드 수정

  이제 찾는 건 시간문제이다. 블로그 관리 화면에서 꾸미기 -> 스킨 편집 -> html 편집으로 들어간다. 그리고 CSS 탭을 클릭하면 CSS 소스코드가 나오는데, 소스코드 있는 곳 아무 곳이나 한번 클릭해 주고 Ctrl-F 를 눌러 "@media screen" 을 검색하고, width: 767px 라고 나올 때까지 Ctrl-G를 눌러서 이동하자

 

개발자 모드에서 봤을 때랑 살짝 다른 부분이

@media screen and (max-width: 767px) 코드 뒤에 중괄호가 있다는 것인데 @media screen 태그 선언부 뒤에 있는 대괄호 안에 있는 건 모두 해당 상황에서의 바뀌는 정의들이 된다.

 

생각보다 @media screen and (max-width: 767px) { } 안의 내용이 많아서 쭉쭉 스크롤하고 내려가다 보면 드디어 태그를 만나게 되는데 한 줄을 추가하자. 참고로 바쁘신 분들을 위해 2900 ~ 3000행 사이에 있다.

변경 전	변경 후
.entry-content p {     margin-bottom: 22px;     line-height: 1.625rem;   }	.entry-content p {     margin-bottom: 22px;     line-height: 1.625rem;     font-size: 1.1em;   }

원래 기본 본문 글씨 크기가 0.9375em 였고 살짝 커졌을 것이다.

참고로 위의 태그에서 line-height: 1.625rem; 태그는 행간 높이를 정의한 것으로 폰트 크기만 키우면 행 간격이 좁아져서 답답해 보이기 때문에 적절히 조절하면 된다.

 

만약 쓰고 있는 스킨에 line-height 태그가 없다면? font-size 태그를 추가한 것처럼 그냥 추가하면 된다.

 

4. 마치며

  언제나 그렇지만 코드 하나 수정하는 것도 일일이 과정을 설명하고 있다. 아마 몇 개를 따라 해봤다면, 어느정도 원리를 이해하고 응용할 수 있지 않을까 싶다. 방법을 알면 스킨과 관계없이 분석하고 수정할 수 있다. 보기엔 복잡해 보이지만, 따라해보면 의외로 쉽다는것을 알 수 있다. 대충보고 어렵다 생각하지 말고 한번정도 따라해 봤으면 하는 바람이 있다.