앞서 공부했던 display의 기본 속성인
inline, block, inline-block만 활용하면
단순한 레이아웃 작업만 가능하다.

그렇다면 좀 더 복잡한 레이아웃을 잡기 위해선 뭘 알아야 할까?
바로 position이다.

추가적으로 float에 대해서도 알아보도록 하자.

Position

요소의 위치를 정의해주는 역할을 한다.
top, bottom, left, right 프로퍼티로 위치를 지정한다.(static 제외)

1. static

position의 기본값. top, bottom, right, left 프로퍼티 사용 불가.
기존의 position 값을 초기화시킬 때 사용하기도 한다.

2. relative

1. top, bottom, right, left 프로퍼티를 사용하지 않으면
   static과 같다. 하지만 static과 다르게 프로퍼티를 사용해
   위치를 조정할 수 있다.

2. 부모 요소를 배치의 기준으로 삼기 위해서는
   부모 요소에 relative를 정의하여야 한다.

3. absolute

1. relative, absolute, fixed 프로퍼티가 선언되어 있는
   부모 요소를 기준으로 해서 위치를 조정한다.

2. 만일 부모 요소가 static인 경우, document( = html) body를
   기준으로 하여 좌표 프로퍼티대로 위치하게 된다.
   (이러한 이유로 부모 요소에 relative를 정의해줘야 한다.)

4. fixed

1. 스크롤을 해도 항상 지정한 곳에 위치한다.

2. 부모 요소는 상관없다.
   브라우저의 화면 상에서 좌표프로퍼티(top, bottom, left, right)를
   사용하여 위치를 조정한다.

웹 페이지에서 항상 떠있어야 하는 곳에 fixed를 적용시키면 되겠다.

Float

1. 브라우저에 이미지와 텍스트가 있을 때
   이미지 주위를 텍스트로 감싸기 위해 만들어졌다고 한다.

2. 프로퍼티로는 none, left, right가 있으며
   float 속성을 사용하면 해당 요소의 빈 공간으로
   다른 요소가 들어오게 된다.

ex) 밑의 사진은 이미지에 float: left; 를 적용시킨 모습으로
사진이 왼쪽에 배치되어 글의 자리를 차지한 것을 볼 수 있다.