CSS 레이아웃

■ 레이아웃

요소들의 배치, 배열

 

■ 포지션(Position)

normal flow를 벗어나 위치를 직접 정하는 형식

static : 기본값

relative : 원래 있어야 할 위치에서 이동

absolute : 기존의 배치에 벗어난다.

fixed : 화면을 기준으로 고정된 위치에 존재 / 기존 배치에서 벗어난다.
sticky : 부모요소에 종속되어 있다.

z-index : 앞에 보이는 순서를 정한다.

 

■ 플렉스박스(Flexbox)

박스를 만들고 방향을 정해서 1차원으로 요소를 배치하는 방식

 

배치방향

정렬 : justify-content(메인 축) / align-items(교차 축)

flex : wrap / grow / shrink / basis
gap

 

■ 그리드(Grid)

칸을 나눈 다음 배치하는 방식

 

grid-templete refeat (x, 1fr)

 

gap

grid : row / column

 

grid-area: name