3. CSS [Float && Position && Display] ~ CS

2. Floating Element

float는 위치를 제어하는 CSS요소이다. 속성값은 left, none ,right , inherit 가 될 수 있고 inherit은 자신을 감싸는 부모 요소의 float속성을 상속받는 것이다.

float을 사용할때 주의점은 width속성과 같이 써주지 않으면 floating element가 페이지의 100% width를 차지할수 있다는 것이다.

Clear Property

clear 속성은 float속성이 이미 적용되고 있는 요소가 있을 때 한줄에 같이 배치되는 요소들에서 이 속성을 지우고 싶을 때 사용한다.
both, left, right 으로 속성값을 지정할 수 있으며 한 예로 left 속성값은 float:left에 대한 속성을 지워버린다.

Overflow Property

텍스트를 담고 있는 p, div 태그와 같은 영역이 있는데 영역에 포함된 텍스트의 크기가 영역보다 큰경우가 발생하는데 이를 해결하기 위해 Overflow Property를 쓴다.

Sizing and Positioning

position 값은 static , relative , absolute , fixed로 구성되어 있고 위사진에서 fixed 속성값 때문에 "Here I am!" 이라는 문자는 웹 브라우저 전체 화면을 기준으로 배치되는것을 볼수 있다. scroll을 내려도 fixed 속성값을 가진 element는 그 위치가 변하지 않는다.

Position: Static

position의 기본 값으로 요소들이 겹쳐지지 않게 한줄에 하나의 요소가 배치된다.

Position: relative

Relative 속성은 원래 해당요소가 배치되어야 하는 곳을 기준으로 상(top)/하(bottom)/좌(left)/우(right) 로 지정한 값만큼 떨어진 곳으로 위치시킨다. 그래서 위의 2사각형은 static으로 표현된 2번사각형 기준으로 top:0x , left:100px 만큼 떨어진 곳에 위치하고 또한 3번 사각형은 static으로 표현된 3번사각형 기준으로 top:0x , left:200px만큼 떨어진곳에 위치한다.

Postition: absolute

absolute속성값은 가장 가까운 element를 기준으로 상/하/좌/우로 지정한 값만큼 떨어지게된다. 만약 상위 element 가 없다면 브라우저의 왼쪽상단을 기준으로 지정한 값만큼 떨어지도록 위치한다.
위의 예제의 2,3번 사각형은 상위요소가 없게 코딩했으므로 브라우저의 왼쪽상단 기준으로 지정한 값만큼떨어지는 것을 볼수 있다. (1사각형이 2,3번요소의 상위요소가 아님!!)

Alignment vs float vs position

가능하다면 Alignment로 element를 layout시켜라

horizontal alignment: text-align
vertical alignment: vertical-align

Alignment가 안된다면, float 방식을 써라
위 방법 2가지 다안되면, position 방법을 써라

Vertical-align Property

위와 같이 속성값은 top,bottom,middle 또는 baseline(default) , length value , % 로 가능하다.

위와 같이 padding,margin을 0으로 했음에도 불구하고 이미지 밑에 공간이 보인다, 이는 vertical-align속성의 값이 baseline(default)로 되어있어 이미지밑에 밑줄이 있기때문이다. 이 문제를 해결하려면 vertical-align을 bottom값으로 설정해 주면 된다.

Display Property

Display 속성은 요소의 표현 방식을 결정합니다. Div태그, p태그와 같이 한 줄에 하나씩 배치되는 것을 block 요소라 하고, span 태그와 같이 한 줄에 여러 개씩 연결되어 배치되는 것을 inline 요소라고 합니다. 화면을 구성하는 어떤 요소든 block 또는 inline 속성을 갖습니다.
다음은 display의 속성값들에 대한 설명이다.