CSS 레이아웃

개념 설명

position, Flexbox, Grid를 활용한 레이아웃 구성 및 반응형 디자인 구현 방법.

핵심 포인트

• Position: static(기본) → relative(자신 기준) → absolute(조상 기준) → fixed(뷰포트) → sticky(스크롤)
• Flexbox: 1차원 레이아웃, justify-content(주축) + align-items(교차축)
• Grid: 2차원 레이아웃, 행(그리드 템플릿 로우) + 열(그리드 템플릿 칼럼)
• Flexbox는 컴포넌트 내부, Grid는 전체 레이아웃에 적합
• 모던 레이아웃: CSS Subgrid, Container Queries 등 새로운 기능 등장

예시 코드

/* Position 조합 */
.modal-overlay {
  position: fixed;     /* 뷰포트 기준 고정 */
  top: 0; left: 0;
  width: 100%; height: 100%;
  
  .modal-content {
    position: absolute;  /* 부모 기준 절대 위치 */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
  }
}