CSS, 레이아웃의 모든 것

1. position 속성 - relative, absolute, fixed

relative

1. parent element 기준으로 상대적으로 움직인다.

2. 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
   -> 앞으로 홈페이지 제작할 때 중앙정렬 하고 싶은 것에 사용할 예정이다.

absolute

1. 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정

2. static으로 지정되지 않은 엘리먼트를 가리킨다.

3. position값이 relative인 부모를 기준으로(없다면 웹페이지의 가장 가장자리 tag기준) 움직인다.

fixed

1. 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정
   -> 홈페이지 제작 시, 결제창이나 강조하고 싶은 화면을 고정시킬 때 활용해야겠다.

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

block

1. 혼자 한줄을 다 차지한다.

inline

1. 한줄에 다른 엘리멘트들과 나란히 배치된다.

inline-block

1. 너비와 높이를 지정하여 인라인 속성을 block처럼 사용 가능하다.
   ->인라인 요소와 블락요소의 특성을 사용자 편의에 맞춰 사용 가능

3. float에 대해서

1. 이미지 주위를 텍스트로 감싸기 -> 예를들면, 왼쪽에는 텍스트가 오른쪽에는 그림이 나오게 하는 프로퍼티(신문기사, 잡지처럼)

2. clear 프로퍼티는 float의 동작 방식을 제어 -> 쉽게 말해, 삐뚤삐뚤한 레이아웃 컨트롤하기