티스토리 반응형 스킨 표 사이즈 최적화

티스토리 에디터에서는 표를 지원하는데, 반응형 스킨에서는 이 표의 사이즈가 잘리는 경우가 많다. 왜냐하면, 반응형 스킨은 창의 크기에 맞춰서 글의 가로폭이 변하는데, 티스토리에서 제공하는 표를 그대로 사용한다면 가로폭이 일정한 상태이기 때문이다.

오늘은 티스토리 반응형 스킨에서 표 사이즈를 어떻게 하면 최적화할 수 있는지 알아보겠다.

반응형 스킨에서 표 사이즈 문제

아래 그림은 표 사이즈를 확인하기 위한 테스트 포스팅이다. 티스토리 에디터에서 표를 만들어보았다.

그림과 같이 3X5 크기의 행렬을 만들었다. PC 크기의 가로폭에서는 위와 같이 별 문제 없이 표가 제대로 나오는 것을 확인하였다. 그런데 이걸 모바일에서 보면 얘기가 달라진다.

위와 같이 모바일에서 볼 경우에는 표의 3번째 열부터 잘려서 보이지 않게 된다.

반응형스킨을 사용하시는 분이라면 이런 문제가 자주 발생할 것이다. 이를 해결하기 위해서는 html의 코드 일부분을 수정해야하는데, 이 조취를 취하지 않으면 항상 이런 문제가 발생한다.

티스토리 반응형 스킨 표 크기 최적화

html 코드를 잘 몰라도 의외로 굉장히 간단하게 해결할 수 있다. 필자도 html 코드는 거의 문외한인데 표의 가로폭 사이즈는 잘 고치고 다닌다..ㅋㅋ 아래 그림을 통해 자세히 알아보자!

에디터로 들어가서 오른쪽 상단의 HTML 체크박스를 클릭한다. 그러면 화면이 변하더니 아주 복잡한 HTML 언어로 도배가 되어 있는 것을 볼 수 있다.

위와 같이 굉장히 복잡한 외계어가 많이 있다. 여기서 Ctrl+F로 검색창을 연 다음, table을 검색해보면 3군데가 검색이 될 것이다.

위와 같이 표 하나당 table이라는 단어가 3개가 들어간다. 젤 처음 <table class 부터 마지막</table> 부분까지가 표를 구성하고 있는 태그라고 보면 된다.

우리가 주목해야 할 부분은 table이 시작되는 부분의 꺽쇠이다. 첫번째 꺽쇠 안에는 아래와 같이 width="xxx" 부분이 1개 혹은 2개가 들어가있다.

<table class="txc-table" width="693" cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 693px;" 맑은="" 고딕",="" sans-serif;font-size:16px"="">

..중략..

</tbody></table>

위에서 파란색으로 색칠된 부분 2군데를 모두 지우고 발행을 누르면 된다.

 

위와 같이 창의 가로폭이 변해도 테이블이 짤리지 않고 자동으로 폭을 조절하는 것을 확인할 수 있다. 물론 핸드폰 화면에서도 잘 나온다.

오늘은 티스토리 반응형 스킨에서 표 사이즈를 어떻게 최적화 하는지 알아보았다. 아마 이 문제때문에 포스팅에 표를 잘 사용하지 않았던 분들도 계셨을 것이다. 중요한점은 <table class 부분을 찾는 것! table 태그 안에 있는 width 부분을 삭제하면 깔끔하게 해결되니, 한번 시험해보시길 바란다. 오늘의 포스팅 끝.

2017/08/21 - [블로그/티스토리] - 티스토리 스킨 Fastboot 1.6.2 설치방법 알아보기

2017/08/21 - [블로그/티스토리] - Fastboot 1.6.2 스킨 갤러리형 목록 리스트로 수정 방법

2017/09/05 - [블로그/티스토리] - Fastboot 스킨 상단바 타이틀 이미지로 꾸미기

2017/09/09 - [블로그/티스토리] - Fastboot 스킨 모바일메뉴 오류 해결