레이아웃 효과 position과 display 그리고 float

레이아웃에 사용되는 3가지 속성

1. position

 └ 사이즈를 직접 넣어줘야함. margin, padding 지정 (주로 margin)

 - static : 기본값

 - absolute : (많이 사용) 화면값에 영향을 주지 않고 위치지정 가능 

 - relative : static과 비슷, offset 지정가능, 하위엘리먼트의 기준

2. float

 └ 정렬의 개념. layout나눌때 (정렬할때) 사용. 전체 또는 부분적 사용 가능.

 - left : 엘리먼트 왼쪽 배치

 - right : 엘리먼트 오른쪽 배치

 - none : float 사용안함

3. display

 └ 유동적이며 부분적으로 위치를 조정할때 많이 쓰임

 - inline : (많이 사용) width와 height 값을 설정할 수 없음. margin과 padding값의 설정도 불가능

             span , img 태그에 많이 사용됨

 - block : width와 height의 설정이 가능. margin과 padding도 사용 가능

             div, p, form 요소들이 있고 하위 단계에서 블록단위로 개행됨

 - inline-block : inline이되 block처럼 width나 margin, padding 사용 가능. float 속성을 안써도 가로정렬이 되서 유용하게 사용하는 편

                      ie 6-7에서 inline-block을 사용하면 제대로 표현안되는 버그가 있어서 상대적으로 많이 사용되지 않음.