div 코딩으로 공부를 하는데...영 개념이 않잡힙니다. ㅠㅠ
본문
왼쪽 레이아웃 |
오른쪽 레이아웃 |
<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
<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의 쓰임새 부분은 많은 코딩을 하면서 노하우를
쌓아가는게 제일빠른 배움의 지름길입니다.
너무 어렵게 생각하지 말아요.
결국은 목적지는 같은데
승용차를 타느냐 버스를 타느냐 가 문제이지
저 같은 경우는 테이블과 div를 적절히 조합해서 사용합니다.
div만 고집하는것도 좋은것은 아닙니다.
결국은 목적지는 같은데
승용차를 타느냐 버스를 타느냐 가 문제이지
저 같은 경우는 테이블과 div를 적절히 조합해서 사용합니다.
div만 고집하는것도 좋은것은 아닙니다.
왼쪽 박스
오른쪽 박스
왼쪽 박스
오른쪽 박스
목적에 맞는 태그를 사용하는 것이 웹표준을 지키는 데는 도움이 된다고 생각됩니다. 그래서 레이아웃 잡을 때 div 를 사용하게 되는 데요. 박스 개념으로 생각해 보면 도움이 되더군요. 큰 박스의 크기를 잡아 두고, 작은 박스들을 넣어서 오른쪽(float:right;), 왼쪽(float:left) 등으로 자리를 잡아주는... 아마 조금 사용해 보시면 쉽게 적응되실 것 같습니다.^^
왼쪽 박스
오른쪽 박스
헐 수정이 안되네요... 코드만 다시...^^
답변을 작성하시기 전에 로그인 해주세요.