|
CSS와 div 로 만들어진 코딩과 table 태그로 만들어진 코딩 비교입니다 ^^
아주 간단한 비교로 둘의 차이점을 비교하기 위한 단순한 예제입니다.
아래는 table로 만들어진 갤러리 형식의 이미지 리스트가 되겠습니다.
|
이미지1
|
이미지2
|
이미지3
|
이미지3
|
이미지4
|
이미지5
|
|
위 리스트의 태그는 아래와 같습니다.
<table border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td align="center"><img src="http://superkts.pe.kr/images/helper/smp_180_01.jpg"><br>이미지1</td>
<td align="center"><img src="http://superkts.pe.kr/images/helper/smp_180_02.jpg"><br>이미지2</td>
<td align="center"><img src="http://superkts.pe.kr/images/helper/smp_180_03.jpg"><br>이미지3</td>
</tr>
<tr>
<td align="center"><img src="http://superkts.pe.kr/images/helper/smp_180_04.jpg"><br>이미지3</td>
<td align="center"><img src="http://superkts.pe.kr/images/helper/smp_180_05.jpg"><br>이미지4</td>
<td align="center"><img src="http://superkts.pe.kr/images/helper/smp_180_06.jpg"><br>이미지5</td>
</tr>
</table>
|
아래는 div와 css가 적용된 리스트 입니다.
|
이미지1
이미지2
이미지3
이미지4
이미지5
이미지6
|
아래는 위 코딩의 태그입니다.
<style type="text/css">
#img_wrap {text-align:center;}
#img_list {margin:0 auto; padding:0; width:562px;}
#img_list span{font-size:9pt; float:left; margin:3px; text-align:center;}
</style>
<div id="img_wrap">
<div id="img_list">
<span><img src="http://superkts.pe.kr/images/helper/smp_180_01.jpg"><br>이미지1</span>
<span><img src="http://superkts.pe.kr/images/helper/smp_180_02.jpg"><br>이미지2</span>
<span><img src="http://superkts.pe.kr/images/helper/smp_180_03.jpg"><br>이미지3</span>
<span><img src="http://superkts.pe.kr/images/helper/smp_180_04.jpg"><br>이미지4</span>
<span><img src="http://superkts.pe.kr/images/helper/smp_180_05.jpg"><br>이미지5</span>
<span><img src="http://superkts.pe.kr/images/helper/smp_180_06.jpg"><br>이미지6</span>
</div>
</div>
|
|
위와 같은 갤러리 형식의 코딩에서 table을 쓸 경우엔 한줄에 보이는 이미지수가 변경될 경우 tr 이 나오는
부분을 바꾸어야 하는 불편함(?)이 있습니다.
하지만 아래 예제 에서는 #img_list {margin:0 auto; padding:0; width:562px;} 부분만 고쳐 주면됩니다.
그리고 소스도 좀더 직관적으로 보여 눈에 잘들어 옵니다. 루프 돌릴때 편합니다 -_-;
위 비교는 최대한 단순한 소스의 비교로 실제 복잡한 내용이 나오게 될 경우 많은 차이가 납니다.
css 를 사용한 코딩에서 제일 주의할 점은 IE 와 FF 가 역시나 css 를 다르게 해석한다는 것입니다.
css 표준을 지켜 코딩해도 둘이 다르게 해석하면 참 난감하죠.
개발자 입장에서 작성해 보았습니다 ^^;
|