티스토리 표 넣을때 모바일에서 짤리지 않게 만들기

 

티스토리 표 모바일 최적화 화면으로 만들기! : 표 잘리지 않고 나오게 수정하기

티스토리에서 표를 넣고나서 모바일 화면으로 보면 왼쪽과 같이 보이는 경우가 있다.

모바일화면에서 표가 짤린다. 드래그를 하면 짤린 부분의 표를 볼 수 있어서 불편한 점은 없지만 이쁘게 보이지 않는다.

그래서 HTML 소스를 수정해서 오른쪽 화면과 같이 변경해 보았다.

 

우선 티스토리에서 표를 만든 후 <티스토리 글쓰기>화면 오른쪽 위에 있는 <□ HTML>을 클릭해서 소스를 찾아보자.

<TABLE> 로 시작해서 </TABLE>로 끝나는 소스이다.

 

<TABLE class=txc-table style="FONT-SIZE: 13px; BORDER-TOP: medium none; FONT-FAMILY: '맑은 고딕',sans-serif; BORDER-RIGHT: medium none; WIDTH: 639px; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none" cellSpacing=0 cellPadding=0 width=639 border=0>
<TBODY>
<TR>
<TD style="BORDER-TOP: #ccc 1px solid; HEIGHT: 17px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 242px; BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid">
<P style="TEXT-ALIGN: right"><SPAN style="FONT-SIZE: 9pt"><STRONG><SPAN style="FONT-SIZE: 9pt">&nbsp;오프닝&nbsp;</SPAN><SPAN style="FONT-SIZE: 9pt">&nbsp;</SPAN></STRONG></SPAN></P></TD>
<TD style="BORDER-TOP: #ccc 1px solid; HEIGHT: 17px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 398px; BORDER-BOTTOM: #ccc 1px solid">
<P><SPAN style="FONT-SIZE: 9pt">&nbsp; Jupiter, The Bringer of Jollity</SPAN></P></TD></TR>
<TR>
<TD style="HEIGHT: 8px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 242px; BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid">
<P style="TEXT-ALIGN: right"><SPAN style="FONT-SIZE: 9pt"><STRONG><SPAN style="FONT-SIZE: 9pt">&nbsp;김예림&nbsp; </SPAN></STRONG></SPAN></P></TD>
<TD style="HEIGHT: 8px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 398px; BORDER-BOTTOM: #ccc 1px solid">
<P><SPAN style="FONT-SIZE: 9pt">&nbsp; Romeo and Juliet(로미오와 줄리엣) OST</SPAN></P></TD></TR>
<TR>
<TD style="HEIGHT: 9px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 242px; BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid">
<P style="TEXT-ALIGN: right"><SPAN style="FONT-SIZE: 9pt"><STRONG><SPAN style="FONT-SIZE: 9pt">&nbsp;박소연&nbsp; </SPAN></STRONG></SPAN></P></TD>
<TD style="HEIGHT: 9px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 398px; BORDER-BOTTOM: #ccc 1px solid">
<P><SPAN style="FONT-SIZE: 9pt">&nbsp; This is Me </SPAN><SPAN class=singer style="FONT-SIZE: 9pt; COLOR: #bdbdbd">from '위대한쇼맨' OST</SPAN></P></TD></TR>
</SPAN></TD></TR></TBODY></TABLE>

 

오프닝	Jupiter, The Bringer of Jollity
김예림	Romeo and Juliet(로미오와 줄리엣) OST
박소연	This is Me from '위대한쇼맨' OST

위의 표는 티스토리 글쓰기 화면에 있는 메뉴에서 <표 만들기>를 선택해 만들었다.

표의 넓이는 639px 이고 3행2열로 만든 표에서 열은 각각 242px , 398px 였다.

기존의 HTML 소스는 빨간색으로 표시된 대로 넓이를 표시하는 <WIDTH> 소스가 px(픽셀)로 정의 되어있다.

그렇기 때문에 모바일에서도 PC와 크기가 같은 표가 나오는 것인데, 이 부분을 px(픽셀)이 아닌 %(퍼센트)로 바꿔주면 된다.

 

넓이(WIDTH)가 픽셀로 되어있을때는 위와 같이 모바일 화면에서 표가 잘려서 나오는데,

픽셀을 %(퍼센트)로 바꿔야 한다.

소스를 하나씩 수정해야하지만 모바일 화면 최적화를 위해서라면 이정도 쯤이야.

모든 소스를 일일이 하나씩 바꾸는 노동을 하기에는 표가 행과 열이 많다. 싶을때는 소스를 복사해서 한글이나 메모장에 붙여넣는다.

그리고 CTRL+H (바꾸기)를 누르면 한번에 바꿀 수 있다.

 

 

 

<TABLE class=txc-table style="FONT-SIZE: 13px; BORDER-TOP: medium none; FONT-FAMILY: '맑은 고딕',sans-serif; BORDER-RIGHT: medium none; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none" cellSpacing=0 cellPadding=0 width=100% border=0>
<TBODY>
<TR>
<TD style="BORDER-TOP: #ccc 1px solid; HEIGHT: 17px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 40%; BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid">
<P style="TEXT-ALIGN: right"><SPAN style="FONT-SIZE: 9pt"><STRONG><SPAN style="FONT-SIZE: 9pt">&nbsp;오프닝&nbsp;</SPAN><SPAN style="FONT-SIZE: 9pt">&nbsp;</SPAN></STRONG></SPAN></P></TD>
<TD style="BORDER-TOP: #ccc 1px solid; HEIGHT: 17px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 60%; BORDER-BOTTOM: #ccc 1px solid">
<P><SPAN style="FONT-SIZE: 9pt">&nbsp; Jupiter, The Bringer of Jollity</SPAN></P></TD></TR>
<TR>
<TD style="HEIGHT: 8px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 40%; BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid">
<P style="TEXT-ALIGN: right"><SPAN style="FONT-SIZE: 9pt"><STRONG><SPAN style="FONT-SIZE: 9pt">&nbsp;김예림&nbsp; </SPAN></STRONG></SPAN></P></TD>
<TD style="HEIGHT: 8px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 60%; BORDER-BOTTOM: #ccc 1px solid">
<P><SPAN style="FONT-SIZE: 9pt">&nbsp; Romeo and Juliet(로미오와 줄리엣) OST</SPAN></P></TD></TR>
<TR>
<TD style="HEIGHT: 9px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 40%; BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid">
<P style="TEXT-ALIGN: right"><SPAN style="FONT-SIZE: 9pt"><STRONG><SPAN style="FONT-SIZE: 9pt">&nbsp;박소연&nbsp; </SPAN></STRONG></SPAN></P></TD>
<TD style="HEIGHT: 9px; BORDER-RIGHT: #ccc 1px solid; WIDTH: 60%; BORDER-BOTTOM: #ccc 1px solid">
<P><SPAN style="FONT-SIZE: 9pt">&nbsp; This is Me </SPAN><SPAN class=singer style="FONT-SIZE: 9pt; COLOR: #bdbdbd">from '위대한쇼맨' OST</SPAN></P></TD></TR>
</SPAN></TD></TR></TBODY></TABLE>

가장 위에 있는 <TABLE> 소스는 표 전체 넓이인데, 이를 100% 로 바꿔주자. 그러면 PC나 모바일에서 각각 화면에 '맞춰' 표가 보여진다.

<TR> 소스 안에 <TD>가 2개씩 들어있는데, 1행2열을 나타낸다.

한 줄에 있는 2열의 넓이도 조절하고 싶으면 %(퍼센트)로 100% 되도록 나눠주면 된다. 

각각 50%도 괜찮고, 40% 60% 도 괜찮다. 

오프닝	Jupiter, The Bringer of Jollity
김예림	Romeo and Juliet(로미오와 줄리엣) OST
박소연	This is Me from '위대한쇼맨' OST

그렇게 픽셀을 %(퍼센트)로 수정해서 만든 표는 PC화면에서 이렇게 나온다.

위에 수정 전의 표와 다른 점이라면 넓이가 100%이기때문에 PC에서 글쓰기 영역에 영향을 주는 가로폭 최대치까지 나온다.

 

그리고 모바일 화면에서는 이렇게 모바일에 맞게 100% 표로 깔끔하게 나오는 걸 볼 수 있다.

 

결론 : 모바일 최적화로 표를 만들고 싶다면, px(픽셀)을 %(퍼센트)로 수정해라.