g

초보입니다.아래 table을 div로 표현하면 어떻게 되나요?

· 2012-07-21 (토) 07:45:10 · 1668 · 5
<table width="600" border="3" cellspacing="1" cellpadding="1">
<tr>
<td rowspan="2">여기는 이미지 로고</td>
<td> </td>
</tr>
<tr>
<td>여기에 로그인 | 회원가입</td>
</tr>
</table>

아래의 경우는 div로 표현이 가능한데 위의예제는 모르겠네요 ㅠㅠ 꼭좀 도와주세요
<table width="600" border="3" cellspacing="1" cellpadding="1">
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
|

댓글 5개

<div style='width:600' border:3px black solid;>
<div style='width:50%;float:left;'>여기는로고</div><div style='width:50%;float:left;'> </div>
<div style='width:100%;'float:left;'>여기에 로그인 | 회원가입</div>
</div>

위의 내용대로는 위의 div 네요
<div style="width:600px;border:3px solid #666;">
<div style="float:left;width:30%;height:60px;background:#999;color:#fff">여기는 이미지 로고</div>
<div style="float:left;width:70%;height:30px;background:#333;color:#fff">여기는 빈공간</div>
<div style="float:left;width:70%;height:30px;background:#777;color:#fff">여기에 로그인 | 회원가입</div>
</div>

<div style="width:600px;border:3px solid #666;">
<div style="width:100%;height:30px;background:#999;color:#fff">여기는 이미지 로고</div>
<div style="float:left;width:50%;height:30px;background:#333;color:#fff">여기는 빈공간</div>
<div style="float:left;width:50%;height:30px;background:#777;color:#fff">여기에 로그인 | 회원가입</div>
</div>

이러면 될듯
<div id="wrap">
<div style="width:1000px; text-align:center; margin:0 auto 0 auto;">
<div style="float:left; width: 300px; height:80px;background:#ff6600;">이미지</div>
<div style="float:left; width:700px;">
<div style="width: 700px; height:60px;background:#0084ff;">빈공간</div>
<div style="width: 700px; height:20px;">
<div style="float:left; width: 400px; height:20px; background:#f8ff32;">검색</div>
<div style="float:left; width: 300px; height:20px; background:#32fffd;">회원가입|로그인</div>
</div>
</div>
</div>

이구조가 맞을듯한테 맞나요? 소스가 이상하게 기네요...ㅠㅠ
<style>
#wrap { }
#header {width:1000px; text-align:center; margin:0 auto 0 auto; }
#header2 { float:left; width: 300px; height:80px;background:#ff6600; }
#header3 { float:left; width:700px; }
#header4 { width: 700px; height:60px;background:#0084ff;}
#header5 { width: 700px; height:20px;}
#header6 { float:left; width: 400px; height:20px; background:#f8ff32;}
#header7 { float:left; width: 300px; height:20px; background:#32fffd;}
</style>
<div id="wrap">
<div style="header">
<div style="header2">이미지</div>
<div style="header3">
<div style="header4">빈공간</div>
<div style="header5">
<div style="header6">검색</div>
<div style="header7">회원가입|로그인</div>
</div>
</div>
</div>

이렇게 해보시는게..?
예로 위와 같이 코딩해본것이구요
제가 소스가 길다는것은 div안에 다시 div를 지정해야 하니 길게 코딩된듯해서요 ^^
쿠헹군님과 새벽비님은 굉장히 간단하게 코딩이되었는데 실제로 보면 틀이 딱맞질 않아서 div안에 다시 div를 지정해서 틀을 맞추어 본것입니다.
당연히 실제로는 style.css에 style지정해 사용할 예정입니다.
css로 지정해서 하라는 말씀이신군요

감사드립니다.^^
댓글을 작성하시려면 로그인이 필요합니다.

그누4 질문답변

66,531건

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기 기존 게시물은 열람만 가능합니다.

+
제목 글쓴이 날짜 조회
12-07-22 조회 1,935
12-07-22 조회 817
12-07-22 조회 855
12-07-21 조회 1,601
12-07-21 조회 853
12-07-21 조회 2,078
12-07-21 조회 760
12-07-21 조회 842
12-07-21 조회 1,896
12-07-21 조회 780
12-07-21 조회 900
12-07-21 조회 2,233
12-07-21 조회 1,669
12-07-21 조회 1,798
12-07-21 조회 870
12-07-20 조회 757
12-07-20 조회 866
12-07-20 조회 1,096
12-07-20 조회 1,719
12-07-20 조회 2,134