div 두 개 나란히 이어 붙이기
아래와 같이 두 셀을 가로로 나열하기 위해 테이블로 아래와 같은 간단한 방법을 사용하실 수 있습니다.
| 안녕하세요 | 오작교의 홈입니다. |
<tr>
<td width="200" bgcolor="#aaaaaa">안녕하세요</td>
<td width="200" bgcolor="#cccccc">오작교의 홈입니다.</td>
</tr>
<td width="200" bgcolor="#aaaaaa">안녕하세요</td>
<td width="200" bgcolor="#cccccc">오작교의 홈입니다.</td>
</tr>
그런데 div를 사용할 경우 어떻게 될까요?
<div style="width:200; background:#aaaaaa;">안녕하세요</div>
<div style="width:200; background:#cccccc;">오작교의 홈입니다.</div>
<div style="width:200; background:#cccccc;">오작교의 홈입니다.</div>
위과 같이 사용한다면 아래와 같이 출력될 것입니다.
안녕하세요
오작교의 홈입니다.
div를 사용할 경우 position 값을 absolute로 지정하여 직접 위치를 지정한다면 문제가 없겠지만,
그렇지 않은 일반 div의 경우만으로 위의 테이블과 같이 할 수 없을 것 입니다.
따라서 float를 이용한다면 아주 쉽게 해결하실 수 있습니다.
안녕하세요
오작교의 홈입니다.
<div style="float:left;width:200; background:#aaaaaa;">안녕하세요</div>
<div style="width:200; background:#cccccc;">오작교의 홈입니다.</div>
<div style="width:200; background:#cccccc;">오작교의 홈입니다.</div>
테이블로 연결하기
<table width=200 cellspacing=0 cellpadding=0 border="1" style="display:inline;"> <tr>
<td>테이블 1</td>
</tr>
</table>
<table width=200 cellspacing=0 cellpadding=0 border="1" style="display:inline;">
<tr>
<td>테이블 2</td>
</tr>
</table>
| 테이블 1 |
| 테이블 2 |
<table width=200 cellspacing=0 cellpadding=0 border="1" style="display:inline;"> <tr>
<td>테이블 1</td>
</tr>
</table>
<table width=200 cellspacing=0 cellpadding=0 border="1" style="display:inline;">
<tr>
<td>테이블 2</td>
</tr>
</table>
이렇게도 해볼 수 있습니다.
<div id="header" style="background:#66ccff; width:500;">헤더</div>
<div id="container">
<div id="contents" style="float:left;background:#33cc00; width:250;">컨텐츠</div>
<div id="sidebar" style="float:left;background:#33cccc; width:250;margin:0;">사이드바</div>
</div><BR>
<div id="footer" style="background:#ccccff; width:500;">푸터</div>
헤더
컨텐츠
<div id="header" style="background:#66ccff; width:500;">헤더</div>
<div id="container">
<div id="contents" style="float:left;background:#33cc00; width:250;">컨텐츠</div>
<div id="sidebar" style="float:left;background:#33cccc; width:250;margin:0;">사이드바</div>
</div><BR>
<div id="footer" style="background:#ccccff; width:500;">푸터</div>
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
