티스토리 표박스 모바일에 최적화 방법

티스토리 표박스 모바일에 최적화 방법

 

티스토리 pc용에는 표가 잘 나오는데 모바일용으로 볼 때는 표가 다 깨지거나 잘려서 나옵니다. 그래서 궁여지책으로 표의 크기를 모바일에 맞춰서 줄여주었더니 이번에는 pc용 화면이 너무 좁게 보여서 볼품이 없더라구요.

다른 방법이 없나 찾다가 드디어 발견했습니다.

이럴 때 유래카를 외치죠?ㅎㅎ

물론 html을 이용해야 하는 번거로움은 있지만 이것조차 수고로움을 안하면 티스토리 블로그를 운영 못해요...ㅎ 저도 배워 가면서 겨우겨우 터득한거지만 오늘 포스팅 하고는 내일 또 까먹어요. 그러니 이렇게 자료로 남겨두려고 글을 씁니다.

각설하고.. 저를 천천히 따라 오면서 해봅시다.

먼저 현상부터 보여 드릴게요...

티스토리 PC용에 정상적으로 보이는 글

 

티스토리 모바일용에 표가 잘려서 보이는 글

 

이럴 때 몇가지 방법이 있는 것으로 보이는데 

첫번째가 스킨편집으로 들어가서 글 전체에 적용하도록 하는 방법이 있는데 이것은 스킨이 적용 가능한 게 있고 적용이 안되는 게 있더라구요. 제 티스토리는 적용이 안되서 이것은 패스... 

두번째가 매 글마다 표를 잘리지 않게 적용하는 방법이 있는데 저는 이것을 설명하려고 합니다.

1. 티스토리 pc용 글 수정으로 들어가서 우측 위에 있는 HTML을 눌러줍니다.

2.그러면 올린 글이 HTML 코드로 바뀝니다.

3.여기서 HTML 코드를 공부하기 위해 옮겨서 기록해 봅니다.

여기서 잠깐 공부 좀 하고 가야 합니다.

표를 나타내는 코드가 바로 <table>입니다. 잘보면 <table>에서 시작해서 끝날 때는 </table>로 됩니다. 이 <table> 안에 글을 쓰거나 표를 작성하는 겁니다. 그러니까 이 안에 표의 폭(width), 높이(height)가 나오게 되는거죠.

그 다음 <tr> ... </tr> 부분이 가로 한줄을 나타내는거구요.

<td> ... </td> 부분이 셀 하나의 크기를 나타냅니다.

인터넷에서 뭘 하나를 설명하자면 복잡하게 되는데 그냥 결정적인 것만 알면 되니까 다 생략하고 넘어가겠습니다. 여기서 중요한 것이 바로 폭(width)을 결정하는 겁니다.

<table class="txc-table" style="font-size: 9pt; font-family: 고딕; line-height: 19.2px; clear: both; border-collapse: collapse;" border="0" width="675" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="line-height: 1.3; border: 1px solid #cccccc; height: 131px; width: 680px; background-color: #d4f4fa;"><p style="margin-left: 2em; line-height: 1.6;"><span style="font-size: 18.6667px;"><b><span style="font-family: &quot;맑은 고딕&quot;, sans-serif; font-size: 14pt; color: rgb(0, 0, 0);">김재규(金載圭)</span></b></span></p> 1976년 12월 중앙정보부장에 임명되었고, </span></font></p> </td> </tr> </tbody> </table> <p style="color: #464646; font-family: 고딕; font-size: 14pt; margin-left: 2em; line-height: 1.6;">&nbsp;</p> <table class="txc-table" style="font-size: 12pt; font-family: 고딕; line-height: 19.2px; clear: both; height: 159px; width: 679px; border-collapse: collapse;" border="0" width="679" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="font-size: 12pt; font-family: 고딕; color: #464646; line-height: 1.3; border-width: 2px 2px 1px; border-style: solid; border-color: #7c84ef #cc5544 #7c84ef #7c84ef; height: 24px; width: 246px; background-color: #ffa7a7;"> <p style="line-height: 1.6; text-align: center;"><b><span style="font-size: 12pt; font-family: 고딕;"><b>문화재지정</b></span></b></p> </td> <td style="line-height: 1.3; border-top: 2px solid #7c84ef; height: 24px; border-right: 2px solid #7c84ef; width: 433px; border-bottom: 1px solid #7c84ef; background-color: #ffd8d8;"><span style="color: rgb(0, 0, 0);"> </span><p style="margin-left: 2em; line-height: 1.6;"><span><span style="font-size: 12pt;"><b><span style="color: rgb(0, 0, 0);">미지정</span></b></span></span></p><span style="color: rgb(0, 0, 0);"> </span></td> </tr> </tbody> </table>

