채택완료
div 코딩으로 공부를 하는데...영 개념이 않잡힙니다. ㅠㅠ
| 왼쪽 레이아웃 |
오른쪽 레이아웃 |
Copy
<div><table width="100%" cellpadding="1" cellspacing="0" style="border: 1px solid rgb(0, 0, 0); border-collapse: collapse"><tbody></tbody><colgroup><col width="80" /><col width="" /></colgroup><tbody><tr><td style="border: 1px solid rgb(0, 0, 0)">왼쪽 <br />레이아웃</td><td style="border: 1px solid rgb(0, 0, 0)"> 오른쪽 레이아웃</td></tr></tbody></table><br /></div>전체 div 안에 좌측과 우측으로 레이아웃을 잡으려고 하는데...
이게 table에 너무 익숙해져서...div로는 영 개념이 잡히지 않네요...
좌측에 <div style='float:left;width:80px'> 를 줘도...
ㅠㅠ
답변 4개 / 댓글 2개
채택된 답변
+20 포인트
<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의 쓰임새 부분은 많은 코딩을 하면서 노하우를
쌓아가는게 제일빠른 배움의 지름길입니다.
Copy
왼쪽 박스
오른쪽 박스왼쪽 박스
오른쪽 박스
목적에 맞는 태그를 사용하는 것이 웹표준을 지키는 데는 도움이 된다고 생각됩니다. 그래서 레이아웃 잡을 때 div 를 사용하게 되는 데요. 박스 개념으로 생각해 보면 도움이 되더군요. 큰 박스의 크기를 잡아 두고, 작은 박스들을 넣어서 오른쪽(float:right;), 왼쪽(float:left) 등으로 자리를 잡아주는... 아마 조금 사용해 보시면 쉽게 적응되실 것 같습니다.^^
답변을 작성하려면 로그인이 필요합니다.