1. position 속성이란

문서상에 요소를 배치하는 방법을 지정한다. position 속성은 아래의 목록에서 하나의 값을 선택해 지정할 수 있다.

static: 보통의 일반적인 배치가 적용된다. top, right, bottom, left 속성은 적용되지 않는다

relative: 상대적인 위치에 배치된다. 즉 그 엘리먼트의 본래의 위치를 기준으로 배치된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

absolute: 절대적인 위치에 배치된다. 즉 포함블럭의 네변을 기준으로 배치된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

fixed: 고정적인 위치에 배치된다. 브라우저의 스크롤에 의한 영역이동에 대해 고정된다. 또한 인쇄매체에 대해서도 각 페이지의 같은 위치에 인쇄된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

2. display 속성이란

display 속성은 요소를 블록과 인라인 요소중 어느 쪽으로 처리할지와 자식요소를 배치할 때 사용할 레이아웃을 설정한다.

block: 가로 영역을 모두 채우며, block요소 다음의 테그들은 줄바꿈이 되어 보인다. width, height를 지정할 수 있으며 지정 안 할 시 부모의 가로 크기, 콘텐츠의 세로 크기를 갖는다.

inline: block과 달리 줄 바꿈이 되지 않고,width와 height를 지정 할 수 없다. 또한 inline요소 뒤에 나오는 태그 또한 줄바꿈이 되지 않는다. line-height로 세로 크기만 조절 가능하다.

inline-block: block의 특징과 inline의 특징을 모두 가진 요소이다. 줄 바꿈이 되지 않지만, 'block'처럼 width, height를 지정할 수 있다. 지정하지 않을 시, inline와 같이 컨텐츠만큼 영역이 잡힌다.

3. float 속성이란

float속성을 이용해 엘리먼트를 원하는 위치로 이동시키고, 엘리먼트 뒤에 따라오는 앨리먼트들이 엘리먼트를 피해서 표시 되도록 한다. float의 속성값은 다음과 같다.

left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.

right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.

none: 요소를 부유시키지 않음.

left와 right를 통해 부유속성을 지정 시 display는 무시된다.
또한 이후 요소에 clear속성이 있으면 페이지 흐름이 달라진다.