4.폭(width)을 나타내는 width 옆에 수자가 있는데(width="675") 이 숫자는 px로 표의 넓이를 나타내는 것입니다. 그런데 수자는 표의 넓이를 고정 시켜주는 거라서 모바일에서도 그 넓이만큼 나오게 되니까 잘려서 보이는 겁니다.

이것을 한 방에 해결하는 방법이 있습니다. 고정 수자를 비율(100%)로 바꾸면 모든 것이 해결 됩니다. 즉 width="675"를 width="100%"로 바꾸고, width: 679px 는 width: 100%로 바꿔주면 해결 됩니다.

표가 나눠져 있는 경우에는 수자 대신에 비율(%)로 나누는데 위의 예제에서는 좌측칸과 우측칸의 비율을 3:7로 해서 앞에는 30%, 뒤에는 70%로 바꿔주면 됩니다.

위에 html코드를 직접 수정해 보겠습니다.

<table class="txc-table" style="font-size: 9pt; font-family: 고딕; line-height: 19.2px; clear: both; border-collapse: collapse;" border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="line-height: 1.3; border: 1px solid #cccccc; height: 131px; width: 100%; background-color: #d4f4fa;"><p style="margin-left: 2em; line-height: 1.6;"><span style="font-size: 18.6667px;"><b><span style="font-family: &quot;맑은 고딕&quot;, sans-serif; font-size: 14pt; color: rgb(0, 0, 0);">김재규(金載圭)</span></b></span></p> 1976년 12월 중앙정보부장에 임명되었고, </span></font></p> </td> </tr> </tbody> </table> <p style="color: #464646; font-family: 고딕; font-size: 14pt; margin-left: 2em; line-height: 1.6;">&nbsp;</p> <table class="txc-table" style="font-size: 12pt; font-family: 고딕; line-height: 19.2px; clear: both; height: 159px; width: 100%; border-collapse: collapse;" border="0" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="font-size: 12pt; font-family: 고딕; color: #464646; line-height: 1.3; border-width: 2px 2px 1px; border-style: solid; border-color: #7c84ef #cc5544 #7c84ef #7c84ef; height: 24px; width: 30%; background-color: #ffa7a7;"> <p style="line-height: 1.6; text-align: center;"><b><span style="font-size: 12pt; font-family: 고딕;"><b>문화재지정</b></span></b></p> </td> <td style="line-height: 1.3; border-top: 2px solid #7c84ef; height: 24px; border-right: 2px solid #7c84ef; width: 70%; border-bottom: 1px solid #7c84ef; background-color: #ffd8d8;"><span style="color: rgb(0, 0, 0);"> </span><p style="margin-left: 2em; line-height: 1.6;"><span><span style="font-size: 12pt;"><b><span style="color: rgb(0, 0, 0);">미지정</span></b></span></span></p><span style="color: rgb(0, 0, 0);"> </span></td> </tr> </tbody> </table>

5.위의 코드를 적용해서 모바일에 어떻게 나타나는지 보겠습니다.

 

드디어 성공했습니다.

매번 글 쓸 때마다 보정해줘야 하는 번거로움도 있겠지만 글 쓸 때 편집틀을 만들어 놓고 쓰면 아무 문제가 없습니다. 저 같은 경우에는 표를 많이 사용하다보니 매번 어려움이 있었는데 이렇게 하니 체증이 다 내려가는 기분입니다.

여러분도 조금 어렵겠지만 답답한 속을 확-- 뚫어보세요.

감사합니다.