티스토리블로그10.모바일 표 최적화하기

티스토리블로그10.모바일 표 최적화하기

한 달여가 다 되어가는 아직도 티스토리를 하면서 모르는 부분이 많다. 컴알못은 아니라 그저 익숙하지 않은 것이라고 스스로 위로해보지만 가끔 바보 인가 하며 서글퍼질 때가 있다. 네이버블로그와 다를 뿐이라고 스스로 다독여본다.

처음에 카테고리와 메뉴, 사이드바를 구분하지 못해서 당황했던 시기에 비하면 많이 발전하였지만 여전히 낯선 것들이 있다. 이번에 올리는 주제 말고 다음에는 하위카테고리에 관련된 것을 올려볼 예정이다. 분명 나만 이러는 것이 아니라 생각하며, 나와 같은 티스토리 초보자에게 조금이라도 도움이 되길 바래본다.

나는 '반응형스킨'을 사용하고 있고 '표(table)'을 사용하는 경우가 종종 있다. 티스토리는 PC를 이용해서 글을 쓰기 때문에 나중에 모바일을 통해서 글을 다시 확인할 때 아래와 같은 문제가 생기는 것을 확인했다.

이러한 형태로 표가 잘려지고 있었다. 물론 터치를 하면 오른쪽에 잘린 곳으로 '이동'하여 보여지기는 했지만 한 눈에 보이지 않는 것은 사실이었다. 그렇다고 테이블을 사용하지 않자니 아쉬워서 또 다시 다른 블로그들을 검색해 보았다.

정말 어렵지 않은 설정이니, 테이블을 사용할 때에는 꼭 글을 완료하기 전에 설정해주도록 해야 겠다. 아래 캡쳐를 해두었지만 요약해보면 "글쓰기-HTML체크-Table태그에서 width="100%"로 변경" 이렇게 해주면 창의 크기에 맞춰서 표가 100%로 보이게 된다.

일단 HTML을 체크해주면 작성한 글의 태그들이 보이게 된다. "CONTROL+F"를 눌러서 "Table"을 검색해주면 내가 작성한 표의 태그가 표시가 된다. 현재는 768px로 되어있다. 그렇기에 창의 크기를 다르게 보더라도 768px에 맞춰져서 보였던 것이다.

이것을 위에 캡쳐사진과 같이 100%로 변경해주면 모바일에서도 한 눈에 보이게 표가 최적화 되어진다.