🎯 [Day03~Day04 CSS 복습 노트]

---

🧠 [ 강사님 한마디 ]

“CSS 속성명을 외우려 하지 말고, 쓰다 보면 자연스럽게 외워진다.”
선택자(selector)와 식별자(id/class)는 매우 중요하다 — 특히 JavaScript 단계에서 필수!

---

✏️ [ CSS 기본 구조 ]

선택자 { 속성명: 속성값; }

용어	설명
속성명(property)	바꾸고자 하는 항목 (예: color, width, display 등)
속성값(value)	속성명에 적용할 값 (예: red, 100px, flex 등)

---

🧩 [ 구역(div) 설정의 중요성 ]

• HTML 페이지를 설계할 때, div 구역을 잘 나누는 것이 핵심!
• 웹사이트를 볼 때, “이 페이지는 div가 몇 개 필요할까?” 생각하며 구조를 익혀보자.

💡 각 마크업은 생성되면 자동으로 구역(block)을 차지하고, 기본 CSS 속성을 가짐.

마크업	기본 display 속성	설명
div	block	한 줄 전체 차지
span	inline	한 줄 안에 포함

---

🎨 [ display 속성 정리 ]

속성	설명	예시 마크업
inline	한 줄 내에 배치 (상/하 여백 수정 불가)	span, a
block	한 줄 전체를 차지	div, h1~h6, p, ul, ol
inline-block	한 줄 배치 + 크기 조절 가능	input, button, img
none	화면에 표시 안 함	-
flex	하위 요소 배치 제어	-

---

📦 [ box-sizing 속성 ]

속성값	기준	설명
content-box	콘텐츠 기준	padding이나 border가 전체 크기에 포함되지 않음
border-box	콘텐츠 + 패딩 + 테두리 기준	전체 크기가 일정하게 유지됨 (추천)

🧮 예시

.box {
  width: 500px;
  padding: 10px;
  box-sizing: border-box;
}

➡️ 최종 크기 = 500px

---

💡 [ CSS 참고 팁 ]

항목	설명
margin: 10px auto;	가운데 정렬은 width가 정의되어 있어야 작동
border: none;	테두리 제거
text-decoration: none;	링크(a)의 밑줄 제거

---

🧱 [ CSS 실습 결과물 ]

🧪 실습 2

🧪 실습 3

🧪 실습 4

🧪 실습 5

---