position / inline & block

postition

---

• relative
  원래 있던 위치를 기준으로 좌표를 지정한다.
  위치를 계산할때 static의 원래 위치부터 계산한다.

• absolute
  절대 좌표와 함께 위치를 지정해 줄 수 있다.
  단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

• fixed
  스크롤과 상관없이 항상 고정된 위치로 만든다.

---

inline, inline-block, block

• block
  기본적으로 가로 영역을 모두 채우며 block 요소 다음 태그는 다음 줄로 변경된다.
  ex) header, footer, p, li, table, div, h1 ...
  block 특징을 가진 태그들은 width, height, margin, padding 줄 수 있다.

• inline
  block과 달리 줄 바꿈이 되지 않는다.
  inline 특징을 가진 태그들끼리는 같은 라인에 다음 요소를 연이어 위치 가능
  ex) span, a, img, input, select, textarea , button ...

• inline-block
  block과 inline의 중간 형태
  줄 바꿈이 되지 않지만 크기 지정 가능
  inline-block은 가로로 요소를 배치하며 나열하는 inline 요소의 특성과 width, height, margin, padding 등의 속성 설정이 가능한 block 요소의 특성을 모두 갖음