CSS Flexbox와 Grid, 배치 우선순위

아래는 CSS Flexbox, Grid, 배치 우선순위에 대한 내용을 정리한 내용입니다.

1. Flexbox (Flexible Box Layout)

Flexbox는 CSS의 레이아웃 모듈 중 하나로, 복잡한 레이아웃을 간단하게 만들 수 있도록 도와줍니다.

1.1. 기본 개념

• Flex Container: Flexbox를 적용할 부모 요소.
• Flex Item: Flex Container 내부의 자식 요소.

1.2. 주요 속성

• flex-direction: 주 축의 방향을 설정합니다.
• justify-content: 주 축을 따라 아이템을 정렬합니다.
• align-items: 교차 축을 따라 아이템을 정렬합니다.
• flex-wrap: 아이템의 줄 바꿈을 설정합니다.

예시: Flexbox 사용

.flex-container {
    display: flex;
    justify-content: space-around;
}

2. Grid (CSS Grid Layout)

Grid는 2차원 레이아웃을 구성할 수 있는 강력한 CSS 모듈입니다. 행과 열로 구성된 그리드 시스템을 사용하여 복잡한 레이아웃을 쉽게 만들 수 있습니다.

2.1. 기본 개념

• Grid Container: Grid를 적용할 부모 요소.
• Grid Item: Grid Container 내부의 자식 요소.

2.2. 주요 속성

• grid-template-columns: 열의 크기를 설정합니다.
• grid-template-rows: 행의 크기를 설정합니다.
• grid-gap: 그리드 아이템 간의 간격을 설정합니다.

예시: Grid 사용

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

3. 배치 우선순위 (Stacking Context & z-index)

CSS에서 요소의 배치 우선순위는 z축을 기준으로 하며, 요소가 다른 요소 위에 겹쳐 보일 때 어떤 요소가 위에 위치할지를 결정합니다.

3.1. Stacking Context

Stacking context는 요소가 쌓이는 방식에 대한 특정 규칙을 적용하는 환경입니다. 새로운 stacking context는 아래와 같은 경우에 생성됩니다:

• 요소에 position 속성이 relative, absolute, fixed, 또는 sticky가 설정되고 z-index 값이 설정된 경우
• opacity 값이 0보다 작은 경우
• transform, filter, perspective 속성이 설정된 경우

3.2. z-index

z-index 속성은 요소의 쌓임 순서를 설정합니다. 값이 높을수록 위에 쌓입니다.

3.3. 배치 우선순위 규칙

1. 자연 순서: 문서의 흐름에 따라 위치.
2. z-index 값에 따라 정렬.
3. Stacking context 내에서의 정렬.