Float 속성 | Position 속성

Float 속성

: HTML 요소에 float 이 적용되면 HTML 요소는 원래 흐름에서 벗어나 둥둥 떠다니듯이 배치가 된다. 인접한 텍스트 또는 인라인 요소가 그 주위를 자연스럽게 감싸게 한다.

 

자주 사용하는 float 속성

• none : 기본값으로 요소를 띄우지 않음
• left : 왼쪽에 띄움
• right : 오른쪽에 띄움
• inherit : 부모요소로부터 상속함
• intial : 기본값으로 설정함

clear 속성

• float: left; 혹은 float: right; 값을 취소한다.
• clear: none; - 기본값
• clear: left; - 왼쪽을 취소
• clear: right; - 오른쪽을 취소
• clear: both; - 왼쪽, 오른쪽 둘 다 취소

 

---

Position

: position 속성은 HTML 요소를  배치하는 방법을 지정한다.

 

• static (기본값) : static은 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게한다.
• relative : 요소가 문서의 일반적인 흐름에 따라 배치되게 한다. static과 차이점은 static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인 위치에 배치된다.
• absolute : 요소가 문서의 일반적인 흐름을 따르지 않게 한다. absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중 포지션이 relative, absolute, fixed인 태그가 없다면 (body)가 기준이 된다.
• fixed : 문서의 일반적인 흐름에서 제거된다. 스크린의 viewport를 기준으로 한 위치에 배치된다. 스크롤해도 고정된 자리를 가지게 된다.
• sticky : 스크롤의 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있다.

위치속성

: position 속성의 배치하는 방법으로, top left bottom right 속성은 요소를 원하는 곳으로 최종적으로 위치 시키는 속성이다. position : static; 에서는 적용되지 않는다.

top

left

bottom

right

 

관련속성

z-index : 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정한다. z-index는 position (relative, absolute, fixed) 속성이 적용된 요소에서만 작용한다.