목록

아래와 같이 두 셀을 가로로 나열하기 위해 테이블로 아래와 같은 간단한 방법을 사용하실 수 있습니다.

안녕하세요 오작교의 홈입니다.

<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를 사용할 경우 position 값을 absolute로 지정하여 직접 위치를 지정한다면 문제가 없겠지만,
그렇지 않은 일반 div의 경우만으로 위의 테이블과 같이 할 수 없을 것 입니다.

따라서 float를 이용한다면 아주 쉽게 해결하실 수 있습니다.

안녕하세요
오작교의 홈입니다.


 

<div style="float:left;width:200; background:#aaaaaa;">안녕하세요</div>
<div style="width:200; background:#cccccc;">오작교의 홈입니다.</div>
이 게시물을