레이아웃을 설정할 수 있는 CSS는 여러가지가 있다. HTML은 순서대로 페이지에 그려지는 반면 CSS는 위치에 상관없이 설정을 할 수 있다. 레이아웃은 구성 요소를 배치하는 것이다. 배치하며 분할, 정렬 등 원하는 기준에 맞게 배치하여 페이지를 만드는 것이다. 레이아웃 설정을 위한 property는 여러가지가 있으나 대표적인 2가지를 이야기 해보고자 한다.
postion 프로퍼티에는 relative, absolute, fixed가 자주 사용된다.
relative: 기본 위치에서 상대적인 위치를 가질 수 있도록 한다. top, right, bottom, left 위치를 원하는 대로 지정할 수 있다.
absolute: 부모 요소 or 가장 가까이 있는 조상 요소를 기준으로 지정 좌표만큼 이동한다. 부모 요소를 기준으로 설정할 경우 relative로 지정되어 있어야한다. static의 경우 document 바디를 기준으로 좌표를 이동하기 때문이다.
fixed: 대상을 고정 시킬 때 사용한다. 우리가 보통 웹사이트를 사용할 때 상단 메뉴바가 고정되어 있는데 이걸 생각하면 된다.
Display 프로퍼티에서는 inline, inline-block, block이 어떻게 보여지고 차이점이 뭔지를 알면 좋다.
https://poiemaweb.com/css3-position#13-absolute-%EC%A0%88%EB%8C%80%EC%9C%84%EC%B9%98
https://www.daleseo.com/css-display-inline-block/