18-2. 레이아웃의 모든 것

1. position 속성 - relative, absolute, fixed

1-1. Relative
Relative가 지정된 요소에 Top, right등 위치를 지정하면 기본 위치에서 이동.

1-2. Absolute
특정 부모(Relative, Fixed, Absolute)에 대해 그 안에서 이동

1-3. Fixed
페이지가 스크롤되더라도 늘 같은 곳에 위치

2. inline, inline-block, block 에 대해서

2-1. Inline
Inline 요소의 의미는 Inline 요소끼리 서로 한 줄에 바로 옆에 위치할 수 있다는 뜻이다.

• span
• a

2-2. Block
Block 요소의 의미는 바로 옆 좌우측에 다른 요소를 붙여넣을 수 없다는 뜻이다. 블록 엘리먼트는 새줄에서 시작해 좌우로 최대한 늘어난다.
Block은 Width를 설정하면 컨테이너의 좌우 가장자리로 늘어나지 않게 할 수 있다. 그 다음 좌우 마진을 auto로 설정해 엘리먼트를 가로 중앙에 오게 할 수 있다.

• div
• p
• header
• footer
• section
• li

2-3. Inline-block
Block요소의 성질을 가진 tag를 Inline 성질로 변경시킴

• display
• float

3. float에 대해서

이미지 주위를 텍스트로 감싸기 위해 만들어짐

• float: left;
• float: right;

Float를 제어하기 위해 Clear를 사용

• left : 요소의 왼쪽이 다른 요소에 닿지 않음
• right : 요소의 오른쪽이 다른 요소에 닿지 않음
• both : 요소의 양쪽이 다른 요소에 닿지 않음
• none : 요소의 어느쪽에도 닿을 수 있음