티스토리 블로그 모바일 반응형 표 만들기

티스토리의 기본 글쓰기 에디터 에서는 표를 작성하는 것을 지원합니다. 간단한 클릭 몇 번 만으로도 html 코드로 작성된 간단한 표 작성이 가능합니다. 하지만 반응형 스킨을 쓴다면, 얘기는 살짝 달라집니다. 왜냐하면, 기본 에디터에서 작성한 표는 반응형 스킨의 모바일 화면에서 잘리는 경우가 있기 때문입니다.

티스토리 모바일 화면에서 보이는 반응형 표를 만들어 보자!

그 전에 현재의 상태를 봐야겠지요. 제 게시물 중 하나를 예로 들어서 보여드리겠습니다. 먼저 PC 화면에서는 정상적으로 표가 출력이 되는 모습입니다.

사진에 보이듯이, 정상적으로 표가 출력이 되는 모습입니다. 하지만 이 게시물을 모바일 화면 (폭이 좁은 인터넷 화면) 에서 보게 된다면 어떠한 모습이 보일까요?

변경 전

사진에서 보듯이, 표의 왼쪽 부분이 잘리는 것을 볼 수 있습니다. PC화면이면 상관없지만, 모바일 사용자가 늘고 있는 지금 웹은 모바일과 PC화면 둘 다 지원이 잘 되어야 합니다. 그렇다면, 어떻게 고칠 수 있을까요? 답은 생각보다 간단합니다. HTML 문서 구조에 대해 잘 몰라도, 이것만 알면 고칠 수 있습니다.

1. 에디터에서 HTML 편집기로 들어갑니다.

HTML 편집기는 우리가 시각적으로 보는 것이 아닌, 문서의 구조(비유하자면 뼈대) 를 나타낸 문서입니다. 여기서 우리는 표의 자세한 설정을 조절할 수 있습니다.

표는 table 이라고 나타냅니다. 이 안에 있는 영어들은 표의 속성들을 나타냅니다. 나머지 것들은 저희에게 필요가 없습니다. width 속성만 알면 됩니다. 코드를 보면 width="640" 이라고 적힌 것을 볼 수 있습니다. 의미는 이 표의 폭을 640으로 지정한단 뜻입니다. 이렇게 정해 두면은 PC 화면에 비해 상대적으로 폭이 좁은 모바일 화면에서는 표가 잘리게 됩니다. 우리는 width="640" 을 없애고 저장만 해주면, 반응형 표를 만들 수 있습니다.

(아래에 빨간색으로 표시해 두었습니다.)

<p><br /></p><table class="txc-table" width="640" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family:" 맑은="" 고딕",="" sans-serif;font-size:13px"=""><tbody><tr><td style="width: 156px; height: 24px; border-width: 1px; border-style: solid; border-color: rgb(151, 220, 32) rgb(210, 238, 161) rgb(210, 238, 161) rgb(151, 220, 32); background-color: rgb(241, 255, 216); color: rgb(0, 0, 0);"><p style="text-align: center; line-height: 1.5;">&nbsp;자료형태</p></td>

2. 수정된 코드를 저장하고, 확인한다.

코드를 수정 했으니, 잘 적용이 되었는지 확인을 해야합니다. 해당 게시물을 가로를 줄여서 표가 잘 나오는지 봅시다.

변경 전변경 후

변경 전과 변경 후의 모습입니다. 코드가 잘 적용되어서, 모바일 화면에서도 표가 잘리지 않는 것을 보실 수 있습니다. 이와 같은 원리로, 사진이나 동영상이 모바일 화면에서 잘리는 현상이 일어나면, width 속성을 삭제해 주시면 되겠습니다.

이상으로 포스팅 마치겠습니다. 티스토리 글을 쓰는 데 도움이 되었으면 좋겠습니다. 감사합니다.

글이 유용했으면 공감 한번만 부탁드립니다.

작성자에게 큰 힘이 됩니다.