div 코딩으로 공부를 하는데...영 개념이 않잡힙니다. ㅠㅠ 채택완료
레스트
11년 전
조회 8,345
| 왼쪽 레이아웃 |
오른쪽 레이아웃 |
</div>
<div><span style="color: #0000cc"><div></span>
<span style="color: #0000c8"><table</span> <span style="color: #b40000">width</span>=<span style="color: #248f00">"100%" cellpadding="1" cellspacing="0" style="border: 1px solid rgb(0, 0, 0); border-collapse: collapse"</span><span style="color: #0000c8">></span>
<span style="color: #0000cc"><tbody></span><span style="color: #0000cc"></tbody></span><span style="color: #0000cc"><colgroup></span><span style="color: #0000c8"><col</span> <span style="color: #b40000">width</span>=<span style="color: #248f00">"80" </span><span style="color: #0000c8">/></span><span style="color: #0000c8"><col</span> <span style="color: #b40000">width</span>=<span style="color: #248f00">"" </span><span style="color: #0000c8">/></span><span style="color: #0000cc"></colgroup></span>
<span style="color: #0000cc"><tbody></span>
<span style="color: #0000cc"><tr></span>
<span style="color: #0000c8"><td</span> <span style="color: #b40000">style</span>=<span style="color: #248f00">"border: 1px solid rgb(0, 0, 0)"</span><span style="color: #0000c8">></span>왼쪽 <span style="color: #0000cc">
</span>레이아웃<span style="color: #0000cc"></td></span>
<span style="color: #0000c8"><td</span> <span style="color: #b40000">style</span>=<span style="color: #248f00">"border: 1px solid rgb(0, 0, 0)"</span><span style="color: #0000c8">></span> 오른쪽 레이아웃<span style="color: #0000cc"></td></span><span style="color: #0000cc"></tr></span><span style="color: #0000cc"></tbody></span><span style="color: #0000cc"></table></span><span style="color: #0000cc">
</span><span style="color: #0000cc"></div></span></div>
<div>전체 div 안에 좌측과 우측으로 레이아웃을 잡으려고 하는데...
이게 table에 너무 익숙해져서...div로는 영 개념이 잡히지 않네요...
좌측에 <div style='float:left;width:80px'> 를 줘도...
ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
채택된 답변
+20 포인트
11년 전
<div style="width:310px; height:100px; border: 1px solid #ff0000;">
<div style="float:left; width:150px; height:100px; border: 1px solid #ff0000;">
left
</div>
<div style="float:right; width:150px; height:100px; border: 1px solid #ff0000;">
right
</div>
</div>
이런식이며
방법은 여러가지가 있습니다.
float:left 만 한쪽으로 주고 margin 등을 이용하여 여백을 확장해주거나
display:inline; 을 주어 자리를 잡거나
방법은 서로 다르나
레이아웃을 잡는 방법이기도 합니다.
쓰임새는 사용자의 몫이며
어느쪽이 정답이다는 없습니다.
div 와 css의 쓰임새 부분은 많은 코딩을 하면서 노하우를
쌓아가는게 제일빠른 배움의 지름길입니다.
<div style="float:left; width:150px; height:100px; border: 1px solid #ff0000;">
left
</div>
<div style="float:right; width:150px; height:100px; border: 1px solid #ff0000;">
right
</div>
</div>
이런식이며
방법은 여러가지가 있습니다.
float:left 만 한쪽으로 주고 margin 등을 이용하여 여백을 확장해주거나
display:inline; 을 주어 자리를 잡거나
방법은 서로 다르나
레이아웃을 잡는 방법이기도 합니다.
쓰임새는 사용자의 몫이며
어느쪽이 정답이다는 없습니다.
div 와 css의 쓰임새 부분은 많은 코딩을 하면서 노하우를
쌓아가는게 제일빠른 배움의 지름길입니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
레스트
11년 전
진심으로 감사드립니다. 더 많이 노력해야겠습니다. 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
11년 전
<div style="width: 300px; height: 200px; background-color: #f2f2f2; padding: 10px; border: 1px solid rgb(102, 102, 102)">
<div style="float: left; width: 100px; height: 200px; border: 1px solid red">왼쪽 박스</div>
<div style="float: right; width: 180px; height: 200px; border: 1px solid green">오른쪽 박스</div></div>
<div style="clear: both"></div>왼쪽 박스
오른쪽 박스
목적에 맞는 태그를 사용하는 것이 웹표준을 지키는 데는 도움이 된다고 생각됩니다. 그래서 레이아웃 잡을 때 div 를 사용하게 되는 데요. 박스 개념으로 생각해 보면 도움이 되더군요. 큰 박스의 크기를 잡아 두고, 작은 박스들을 넣어서 오른쪽(float:right;), 왼쪽(float:left) 등으로 자리를 잡아주는... 아마 조금 사용해 보시면 쉽게 적응되실 것 같습니다.^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
레스트
11년 전
Table 코딩에 너무 익숙 해져 있다 보니 사실 div 코딩은 감이 오질 않았거든요.
Markup 회원님께서 말씀해주신 대로 레이아웃을 잡는 용도로 사용하려고 노력 중 입니다.
:ㅇ) 우선 그 실력을 쌓아야겠지만 말이지요 ㅎㅎ
박스 개념이라는 말은 정말 좋은 의견 이신것 같습니다. 감사드립니다.
Markup 회원님께서 말씀해주신 대로 레이아웃을 잡는 용도로 사용하려고 노력 중 입니다.
:ㅇ) 우선 그 실력을 쌓아야겠지만 말이지요 ㅎㅎ
박스 개념이라는 말은 정말 좋은 의견 이신것 같습니다. 감사드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인