<div> 태그

항상 <table> 태그만 이용하다가, 최근들어 <div> 를 이용해보고 있다. 사용하다보니 스타일 사용에 있어서 혼란스러운 적이 있었는데, 그건 바로 상단에 지정한 <div> 스타일이 자식에 상속되는거였다.

그냥 생각하기엔 상속되는게 맞긴한데, 뭔가 겹치는 속성이 업데이트도 안되는거 같고 구성도 어떻게 하는지 모르고 해서 여기저기 다녀봤는데.....


1. style 속성 리셋.

    <div style=’clear:both;’></div>

위와 같이 하면 부모 div에서 스타일 지정한 것에 영향받지 않게 된다.


2. 배치

    <div style=’float:left;’></div>

만약 ‘float:left;’ 를 이용하게 되면 해당 <div>는 좌측으로 붙어서 배치된다. 2개의 컬럼을 놔두고자 한다면…

    <div style=’float:left;’></div>
    <div style=’float:left;’></div>

형식으로 기술 하면 된다. 만약  1,3,1 구조로 만들고 싶으면…

    <div style=’clear:both;’></div>
    <div style=’float:left;’></div>
    <div style=’float:left;’></div>
    <div style=’float:right;’></div>
    <div style=’clear:both;’></div>

로 하면..  상단 1개, 중단 3개, 하단 1개 구조가 생성된다.

장점.1. 필드수 변경 같은것이 다른 구조에 영향을 받지 않는다.
장점.2. 테이블보다 속도가 빠르다. 차례대로 읽어서 뿌리기만 하면 되므로..