티스토리 표 데스크탑과 모바일 크기 비율 다르게 하기

티스토리 표 모바일

제 블로그를 보시면 아시겠지만, 저는 애드센스 광고를 상단 우측에만 붙이고, 좌측에는 그냥 포스팅 내용을 올립니다.

티스토리 본문 상단 (2개 연속 or 우측 상단) 에 광고 달기 ☜ 포스트 보기

 

저번에 티스토리 표 모바일에도 크기 맞추기 (최적화하기) ☜ 포스트에서 모바일에서도 표가 잘리지 않게 만드는 방법을 살펴봤는데요.

 

그게 제 블로그의 경우에는 안먹히는 경우가 있습니다.

 

테이블을 포스팅 초반부에 사용하는 경우...

모바일에서는 100% 로 해서 잘나오지만, 데스크 탑에서 100% 가 먹히는 바람에, 아래 그림과 같이 애드센스 왼쪽 편이 뻥 비어 버리는 문제가 발생하기 때문이죠.

 

 

아마도 상단 2개의 광고를 쓰시는 분들 중에는 이 문제를 해결하지 못해 그냥 상단 2개로 하시는 분들도 있으실거라 생각됩니다.

 

그렇다고, 광고 왼쪽 크기 만큼으로 px(픽셀)을 정해버리면, 모바일에서도 이상하게 나온다는 점이지요.

 

저도 이거 해결하느라 고생 좀 했었습니다.

 

자 일단, 아래의 소스를 복사해 가시도록 하겠습니다.

 

<table style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none" class="txc-table" border="0" cellspacing="0" cellpadding="0" width="315" border-right:="" border-top:="" font-size:="" font-family:="" border-collapse:="" nown_width="" +="" ?;="" collapse;="" 돋움;="" 9pt;="" none;="" medium="" none?=""> <tbody> <tr> <td style="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BACKGROUND-COLOR: #faf4c0; WIDTH: 315px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid" border-right:="" border-top:="" nown_width="" +="" ?;="" height:="" 56px;="" solid;="" #000000="" 1px="" solid?=""> <p>&nbsp;</p> <p style="TEXT-ALIGN: left" align="left"><strong><span style="COLOR: #000000"><span style="FONT-SIZE: 10pt">&nbsp;</span><font color="#333333"><span style="FONT-SIZE: 10pt"> SAMPLE TABLE</span></font></span></strong></p> <p style="TEXT-ALIGN: left" align="left"><strong></strong><span style="FONT-SIZE: 10pt">&nbsp;</span></p></td></tr></tbody></table></p>

 

수정 창의 우측 상단에 HTML 을 체크하여, 실제 소스 화면으로 들어갑니다.

 

 

이 테이블을 HTML 소스상의 원하는 위치에 붙이신 후, width="315", WIDTH: 315px 요 두 부분만 자신의 데스크탑 크기에 맞도록 px(픽셀)을 변경합니다.

그러고 나서 HTML 화면을 끄신 후, 자신이 원하는대로 테이블 모양과 내용을 변경하시면 됩니다. (HTML 능통자가 아니시라면, 소스에서는 넓이만 조절 후, 디자이너 모드에서 변경하시길 추천합니다.)

 

※ 단, 절대로 디자이너 화면에서 마우스로 긁어서 테이블 크기를 조절하시면 안됩니다.

 

데스크탑 화면에서 한 번 볼까요?

 

애드센스 광고의 왼쪽에 딱 맞도록 테이블이 만들어 졌습니다.

이번엔 모바일에서 볼까요?

 

 

 

아싸, 모바일에서 보니 화면에 100%로 맞추어지는 군요.

 

즉, 우측에 광고가 있는 데스크탑에서는 제가 맞춰놓은 px(픽셀)로 크기가 고정되지만, 광고가 없는 모바일에서는 화면의 100%로 크기를 잡는 테이블입니다.

 

가져가셔서 요긴하게 잘쓰시구요.
 

나름 고생해서 만든거니깐, 가시면서 '추천' 손가락 한 번 꾹~ 눌러주고 가세요. ^^   참고로, 블로그에 SAMPLE 또는 TEST 포스트(비공개)를 하나 만들어서, 자신이 필요한, 요런 표 등을 넣어두시고는, 포스팅 할 때 복사해서 쓰시면 꽤 편합니다.