CSS position

position은 태그들의 위치를 결정한다. 포지션의 종류에는 5가지가 있다.

1. static
   일단 모든 태그들은 처음에 position:static 상태이다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

2. relative
   태그의 위치를 변경하고 싶을때 position:relative를 사용한다. 위, 오른쪽, 아래, 왼쪽 속성을 사용하여 위치 조절이 가능하다.

3. absolute
   relative가 static 상태를 기준으로 주어진 픽셀만큼 움직인다면, absolute는 static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 태그가 없다면, 가장 위인 body 태그가 기준이 된다.

4. fixed
   fixed는 항상 특정 위치에 고정되어 있다. 스크롤을 왔다갔다해도 항상 고정!

5. sticky
   해당 요소를 감싸고 있는 블록이 지정된 임계값을 넘어서기 전까지는 relative로 작동하다가 값을 넘기면 fixed로 작동.

display: inline, block, inline-block

1. inline
   블럭요소인 태그들도 인라인요소로 나타내준다. 다른 요소들과 함께 같은 라인에 표시된다.
   크기를 임의로 지정할 수 없어, 컨텐츠에 의해 크기가 결정된다.
   대표적인 요소는 span태그가 있다.

2. block
   각 줄마다 요소들이 배치된다. inline요소도 block요소로 만들어준다. 가로 크기가 부모요소의 100%를 차지하게된다.
   가로 세로 크기를 지정할 수 있다.
   대표적인 요소는 div,p태그가 있다.

3. inline-block
   block속성과 inline속성이 섞여있는..??? block 처럼 영역을 설정하고, inline 처럼 다른 요소와 같은 라인에 배치할 수 있다. (요소 사이에 여백이 생긴다!!!)

float

레이아웃 속성 중 하나이다. 이미지와 텍스트가 섞여 있을때 이미지를 중심으로 자연스럽게 텍스트가 흘러갈 수 있게 해준다.
또한, 레이아웃을 구성할때도 많이 사용된다. (flexbox가 나오기 전까지..??)
아직 IE를 사용하는 우리나라에서는 float를 많이 사용한다고 한다.

부모 요소를 기준으로 왼쪽이나 오른쪽으로 레이아웃을 만든다 (부모가 없으면 body태그가 부모 요소)

float 속성이 적용된 객체의 다음에 오는 객체는 안붙게 하려면 어떻게 해야하나?

clear속성을 사용하면 된다.
clear: right, left,both 는 해당 방향에 float 정렬을 취소시켜준다.