[웹] css 속성 , float:left, overflow:hidden

div 로 layout 만들기 / 레이아웃 잘 만들기 / css 로 layout 만들기




GWT 의 layout 을 잘 사용하기 위해서는 css 에 대한 이해가 조금 필요하다.
그 중에서도

• overflow:hidden

과

• float: left

부분을 잘 이해할 수 있다면, 원하는 layout 을 만드는 데 큰 어려움이 없을 듯 하다.



float: left 는 아래 page 에서 잘 설명해 주고 있다.

• http://www.w3schools.com/css/css_float.asp

float: left 의 속성을 가지게 되면, 그 element 가 left 로 떠다니게 된다(float). 좀 다듬어서 이야기를 하면, 왼쪽에 공간이 생기면 그리로 움직이게 된다.

그리고 왼쪽(left)으로 가니, 따라오는 녀석들은 공간이 있다면 오른쪽에 오게 된다. 나는 개인적으로 div 에 이 속성을 많이 사용한다.

div 는 기본적으로 한 line 을 차지하는 block 의 속성을 가지게 된다. 그래서 width 를 다 차지하게 되는데 이 때 float:left 를 이용하면 왼쪽으로 붙이고, 오른쪽에 다른 녀석을 올 수 있게 된다.

이런 float:left 와 같이 사용되는 녀석이 overflow:hidden 이라고 할 수 있겠다. overflow:hidden 은 이 속성을 가진 element 가 만약에 contents 보다 화면이 부족한 곳에 위치하게 되는 경우에 이 contents 를 그냥 잘린채로 보여주겠다는 뜻이다.

보통 browser 는 최선을 다해서 보여주기 때문에 div 같이 틀이 고정되어 있는 것이 아닌경우에는 browser 의 width 크기를 줄이면, 그에 따라 div element 가 밑으로 내려가서 보이던지 등의 반응을 보인다.

이 때 이렇게 움직이지 않고, 그냥 width 가 잘려도 내버려두는 overflow:hidden 을 사용하게 되면, width 가 작아지는 대로 div 를 움직이지 않고 놔두기 때문에 div 를 고정시키는 방법으로 사용할 수 있다. 그리고 잘려도 괜찮기 때문에 빈공간이 조금만 있다면 표현 될 수 있다.

예를 들어, 아래 처럼 div 가 2 개 있는 경우에는
<div style="float:left">
  <div style="overflow:hidden/>
</div>

+––––––––––––––+––––––––––––––+
|              |              |
|              |              |
|              |              |
|              |              |
|              |              |
|              |              |
+––––––––––––––+––––––––––––––+

하지만  overflow:hidden 의 속성이 없는 경우에는 화면의 width 가 작은 경우에 아래처럼 보여지게 된다.

+––––––––––––––+
|              |
|              |
|              |
|              |
|              |
|              |
+––––––––––––––+
|              |
|              |
|              |
|              |
|              |
|              |
+––––––––––––––+

inline-block

float 대신에

display : inline-block;

을 쓸 수 있다고 한다.[ref.1]

References

1. http://ko.learnlayout.com/inline-block.html