📝 CSS flex + flex-wrap + nth-child: 연못 격자 만들기

display: flex와 flex-wrap, nth-child를 함께 사용해서
바둑판 모양의 격자 레이아웃을 만들어봅니다!

---

1. 💡 display: flex란?

display: flex를 적용하면 해당 요소가 Flex 컨테이너가 되고,
그 안의 자식 요소들은 자동으로 Flex 아이템이 됩니다.

기본 동작

/* flex 적용 전 — 자식 div들이 세로로 쌓임 (block 기본값) */
.container { }

/* flex 적용 후 — 자식 div들이 가로로 나란히 배치 */
.container {
    display: flex;
}

❌ flex 없음 (block 기본값)     ✅ display: flex 적용
┌──────────┐                   ┌────┬────┬────┐
│  아이템1 │                   │ 1  │ 2 │ 3  │
├──────────┤                   └────┴────┴────┘
│  아이템2 │                    ↑ 가로로 나란히!
├──────────┤
│  아이템3 │
└──────────┘
↑ 세로로 쌓임

주요 flex 속성 한눈에 보기

속성	설명	주요 값
flex-direction	아이템 배치 방향	row(가로), column(세로)
flex-wrap	줄바꿈 여부	nowrap, wrap
justify-content	주축 정렬	flex-start, center, space-between
align-items	교차축 정렬	flex-start, center, stretch

---

2. 💡 flex-wrap이란?

flex 아이템들이 컨테이너를 넘칠 때 어떻게 처리할지 결정하는 속성입니다.

nowrap (기본값) — 줄바꿈 없음

.container {
    display: flex;
    flex-wrap: nowrap; /* 기본값 */
}

컨테이너 너비: 300px / 아이템 너비: 100px / 아이템 5개

┌────────────────────────────────────────────┐
│ [아1] [아2] [아3] [아4] [아5]            │  ← 아이템이 찌그러짐!
└────────────────────────────────────────────┘
  ↑ 300px 안에 5개를 억지로 밀어넣어 각 아이템이 60px로 줄어듦

wrap — 자동 줄바꿈

.container {
    display: flex;
    flex-wrap: wrap;
}

컨테이너 너비: 300px / 아이템 너비: 100px / 아이템 5개

┌──────────────────┐
│[아1] [아2] [아3]│  ← 1줄에 3개 (300px ÷ 100px)
├──────────────────┤
│ [아4] [아5]     │  ← 나머지 2개 다음 줄로
└──────────────────┘
  ↑ 각 아이템이 100px 크기를 유지하면서 줄바꿈!

nowrap vs wrap 비교

	nowrap	wrap
아이템 크기	찌그러질 수 있음	원래 크기 유지
줄 수	항상 1줄	필요한 만큼 여러 줄
사용 상황	아이템 수가 고정일 때	아이템 수가 유동적일 때

---

3. 📝 실습 코드 — 연못(pond) 격자

HTML

<div id="pond">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

#pond {
    width: 400px;
    height: 400px;
    background-color: green;
    display: flex;      /* 자식 요소들을 flex 아이템으로 */
    flex-wrap: wrap;    /* 넘치면 다음 줄로 자동 줄바꿈 */
}

#pond > .item {
    width: 100px;
    height: 100px;
    background-color: gold;  /* 기본: 금색 */
}

#pond > .item:nth-child(2n) {
    background-color: pink;  /* 짝수 번째: 핑크 */
}

---

4. 🔍 코드 해석

#pond — 컨테이너 설정

속성	값	역할
width / height	400px	컨테이너 크기
background-color	green	초록 배경 (연못 느낌 🐸)
display	flex	자식 요소를 가로로 배치
flex-wrap	wrap	가로 공간이 넘치면 다음 줄로 내림

#pond > .item — 아이템 설정

• 아이템 하나의 크기: 100px × 100px
• 컨테이너가 400px이므로 한 줄에 4개씩 배치
• 총 8개 → 2줄 × 4칸 = 바둑판 격자

nth-child(2n) — 짝수 아이템 색상 변경

#pond > .item:nth-child(2n) {
    background-color: pink; /* 2, 4, 6, 8번째 → 핑크 */
}

nth-child 공식	적용 대상
2n	2, 4, 6, 8번째 (짝수)
2n+1	1, 3, 5, 7번째 (홀수)
3n	3, 6, 9번째 (3의 배수)

---

5. 🎨 레이아웃 시각화

격자 공식
400px ÷ 100px = 4 → 한 줄에 4개
8개 ÷ 4개 = 2줄 → 2행 4열 격자 완성

---

6. 📖 핵심 요약

포인트	내용
display: flex	자식 요소들을 가로로 나란히 배치
flex-wrap: nowrap	줄바꿈 없음 — 아이템이 찌그러질 수 있음 (기본값)
flex-wrap: wrap	넘치면 자동으로 다음 줄로 줄바꿈
nth-child(2n)	짝수 번째 요소만 선택해 스타일 적용
격자 공식	컨테이너 너비 ÷ 아이템 너비 = 한 줄 개수

📌 flex-wrap: wrap이 있어야 아이템 크기를 유지하면서 줄바꿈이 됩니다.
📌 nth-child(2n) → 2, 4, 6, 8번째만 핑크로 체크무늬 효과 완성!