레이아웃 설계 기본기 – Position, Flexbox, Grid 완전 정리 | Notion

📅 날짜:

2025.07.03 (목)

📘 오늘 공부한 주제:

CSS Position, z-index, Flexbox, Grid 레이아웃, 다양한 배치 방법

📝 핵심 개념 요약:

position 속성으로 요소 위치를 자유롭게 배치 (relative, absolute, fixed, sticky 등)
z-index로 요소의 앞뒤 순서 설정
flexbox는 요소를 가로/세로 정렬하고 공간을 유연하게 배치
grid는 2차원 레이아웃으로 세밀한 배치 가능
fr, minmax(), repeat() 등의 함수로 유연하고 반복적인 배치 구현

📌 z-index 정리

속성	의미	적용 조건	주의할 점
`z-index`	요소의 쌓이는 순서(앞뒤 순서)	`position` 속성이 있어야 함	숫자가 클수록 위로, 같은 값은 코드 순서 우선