• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

div 두 개 나란히 이어 붙이기

오작교 85197

2

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

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

<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>
공유
2
오작교 글쓴이 2007.10.23. 17:47
테이블로 연결하기

테이블 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>
오작교 글쓴이 2007.11.25. 23:40
이렇게도 해볼 수 있습니다.
컨텐츠


<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>

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290766 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349720 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294364 +14
300
normal
오작교 23.12.10.09:32 14530 0
299 Script
normal
오작교 23.12.10.09:29 19852 0
298 CSS
normal
오작교 21.01.09.14:18 40786 0
297 HTML
normal
오작교 15.09.17.08:58 116374 0
296 HTML
normal
오작교 15.09.13.21:38 21658 0
295 HTML
normal
오작교 15.09.13.21:30 25238 0
294 HTML
normal
오작교 15.08.30.12:19 52841 0
293 Script
normal
오작교 15.05.12.14:06 21219 0
292 HTML
file
오작교 12.03.08.13:51 35993 0
291 HTML
normal
오작교 11.06.03.10:44 40813 0
290 CSS
normal
오작교 11.06.03.10:29 70714 0
289 Script
normal
오작교 11.03.22.11:19 43522 0
288 Script
normal
오작교 11.03.22.11:15 38292 0
287 Script
normal
오작교 11.03.22.11:07 37178 0
286 HTML
normal
오작교 11.01.25.10:27 36272 0
285 CSS
normal
오작교 11.01.24.10:40 35445 0
284 HTML
normal
오작교 11.01.24.10:39 37164 0
283 Script
normal
오작교 11.01.24.10:34 38171 0
282 CSS
normal
오작교 11.01.24.10:31 37812 0
281 CSS
normal
오작교 11.01.24.10:27 36273 0