🎯 [ Flexbox 복습 & GitHub 개념 정리 ]

---

🧩 [ Flexbox 기본 개념 ]

Flexbox(Flexible Box) : 하위 요소들의 배치, 정렬, 간격을 효율적으로 제어하는 CSS 레이아웃 방식

---

🧱 1. flex-wrap

속성값	설명
nowrap	기본값, 하위 요소의 크기가 넘칠 경우 자동으로 축소
wrap	하위 요소가 부모 영역을 초과하면 줄바꿈 처리

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

---

📏 2. flex-direction

속성값	설명
row	기본값, 가로 방향 정렬 (왼쪽 → 오른쪽)
column	세로 방향 정렬 (위 → 아래)

.container {
  display: flex;
  flex-direction: column;
}

---

⚖️ 3. justify-content (가로 정렬)

속성값	설명
flex-start	기본값, 좌측 정렬
flex-end	우측 정렬
center	가운데 정렬
space-between	양쪽 끝 여백 없이, 요소 간 간격 균등
space-around	양쪽 끝 여백이 사이 여백의 50%, 균등 정렬
space-evenly	모든 여백을 균등 정렬

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

---

🎯 4. align-items (세로 정렬)

속성값	설명
stretch	기본값, 고정 높이가 없을 경우 부모 높이만큼 늘어남
center	세로 중앙 정렬
flex-start	상단 정렬
flex-end	하단 정렬

.container {
  display: flex;
  align-items: center;
}

---

⚠️ [ Flexbox 사용 시 주의할 점 ]

항목	설명
🧩 클래스명 중복 방지	같은 이름의 클래스 사용을 피하기
🎯 구체적인 선택자 지정	CSS 작성 시 상위 클래스를 포함하여 명확하게 지정

.main .box {
  background-color: lightblue;
}

---

💻 [ GitHub 기본 개념 ]

항목	설명
🧠 정의	코드의 버전을 관리하는 VCS (Version Control System)
☁️ GitHub 역할	분산 버전 관리 툴을 제공하는 웹 기반 저장소
🤝 장점	협업, 코드 백업, 변경 이력 관리 가능
🧑‍💻 활용 예시	개인 포트폴리오, 팀 프로젝트, 오픈소스 관리

💡 GitHub는 단순 저장소가 아니라 ‘협업 중심의 코드 관리 플랫폼’이다.

---

🧪 [ 실습 예시 ]

🧠 CSS 실습 7

🎨 CSS 실습 8

---