프로그램개발/HTML5(웹앱,모바일웹,하이브리드웹)
TABLE구현과 CSS구현의 차이점
크레도스
2014. 5. 12. 11:45
출처: http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=talkbox2&wr_id=987872&page=3
<!-- CSS로 모양잡기 -->
<style>
ul { margin: 0px; padding: 0px; list-style: none; }
ul.gallery li { float: left; width: 200px; height: 200px; margin: 10px; }
ul.gallery li span { display: block; }
ul.list li { height: 50px; }
ul.list li span { float: left; }
ul.list li span.subject { line-height: 50px; text-indent: 10px; }
hr { clear: both; }
</style>
<ul class='list'>
<li>
<span class='photo'><img src='...' width='50' height='50' alt='...' /></span>
<span class='subject'>동해물과백두산이</span>
</li>
<li>
<span class='photo'><img src='...' width='50' height='50' alt='...' /></span>
<span class='subject'>동해물과백두산이</span>
</li>
<li>
<span class='photo'><img src='...' width='50' height='50' alt='...' /></span>
<span class='subject'>동해물과백두산이</span>
</li>
</ul>
<hr />
위의 코드는 ul의 클래스 변경시 갤러리형 또는 목록형으로 자유로이 변경 가능합니다.
<!-- 테이블로 모양잡기 -->
<table>
<tr height='200'>
<td width='200'>
<div class='photo'><img src='...' width='50' height='50' alt='...' /></div>
<div class='subject'>동해물과백두산이</div>
</td>
<td width='200'>
<div class='photo'><img src='...' width='50' height='50' alt='...' /></div>
<div class='subject'>동해물과백두산이</div>
</td>
<td width='200'>
<div class='photo'><img src='...' width='50' height='50' alt='...' /></div>
<div class='subject'>동해물과백두산이</div>
</td>
</tr>
</table>
<hr />
<table class='list'>
<tr>
<td class='photo'><img src='...' width='50' height='50' alt='...' /></td>
<td class='subject'>동해물과백두산이</td>
</tr>
<tr>
<td class='photo'><img src='...' width='50' height='50' alt='...' /></td>
<td class='subject'>동해물과백두산이</td>
</tr>
<tr>
<td class='photo'><img src='...' width='50' height='50' alt='...' /></td>
<td class='subject'>동해물과백두산이</td>
</tr>
</table>
목록형이나 갤러리형을 따로 표현하기 위해서는 html을 새로이 짜야합니다.
<!-- PHP에서 갤러리 구현 for css -->
<style>
ul { width: 1000px; margin: 0px; padding: 0px; }
ul li { float: left; width: 200px; height: 200px; margin: 0px; padding: 0px; }
</style>
<ul>
<?
for ($i = 0; $i < 30; $i++) {
echo "<li>statement</li>";
}
?>
</ul>
PHP에서 CSS형 갤러리를 만들 경우 wrapper의 가로 사이즈를 기준으로 child의 가로사이즈를 등분해서 입력하면
원하는 가로 세로 진열을 만들 수 있습니다. 가로 5칸이 나오겠죠.
<!-- PHP에서 갤러리 구현 for table -->
<table>
<tr>
<?
for (my $i = 0; $i < 31; $i++) {
if ($i && $i % 5 == 0) { echo "</tr><tr>"; }
echo "<td>statement</td>";
}
?>
</tr>
</table>
PHP에서 table형 갤러리를 만들 경우 TR의 출력을 계산해서 보내야합니다.
제가 테이블을 쓰는 경우는 표형식입니다.
<table>
<caption>오늘 가입한 회원</caption>
<thead>
<tr>
<th>No</th>
<td>이름</td>
<td>나이</td>
</tr>
</thead>
<tbody>
<tr>
<th>3</th>
<td>홍길동</td>
<td>500세</td>
</tr>
<tr>
<th>2</th>
<td>개똥이</td>
<td>25세</td>
</tr>
<tr>
<th>1</th>
<td>동방삭</td>
<td>180000세</td>
</tr>
</tbody>
</table>
CSS를 만들면서 주의해야하는 점이 있습니다.
CSS는 무조건 css파일을 만들어서 관리를 해야합니다.
inline에 사용하는 것은 엄금입니다.
위의 예시처럼 html안에 사용하는 것은 지양합니다.
css작성시에는 위의 예시처럼 selector를 잡는 방식은 사용해서는 안됩니다.
selector는 반드시 id를 활용하며 다른 element에 영향을 주어서는 안됩니다.
hack은 사용하지 않습니다.
저는 대충 이정도로 주의를 가지고 코딩합니다.
예전에는 저도 table레이아웃을 쓰고 들여쓰기로 보기좋게 코딩을 했었는데
그땐 table이 매우 익숙했었죠.
한 5년 전부터 div+css를 사용하기 시작했었는데 처음에는 불편했습니다.
브라우저마다 css랜더링도 안맞고(특히 IE) 그랬는데 지금에서는 table로 레이아웃 잡는게 오히려 불편해져 버렸네요.
그래서 저는 div+css를 권장하는 입장입니다.
table이던 div+css던 코드만 깔끔하게 짠다면 유지보수에 어려움은 없겠지만요...