Flex와 Grid

Flex와 Grid는 CSS의 강력한 레이아웃 시스템입니다. 각각의 특징과 사용법을 자세히 살펴 보겠습니다.

1️⃣ FlexBox (Flexible Box)

Flexbox는 1차원(가로 또는 세로) 레이아웃을 구성하는데 최적화된 CSS 레이아웃 방식입니다.

🔹기본 개념

• Flexbox는 부모 요소를 Flex Container, 자식 요소를 Flex Items라고 부릅니다.
• display: flex;를 설정하면 컨테이너 내부의 아이템들이 유연하게 배치됩니다.

🔹주요 속성

📌 부모 요소 (Flex Container) 속성

📌 자식 요소 (Flex Items) 속성

2️⃣ Grid

Grid는 2차원(행과 열) 레이아웃을 만들기 위한 강력한 CSS 시스템입니다.

🔹기본 개념

• display: grid;를 사용하면 부모 요소가 Grid Container, 내부 요소들이 Grid Items가 됩니다.
• grid-template-columns와 grid-template-rows 속성으로 행과 열을 정의합니다.

📌 부모 요소 (Grid Container) 속성

📌 자식 요소 (Grid Items) 속성

3️⃣ 문제🎯

🔹 문제1: Flexbox 레아이웃 만들기

✅ 요구 사항

• 컨테이너 내부에 3개의 박스가 가로로 배치
• 첫 번째 박스는 크기가 2배
• 두 번째 박스는 크기가 1배
• 세 번째 박스는 크기가 3배
• 모든 박스의 높이는 100px
• 배경색은 red, blue, green

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: flex;
}
.item:nth-child(1) { flex: 2; background: red; }
.item:nth-child(2) { flex: 1; background: blue; }
.item:nth-child(3) { flex: 3; background: green; }
.item {
    height: 100px;
    text-align: center;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

🔹문제2: Grid 레이아웃 만들기

✅ 요구 사항

• 2행 2열의 그리드 생성
• 모든 셀 크기는 100px x 100px
• 첫 번째 셀은 두 번째 열까지 확장
• 배경색은 각각 lightcoral, lightblue, lightgreen

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
}
.item:nth-child(1) {
    grid-column: span 2;
    background: lightcoral;
}
.item:nth-child(2) { background: lightblue; }
.item:nth-child(3) { background: lightgreen; }

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}