DIV 관련내용 정리

 

 

<<예제>>

 

<!------------------------------------------------------------------------------------>

 

<div id="parent" style="overflow:auto">

<div id="child1" style="float:left;min-height:200px">

왼쪽

</div>

<div id="child2" style="float:right;min-height:200px">

오른쪽

</div>

<div id="child4" style="clear:both;float:left">
     다음줄제목
</div>

<div id="child5" style="float:left">
     다음줄내용
</div>

<div id="child3" style="position:absolute;margin-top:100px;margin-left:100px">

부모왼쪽모서리기준 100,100 이동된 레이어

</div>

</div>

 

<!------------------------------------------------------------------------------------>

 

 

위예제에서 확인할수 있는 내용 기준으로 정리한다.

 

child1 과 child2 레이어의 경우 float 을 주면 parent 레이어에서 자식영역을 인식하지 못하게 된다.

 

float 속성을 주면 부유 속성(포토샵에서 새 레이어 를 생각하면됨 = 종이위에 투명셀로판지를 올린것처럼 공중에 떠있음) 으로 바뀌기 때문이다.

 

그런데 부모레이어 (parent) 에서 에서 overflow 를 auto 로 설정해주면 자식 영역을 모두인식하게 된다.

 

overflow 옵션은 부유영역을 모두 포함해서 처리하는 옵션이기 때문이다.

 

그리고 div 에 높이를 주고싶은경우 child1 이나 child2에 있는 스타일처럼 min-height 옵션을 주면 높이를 잡을수 있게 된다.

 

ie6 에서는 안먹힌다는데 거기까지 생각할 필요는 없지않나 하고 생각한다.

 

 

child3 의 경우 position 옵션을 absolute 로 주고 마진을 지정했는데 저렇게 스타일을 주는 경우 parent 레이어의 왼쪽 위 모서리에서 오른쪽 아래 100px 위치에 child3 레이어를 위치시킬수 있다.

 

child4 같은경우는 float 를 없애기 위해서 clear both 를 줬는데 child1과 2 에서 float를 준채로 다음에 바로 clear 없이 div를 배치할경우 이전 float 을 따라가게 된다.

 

그래서 다음줄로 넘기고 싶은경우 위에같이 clear 해준다.

 

그리고 child4 뒤에 내용을 붙이고 싶은경우 위와같이 child4에는 clear 와 float 를 동시에 써주고 child5는 원래 사용하던대로 float left 만 써주면 된다.

 

위 옵션들만 이용해도 div 위치잡는데 어려움은 없을 것으로 생각된다.

 

 

--추가내용--

 

<<예제>>

 

<!------------------------------------------------------------------------------------>

 

<div style="width:810px; height:80px; white-space: nowrap;font-size:0">
      <div style="display:inline-block;width:810px;min-height:80px;overflow:hidden;background:#111111;margin-left:-10px">1
      </div>
      <div style="display:inline-block;width:810px;min-height:80px;overflow:hidden;background:#333;margin-left:-10px">2
      </div>
      <div style="display:inline-block;width:810px;min-height:80px;overflow:hidden;background:#666;margin-left:-10px">3
      </div>
</div>

 

<!------------------------------------------------------------------------------------>

 

레이어를 브라우저 크기에 관계없이 오른쪽으로 일렬로 정렬하고 싶을때 위 예제를 사용한다.

 

--추가내용--

 

<<예제>>

 

<!------------------------------------------------------------------------------------>

 

<div style="width:100%;min-height:40px;height:40px;cursor:pointer;display: table">
    <div style ="display: table-cell;vertical-align: middle;text-align: center;">
         <font color="#ffffff"><span style="font-size:12px;"><b>PREV</b></span></font>
    </div>
</div>

 

<!------------------------------------------------------------------------------------>

 

레이어를 세로 중앙정렬하고 싶을때 레이어 내에 위 예제를 추가한다.