table과 div 태그의 장단점 비교

티스토리 블로그를 하다보면 직접 html 및 css를 수정해야 할 일이 많은데, 이때 많이 하는 고민 중하나가 애드센스 코드를 table 태그로 삽입할 건인지, 아니면 div 태그로 삽입할 것 인지이다.

그래서 과연 table 태그와 div 태그 중 어떤 것이 자기 블로그에 맞는 것인지 고민하는 분들을 위해 장단점을 비교해 보았다.

두 태그의 장단점을 비교한 건 외국사이트를 참고했다.

원문보기

구분	table 태그	div 태그
사용법	쉬움	어려움
html 파일크기	늘어남	작아짐
기능	웹문서에 테이블 표시	웹사이트 전체 레이아웃
로딩속도	테이블이 다 그려진 후에 데이터 로딩	div 태그별로 데이터가 로딩이 됨
수정	어려움	쉬움
긴 문자열, 이미지 처리	열의 넓이를 자유롭게 조절할 수 없음 같은 열에 긴 문장이나 이밎가 있을 경우 그 열의 너비가 그 너비에 맞춰짐	자유롭게 너비 설정이 가능하나, 구형 브라우저에서 제대로 동작이 안되는 경우가 발생함

이처럼 두 태그는 그 차이점이 비교적 명확하다.

좀더 구체적인 차이점에 대해 파악하려면 아래 블로그에 잘 정리되어 있다.

DIV와 TABLE의 차이점

table 과 div 의 차이

그래서 내가 내린 결론은, html, css에 이미 익숙한 사람이라면, div를 이용해 애드센스를 달면 되고, 나 같은 초보자들은 일단 간단하게 table을 이용해서 운영을 해보는 것도 좋겠다는 것이다. 왜냐하면 table 태그로 adsense를 달더라고 테이블의 크기가 작기 때문에 로딩 속도에 미치는 영향이 적기 때문이다.

그리고 워드프레스가 아닌 티스토리의 경우 사이트 전체 레이아웃을 바꾸는 건 그냥 마음에 드는 스킨을 바꾸면 되기 때문에 그렇게 간단하게 table 태그에 대한 지식만 있어도 운영하는데 큰 어려움이 없을 것이다. 이미 스킨을 수정할 정도 되면 이런 고민도 안할 실력이기 때문이기에...

마지막으로 부끄럼지만 내가 사용하는 티스토리 상단 애드센스 2개를 보여주는 반응형 코드를 공개해본다. 작동되는 기준은 반응형 스킨을 사용하며 기본 본문 너비가 800px을 사용할때의 기준으로 작성하였다. 빨간색과 파란색 부분은 각자 본인이 원하는 말로 바꾸면 되고, 검은색 부분은 본인 애드센스의 정보를 넣어주면 된다. 

애드센스반용형 상단 2개.txt

<!-- 구글애드센스시작 -->

<center>

<table cellpadding="0" cellspacing="0"  table width="85%">

<tr>

<td  align=center>

<style>

.aedi_tistory_autosize_no1 { width: 320px; height: 100px; }

@media(min-width: 400px) { .aedi_tistory_autosize_no1 { width: 320px; height: 100px; } }

@media(min-width: 500px) { .aedi_tistory_autosize_no1 { width: 200px; height: 200px; } }

@media(min-width: 700px) { .aedi_tistory_autosize_no1 { width: 300px; height: 250px; } }

@media(min-width: 800px) { .aedi_tistory_autosize_no1 { width: 336px; height: 280px; } }

</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- aedi_tistory_autosize_no1 -->

<ins class="adsbygoogle aedi_tistory_autosize_no1"

      style="display:block"

      data-ad-client="본인 애드센스 정보"

      data-ad-slot="본인 애드센스 정보"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</td>

<td  align=center>

<style>

.aedi_tistory_autosize_no2 { width: 0px; height: 0px; }

@media(min-width: 400px) { .aedi_tistory_autosize_no2 { display: none; } }

@media(min-width: 500px) { .aedi_tistory_autosize_no2 { width: 200px; height: 200px; } }

@media(min-width: 700px) { .aedi_tistory_autosize_no2 { width: 300px; height: 250px; } }

@media(min-width: 800px) { .aedi_tistory_autosize_no2 { width: 336px; height: 280px; } }

</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- aedi_tistory_autosize_no2 -->

<ins class="adsbygoogle aedi_tistory_autosize_no2"

      style="display:block"

      data-ad-client="본인 애드센스 정보"

      data-ad-slot="본인 애드센스 정보"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</td>

</tr>

</table>

</center>

<!-- 구글애드센스끝 --> 

이상 간단히 비교해본 table과 div의 장단점에 대한 포스팅을 마친다.