Layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.
- 요소가 화면 어디에 위치 할 것 인지 결정 하는 속성
top, right, bottom, left
속성이 요소를 배치할 최종 위치를 결정 한다.
position 속성은 아래의 values 값을 선택해 지정 가능하다.
position 속성의 기본 값
으로 position 속성을 지정하지 않았을 때와 같다.
기본적으로 이 값을 지정할 일은 없지만, 이미 설정된 position을 무력화하기 위해 사용될 수 있다.
기본 위치를 기준
으로 top, right, bottom, left
값에 따라 움직여지는 값
div {
position: relative;
}
부모 요소중 type (relative, fixed, absolute)이 지정된 태그에 기준
하여 변화하고, 부모 요소가 static
인 경우 문서의 크기를 기준으로 하여 위치하게 된다.
div {
position: absolute;
}
부모 요소와 관계없이 브라우저의 viewport(현재 화면에 보여지고 있는 영역) 를 기준
으로 top, bottom, left, right 를 사용하여 위치를 이동시킨다.
div {
position: fixed;
}
모든 element 에는 element 의 유형에 따라 기본 표시값이 있다. 기본값은 보통 block
이나 inline
이다.
float은 주로 이미지 주변에 텍스트를 감싸기 위한 속성
속성
- left
: 요소가 자신의 블록 좌측에 float 할 수 있게 만드는 속성
- right
: 요소가 자신의 블록 우측에 float 할 수 있게 만드는 속성
- none
: default 값
요즘에는 flex 속성을 기반으로 레이아웃을 잡는 경우가 훨씬 많기 때문에 float은 자주 사용되지 않는다.