티스토리 표 잘림 문제, 모바일 반응형으로 만들기

네이버 블로그와는 다르게 티스토리에서는 HTML로 자신만의 블로그를 꾸밀 수 있다는 장점이 있습니다. 더 나아가 더 많은 기능을 원한다면 워드프레스 블로그를 하는 사람들도 있습니다. 티스토리 블로그만으로도 충분히 자신만의 개성있는 블로그를 꾸밀수도 있습니다. 아무리 자신의 블로그를 꾸밀 수 있다고 하지만 글을 적는 것만큼 중요한 것은 없습니다. 블로그는 정보를 명확하게 주는 것이 가장 중요합니다.

티스토리 표 잘림 문제

글을 적을때 표를 만드는 일은 정보를 좀 더 보기좋게 전달하기 위해서 꼭 필요한 것입니다. 그래서 이전의 글에서 표를 만들어보았습니다. 표를 만드는 일은 어렵지 않았지만 여러가지 문제점이 있습니다. 티스토리 구형 에디터를 사용해서의 문제가 아니라 티스토리에서 제공하는 표 자체가 기능이 그다지 좋지 않다는 것입니다. 엑셀처럼 셀크기를 모두 동일하게 한다던지 하는 기능이 있으면 좋겠지만 몇가지 사용하는데 불편함이 있었습니다. 그 중에서도 표가 모바일 반응형으로 만들어지지 않는다는 것이 가장 불편했습니다.

모바일 반응형으로 표 만들기

표가 아니라도 모든 이미지 파일이나 글자 모두 반응형으로 하지 않게 되면 크기가 어긋나서 보기가 상당히 불편해집니다. 그래서 티스토리를 운영하는 사람이라면 기본적으로 모든 것을 반응형으로 만들 필요가 있습니다. 그냥 글을 적게 되면 대부분 반응형으로 작동을 하지만 유독 표를 사용하게 되면 반응형이 되지 않았습니다. 아래의 이미지를 보면서 반응형으로 표를 만드는 방법에 대해서 알아보겠습니다.

▲ PC에서는 정상적으로 내가 원하는 표의 크기와 형식으로 제대로 나오는 것을 확인했습니다.

▲ 그런데 모바일에서는 이렇게 PC 상의 표 크기 그대로 표시가 되어서 모바일상으로는 보기가 상당히 불편했습니다. 이 문제를 해결하기 위해서는 모바일 반응형 표를 만들어야 한다는 것입니다.

▲ 글쓰기 화면에서 HTML 버튼을 누릅니다. 그후에 표를 뜻하는 table을 검색해주세요. (table 표를 반응형으로 바꾸어주기 위함입니다)

▲ table class 안에 있는 width="수치"를 지워줍니다. (넓이를 지정하지 않음으로 모바일상에서 반응형으로 작동할 수 있습니다)

▲ 이제 모바일상에서도 어떤 핸드폰이라도 넓이에 맞도록 표가 생성되었습니다. 표를 생성할때 이렇게 넓이를 뜻하는 css 코드를 없애주면 반응형으로 보기 좋게 이용가능합니다.

마무리하며

모바일에서 표가 잘려서 나오는 현상은 티스토리 측에서 아주 쉽게 고쳐줄수 있을 것 같은데 아직도 불편함을 감수하고 이렇게 해야하는 것이 좀 불편합니다. 하지만 이렇게 수정하는 방법을 알고 있으면 생각보다 그렇게 어렵지는 않습니다. 추후 개선이 되어서 편하게 표를 만들수 있길 바랍니다.

제 생각에는 이렇게 하지 않고 스킨 수정을 통해서 쉽게 반응형으로 만드는 방법도 있을 것 같습니다. 방법을 찾는데로 업데이트 하도록 하겠습니다. 제가 하고 있는 방법 이외에 더 편리한 방법이 있다면 공유해주시면 감사하겠습니다.