div 코딩으로 공부를 하는데...영 개념이 않잡힙니다. ㅠㅠ

div 코딩으로 공부를 하는데...영 개념이 않잡힙니다. ㅠㅠ

QA

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를 적절히 조합해서 사용합니다.
div만 고집하는것도 좋은것은 아닙니다.



	
왼쪽 박스
오른쪽 박스




왼쪽 박스
오른쪽 박스

목적에 맞는 태그를 사용하는 것이 웹표준을 지키는 데는 도움이 된다고 생각됩니다. 그래서 레이아웃 잡을 때 div 를 사용하게 되는 데요. 박스 개념으로 생각해 보면 도움이 되더군요. 큰 박스의 크기를 잡아 두고, 작은 박스들을 넣어서 오른쪽(float:right;), 왼쪽(float:left) 등으로 자리를 잡아주는... 아마 조금 사용해 보시면 쉽게 적응되실 것 같습니다.^^

Table 코딩에 너무 익숙 해져 있다 보니 사실 div 코딩은 감이 오질 않았거든요.
Markup 회원님께서 말씀해주신 대로 레이아웃을 잡는 용도로 사용하려고 노력 중 입니다.
:ㅇ) 우선 그 실력을 쌓아야겠지만 말이지요 ㅎㅎ
박스 개념이라는 말은 정말 좋은 의견 이신것 같습니다. 감사드립니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 23
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT