🎯 [Flexbox & 웹 레이아웃 복습 노트]

---

🧩 [ display: flex ]

하위 요소들의 배치 및 정렬을 제어하는 CSS 속성

---

🧭 [ justify-content (가로/수평 정렬) ]

속성값	설명
flex-start	요소들을 왼쪽 정렬 (기본값)
flex-end	요소들을 오른쪽 정렬
center	가로선의 중앙 정렬
space-between	양쪽 끝 여백 없이, 요소 간 균등 간격
space-around	요소 주위 동일 간격 (양쪽 여백 x2 = 사이 여백)
space-evenly	모든 여백이 동일하게 균등 정렬

---

🎯 [ align-items (세로/수직 정렬) ]

속성값	설명
stretch	컨테이너 높이에 맞춰 자동으로 늘어남 (기본값)
flex-start	상단 정렬
flex-end	하단 정렬
center	세로선 중앙 정렬
baseline	텍스트 기준선에 맞춰 정렬

---

⚙️ [ 기타 Flex 속성 ]

속성명	설명
flex-wrap: nowrap;	기본값, 하위 요소가 커져도 줄바꿈 없음
flex-wrap: wrap;	하위 요소가 부모 영역보다 크면 자동 줄바꿈
flex-direction: row;	가로 방향 정렬 (기본값)
flex-direction: column;	세로 방향 정렬

📊 예시

---

📦 [ box-sizing ]

속성값	설명
content-box	기본값. width/height가 콘텐츠 크기만 포함
border-box	width/height에 padding + border 포함 (추천!)

✅ 예시:
width: 1000px;일 때 → 콘텐츠(980px) + 패딩(18px) + 테두리(2px) = 총 1000px

---

🧠 [ text-align ]

속성값	설명
center	구역 내 텍스트, 이미지, input, audio 등을 중앙 정렬

⚠️ 단, div는 margin: 0 auto;로 별도 정렬 필요

.textbox {
    text-align: center;
}

---

🖼️ [ 이미지 가운데 정렬 방법 ]

방법	코드 예시
✅ 방법 1 (div로 감싸기)	html <div class="imgbox"><img src="example.jpg"></div> css .imgbox { text-align: center; }
✅ 방법 2 (div 없이)	css .content > img { display: block; margin: 0 auto; }

---

🧱 [ 웹사이트 구조 기초 ]

웹페이지는 보통 다음 세 구역으로 구성된다.

구역명	설명
header	상단 헤더 영역 (로고, 내비게이션 등)
main/container	본문 콘텐츠 영역
footer	하단 정보 영역 (회사 정보, 저작권 등)

---

🛠️ [ 기본 레이아웃 설계 단계 ]

1️⃣ 전체 구역을 나누고 <div>로 구조를 설계한다.
2️⃣ 구역별 HTML → CSS 순으로 세부 스타일 적용한다.
3️⃣ 공통 CSS를 먼저 작성하여 기본값 초기화한다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: black;
}
li {
    list-style: none;
}

---

🌐 [ 예시: CSS 실습 6 ]

---

💡 Tip:
항상 "왜 이 코드를 썼는가?"를 설명할 수 있어야 진짜 이해한 것이다.
div 구조를 먼저 생각하고, 부모-자식 관계를 명확히 파악하자.

---