🎁Position

relative

자기자신을 기준으로 위치를 옮길 수 있다. 다른 요소에는 영향을 주지 않는다.

absolute

일반적인 문서 흐름에서 요소를 제거하고 레이아웃에 공간도 배정하지 않는다. 독립적으로 절대위치지정을 할 수 있다. position이 relative인 부모요소가 있는 상위요소까지 올라가 그곳을 기준으로 원하는 좌표로 배치할 수 있다.

fixed

스크롤을 하더라도 현재 위치에 고정된다. top, right, bottom, left 값 중 하나 이상을 주면 새로운 layer 위로 올라가 원래 있던 요소를 무시한다.

🎉Box model

inline

옆에 다른 요소들이 올 수 있다. 높이와 너비를 가질 수 없다. 화면에 표시되는 만큼만 영역을 차지할 수 있다.

inline-block

inline이지만 block처럼 취급하는 것이다. 반응형 디자인이 지원되지 않는다. 정해진 형식이 없고 block 사이에 멋대로 공간이 생겨 간격 조절이 불가능하다. 옛날에 사용되던 방식으로, 클라이언트의 모니터에 따라 달라지기도 하므로 지금은 거의 사용하지 않는다. 이 문제를 해결할 수 있는 것이 flex다.

block

박스 옆의 공간에 아무 것도 오지 않는다. 부모 요소의 사용가능한 공간의 100%를 차지한다. padding, margin, border를 갖고 있다.

참고자료

https://nomadcoders.co/kokoa-clone/lobby
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model
https://developer.mozilla.org/ko/docs/Web/CSS/position