position

• relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다.
  (static: 기본값/기본 위치)
  top, right, bottom, left를 지정해서 기본 위치와 다르게 조정 가능하다.
  하지만 기준이된 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다.

• fixed(고정) 엘리먼트 viewport에 상대적으로 위치가 지정되는데,
  페이지를 스크롤해도 항상 같은 위치에 한다는 뜻이다.
  top, right, bottom, left 프로퍼티로 위치 이동 가능하다.

• absolute는 특정 위치가 지정된 부모 엘리먼트를 기준으로 위치가 지정된다.

block, inline, inline-block

• 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있다.
  일반적으로 block과 inline이 있으며,
  블록 엘리먼먼트 그리고 인라인 엘리먼트라고 부른다

• block
  블록 엘리먼트는 새 줄에서 시작해서 좌우로 최대한 늘어난다.
  그렇기 때문에 한 줄에 하나의 블록밖에 사용할 수 없다.
  <div>가 표준 블록 엘리먼트.

• inline
  블록과는 다르게 한 줄에 여러개를 사용할 수 있으며,
  단락 안에서 단락의 흐름을 방해하지 않은 채로 사용 가능하다.
  이 표준 인라인 엘리먼트.

• inline-block
  인라인 엘리먼트와 비슷하게 줄바꿈이 없지만,
  블록 엘리먼트에서 사용되는 속성들 width, height, margin, padding을 지정할 수 있다.

  • 주의사항:
    • inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받을 수 있다.
    • 각 칼럼의 너비를 설정할 필요가 있다.
    • HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생긴다.

float

float은 주로 이미지 주변에 텍스트를 감쌀 때 사용되며, 페이지 전체의 레이아웃을 잡을 때도 사용된다.

float에 left, right, none 속성값을 줄 수 있으다.
하지만 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서
부모를 벗어나는 경우가 있다.

• 핼결방법:
  • float요소 옆에 채워지는 요소들에게 적용하는 프로퍼티.
    <div>마지막에 <아무태그 class="clear"> 적용. CSS에 clear: both; 해준다.
  • 바깥 div에 <div class="random">주고 CSS에 overflow: hidden;을 주는 것.
  • 바깥 div에도 img에 넣은 클래스를 부여하면 부모가 자식의 float높이를 인지하여 그만큼 높이를 차지하게 된다. 다만, <div>전체가 float이 되어버려 block요소의 성질이 없어지게 됨. 이럴 경우, width: 100%를 추가해야 한다.