HTML의 인라인 요소는 왼쪽에서 오른쪽으로 추가되고, 블록 요소는 위에서 아래로 추가된다.

이렇게 규칙을 가진 요소들의 규칙을 깨고, 원하는 레이아웃을 만들기 위해 쓰는 CSS 값이 몇 개 있다.

자주 쓰는 position, flex, grid 순으로 알아보자.

포지셔닝

<aside> ✅ CSS Grid와 CSS Flex는 Container / Item 이라는 두 가지 개념으로 구분되어 있다.

Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다.

</aside>

FLEX 레이아웃

Grid