본문으로 건너뛰기
Advertisement

레이아웃 (Flexbox & Grid)

현대적인 웹 레이아웃을 구성하는 가장 강력한 두 가지 도구는 Flexbox와 Grid입니다.

1. Flexbox (Flexible Box)​

1차원(행 또는 열) 레이아웃을 위한 도구입니다.

부모 요소 (Flex Container) 속성​

  • display: flex;: Flexbox 활성화
  • flex-direction: 정렬 방향 (row, column)
  • justify-content: 메인축 정렬 (center, space-between, space-around)
  • align-items: 교차축 정렬 (center, flex-start, flex-end)
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

2. Grid Layout​

2차원(행과 열 모두) 레이아웃을 위한 도구입니다. 고정된 그리드 시스템을 만들 때 매우 유용합니다.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3열로 나누기 */
    grid-template-rows: auto 300px;
    gap: 10px; /* 아이템 사이의 간격 */
}

3. Position 속성​

요소를 특정한 위치에 고정하거나 겹치게 할 때 사용합니다.

  • static: 기본값
  • relative: 기본 위치를 기준으로 상대적 이동
  • absolute: 부모 요소(상위 요소 중 position이 static이 아닌 요소)를 기준으로 절절 위치
  • fixed: 브라우저 창(Viewport)을 기준으로 고정
  • sticky: 스크롤 도중 특정 위치에 도달하면 고정

4. 반응형 웹 디자인 (Media Query)​

화면 크기에 따라 스타일을 변경합니다.

@media (max-width: 768px) {
    /* 모바일 화면에서 적용될 스타일 */
    .container {
        flex-direction: column;
    }
}

다음 장에서는 최신 CSS 트렌드와 Tailwind CSS에 대해 알아봅니다.

Advertisement
Advertisement