[CSS] element가 배치되는 방법(레이아웃)

1. display(block, inline, inline-block)

• block 또는 inline-block의 경우 이 엘리먼트들은 블록 형식으로 위쪽에서 아래쪽으로 쌓인다
• inline인 경우는 왼쪽에서 오른쪽, 다 찼다면 아래쪽으로 빈 자리를 차지하며 흐르며 높이와 넓이를 지정해도 반영되지 않는다

2.position(static, absolute, relative, fixed)

• static: 기본 속성값
• absolute: top, left, right, bottom으로 설정하며, 기준점은 static이 아닌 상위 엘리먼트가 기준점이다
• relative: top, left, right, bottom으로 설정하며 원래 자신이 위치해야 할 곳을 기준으로 이동한다
• fixed: top, left, right, bottom으로 설정하며 viewport(전체 화면) 좌측 맨 위를 기준으로 동작한다

3. float(left, right)

원래 flow에서 벗어나서 떠다닐 수 있다

block 엘리먼트가 float된 엘리먼트를 인식하지 못하고 중첩돼서 배치된다

 

* block 엘리먼트의 크기는 기본적으로 부모의 크기만큼을 가짐(100%)