티스토리 블로그 표 모바일에도 크기 맞추기 (최적화하기)

티스토리 표 모바일 최적화

티스토리 블로그에서 포스팅을 하다보면 표를 써야 할 때가 상당히 많습니다.

 

제목등을 정리할 때, 내용을 강조할 때 등에 많이 쓰죠.

아니면, 그냥 어떤 내용을 표로 정리해야 할 때도 있구요.

 

그런데, 이 티스토리에서 재공하는 표가 치명적인 단점이 있습니다.

 

바로 모바일에서는 짤려서 보인다는 것입니다.

 

제가 간단히 표를 하나 만들어 보겠습니다.

이렇게 데스크탑 화면상에서는 문제가 없이 잘 보입니다.

 

하지만, 모바일 창에서 보면...

 

젠장 오른쪽이 짤려 버리는군요.

표의 일부만이라도 보이면, 내용은 보이긴 하는데, 표의 셀이 아예 없어진 경우에는 내용도 아예 보이지를 않습니다.

 

이미지의 경우는 자동으로 크기를 조절하여 보여 주기 때문에 다른 곳(Excel) 등에서 표로 작성한 것을 캡쳐해서 이미지로 삽입하면 되긴합니다.

 

하지만, 네이버 상위 노출을 위해서는 가능하면 많은 텍스트가 들어가는 것이 좋고...
또한 표로 정리해 놓은 것이 가장 깔끔하게 보이기도 합니다.

 

그럼 표를 어떻게 하면 모바일에서도 짤리지 않게 할 수 있을까요?

 

티스토리 포스팅을 수정하러 들어가면 우측 상단에 ㅁHTML 이란 것을 클릭할 수 있습니다.

 

이 녀석을 클릭하면, 우리가 포스팅한 내용을 실제 프로그래밍 언어로 보여줍니다.

 

자... 여기서 제가 작성한 표에 해당하는 프로그래밍 코드를 찾아보겠습니다.

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: 돋움; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=594> <TBODY> <TR> <TD style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>오늘은&nbsp;</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>표를&nbsp;</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>삽입하는&nbsp;</P></TD></TR> <TR> <TD style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-RIGHT: #ccc 1px solid"> <P>&nbsp;것을</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-RIGHT: #ccc 1px solid"> <P>배워보도록&nbsp;</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-RIGHT: #ccc 1px solid"> <P>하겠습니다&nbsp;</P></TD></TR></TBODY></TABLE>

 

이 부분이 표를 생성한 코드입니다.

 

이 코드를 조금 설명 드리자면,
가장 위 <TABLE ...>  에서 가장 아래 </TABLE> 가 표의 가장 바깥쪽 테두리의 모양을 결정하는 구문입니다.

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: 돋움; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=594> ... <P>하겠습니다&nbsp;</P></TD></TR></TBODY></TABLE>

 

오늘은	표를	삽입하는
것을	배워보도록	하겠습니다

 

그리고, <TR> ... </TR> 은 표의 가로 한 줄을 의미하는 것입니다.

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: 돋움; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=594> <TBODY> <TR> <TD style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> ... <P>삽입하는&nbsp;</P></TD></TR> <TR> ... <P>하겠습니다&nbsp;</P></TD></TR></TBODY></TABLE>

 

오늘은	표를	삽입하는
것을	배워보도록	하겠습니다

 

<TD ... > 에서 </TD> 가 표의 셀 하나를 결정하는 코드입니다.

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: 돋움; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=594> <TBODY> <TR> <TD style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 198px; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>오늘은&nbsp;</P></TD> ... <P>하겠습니다&nbsp;</P></TD></TR></TBODY></TABLE>

 

오늘은	표를	삽입하는
것을	배워보도록	하겠습니다

 

자 조금 이해가 가셨나요?

그럼 일단 표 자체의 크기를 조절해 보겠습니다.
 
<TABLE ... 쪽에 보시면 width=594 이렇게 넓이를 표시하는 곳이 있습니다.

WIDTH : 594px 또는 WIDTH="594px" 이런 형태로 표시되는 경우도 있습니다.

중간 쯤이랑 끝부분, 두 군데 이상 가로 크기가 표시되는 경우도 있습니다.

 

상관은 없습니다.
중요한 것은 이 넓이는 px(픽셀) 단위로 크기를 딱! 지정해 놓았다는 것이지요.

 

당연히, 이 크기가 모바일 화면의 해상도를 넘어가면, 짤려버리는 것입니다.

그래서 우리는 이 부분을 크기가 아니라 비율로 변경하도록 하겠습니다.

 

WIDTH="594px" ▶ WIDTH="100%"  WIDTH: 594px; ▶ WIDTH: 100%;  width=594 ▶ width=100%

 

이렇게 바꾸어 줍니다. 말 그대로 화면 크기의 100%만큼을 표의 크기로 잡겠다는 의미입니다.

 

그러면 이제 표의 Cell 크기를 정해 줄 차례입니다.
참고로 <TBODY><TR> ... </TR></TBODY> 는 신경쓰실 필요가 없습니다.

 

그럼 3개의 줄에 대한 비율을 30%, 30%, 40%로 만들겠습니다.
마찬 가지로 <TD ...> 안에 있는 WIDTH : 또는 width=  형태로 되어있는 넘들을 우리가 원하는 비율로 바꾸어 줍니다.

 

<TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; FONT-FAMILY: 돋움; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=100%> <TBODY> <TR> <TD style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 30%; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>오늘은&nbsp;</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 30%; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>표를&nbsp;</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 40%; HEIGHT: 24px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"> <P>삽입하는&nbsp;</P></TD></TR> <TR> <TD style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 30%; HEIGHT: 24px; BORDER-RIGHT: #ccc 1px solid"> <P>&nbsp;것을</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 30%; HEIGHT: 24px; BORDER-RIGHT: #ccc 1px solid"> <P>배워보도록&nbsp;</P></TD> <TD style="BORDER-BOTTOM: #ccc 1px solid; WIDTH: 40%; HEIGHT: 24px; BORDER-RIGHT: #ccc 1px solid"> <P>하겠습니다&nbsp;</P></TD></TR></TBODY></TABLE>

 

자 그리고 저장을 한 후, 다시 한 번 보겠습니다.

 

윗 표는 원본, 아래 표는 수정 후의 크기입니다.

 

모바일에서는...

차이가 느껴지시나요?  

조금 귀찮긴 하지만, 모바일에서의 유입 및 방문 시간을 늘려 블로그 지수를 올리기 위해서...

어느정도의 수고로움은 피할 수 없겠죠?