웹페이지의 레이아웃을 짤 때 CSS의 position 속성을 활용하면 HTML 요소들의 위치를 쉽게 설정할 수 있다.
position 속성을 사용하려면 속성 값에 해당하는 static, relative, absolute, fixed를 알아야 한다. 각각의 속성 값마다 HTML 요소를 배치하는 방식이 다르므로 차이점을 명확히 구분하자.
top, bottom, left, right 속성은 요소의 실질적인 위치를 조절한다.
static
HTML 요소의 default 값
정적 위치로 top, bottom, left, right 속성에 영향을 받지 않는다.
relative
absolute
fixed
<div>
, <p>
등이 있다.<div>
와 달리 가로 세로의 크기를 임의로 지정할 수 없다.특징
속성 값
값: none / 의미: 요소 띄움 없음 / 기본값: none
값: left / 의미: 왼쪽으로 띄움
값: right / 의미: 오른쪽으로 띄움
사용법
float: 방향;
요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다.
float 해제
- 형제요소에 clear: (left, right, both) 추가하여 해제
- 부모요소에 overflow: (hidden, auto) 추가하여 해제
- 부모요소에 clearfix 클래스 추가하여 해제(추천!)
형제 요소에서 해제
부모 요소에서 해제
부모 요소에서 해제2(추천!)