position (static, relative, absolute, fixed) 의 속성
position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용(CSS속성)
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.
position 속성 사용법
static (기본값) :위치를 지정하지 않을 때 사용
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. &bshp
(단, 가장 가까운 상위 요소를 기준으로 위치가 결정)
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다
inline vs block vs inline-block 속성 비교
display: inline
대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.
- width/height 적용불가
- margin/padding-top/bottom 적용불가
- ine-height를 원하는대로 사용할 수 없다.
display: block
block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다.
display: inline-block
inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
float
기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것
left : 요소를 왼쪽 방향으로 떠 있도록 설정
right : 요소를 오른 방향으로 떠 있도록 설정
none : 기본값(default), 요소에 어떤 방향도 부여하지 않음
