position:

position이란? 스크롤이 내려가도 항상 떠있는 기능이 가능한 것이고 또 섹션을 나눠 서로 겹치는 것을 막아주는 것입니다.

• static: 위치속성(top, left 등)이 요소에 아무런 영향을 안준다.(기본값)
• relative: 이동하기전 위치 기준으로 움직인다.
• fixed: 브라우저 기준으로 움직인다. 즉 스크롤을 내려도 계속 고정된 자리에 있다.
• absolute: 가장 가까이 위치한 부모 요소를 기준으로 움직인다.

---

inline, block, inline-block

display의 속성들이며 display는 속성은 요소를 어떻게 보여줄지를 결정

• inline: 각 태그마다 브라우저에서 각자의 영역을 차지한다.(가로, 세로 Boxing의 개념이 없다) 각자 같은 라인에 있다.
• block: 각 태그마다 가로 영역을 브라우저 만큼 차지하며(크기 조정가능), 각자 다른 라인에 있다.
• inline-block: 줄 바꿈 없이 같은 라인에 있고(inline속성), 크기 조정이 가능하다.(block속성)

---

float

float은 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법이지만, 레이아웃을 잡을 때도 사용하는 기능이기 때문에 중요하다.

• none: float 속성을 디폴트에서 해제
• left: 이미지를 왼쪽으로 옮기기
• right: 이미지를 오른쪽으로 옮기기

flex의 등장 이후로 더 간편하게 레이웃을 짤 수 있기 때문에 float의 사용도는 줄고 있지만, 이미 float을 사용한 사이트들이 많이 있으므로 익혀두어야 한다.