📘 CSS 강의 정리 노트 (5월 20일)

✅ CSS 단위 (Units)

📏 절대 단위

• px: 고정된 픽셀 단위. 정확한 크기 지정에 사용됨.

📐 상대 단위

• em: 부모 요소 기준
• rem: 루트 요소(html) 기준 (일관성과 유지보수에 유리)
• %: 부모 요소에 비례한 크기
• vw / vh: 뷰포트 기준 (반응형에 유리)
• cm, mm, in: 인쇄용 단위

section {
  width: 80vw;
  height: 50vh;
}

✅ rem이 선호되는 이유

1. 반응형 웹에 유리함
2. 접근성 향상 (브라우저 설정 반영)
3. 유지보수 용이 (html 폰트 크기 하나로 전체 조정)
4. 미래지향적 (다양한 해상도 대응)

🧾 요약: CSS에서 rem 단위는 유연성과 유지보수성 면에서 매우 유리하며, 반응형 웹 구현에 핵심입니다.

---

✅ 텍스트 & 폰트 스타일링

🎨 텍스트 속성

• color: 텍스트 색상
• font-size: 크기 (px, em, rem, %)
• text-align: 정렬 (left, center, justify)

p {
  color: #333;
  font-size: 16px;
  text-align: justify;
}

🅰️ 폰트 속성

• font-family: 글꼴 설정
• font-weight: 굵기 (normal, bold, 100~900)
• font-style: 이탤릭 등

body {
  font-family: 'Arial', sans-serif;
}
h2 {
  font-weight: bold;
}

🔤 텍스트 변형/꾸미기

• text-decoration: 밑줄, 취소선 등
• text-transform: 대/소문자 자동 변환

a { text-decoration: underline; }
.capitalize { text-transform: capitalize; }

🧾 요약: 텍스트 스타일링은 가독성과 전달력을 높이기 위한 필수 CSS 영역입니다.

---

✅ 박스 모델 (Box Model)

📦 구성 요소

1. Content: 실제 내용
2. Padding: 내용과 테두리 사이 내부 여백
3. Border: 테두리
4. Margin: 외부 여백

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 20px;
}

📐 box-sizing

• content-box: 기본값. 패딩/보더는 width에 포함되지 않음
• border-box: 패딩/보더 포함된 전체 크기를 기준으로 함

box-sizing: border-box;

🧾 요약: border-box는 레이아웃 설계 시 사이즈 계산이 쉬워 유지보수에 유리합니다.

---

✅ 디스플레이 속성 (display)

📂 주요 값 비교

값	설명	줄바꿈 여부	너비 지정 가능
block	전체 너비 차지, 줄바꿈 발생	O	O
inline	내용만큼만 차지, 줄바꿈 없음	X	X
inline-block	한 줄에 표시 + 너비/높이 지정 가능	X	O
none	화면과 레이아웃 모두에서 제거	X	X

.hidden { display: none; }
span { display: inline-block; width: 100px; }

🧾 요약: display 속성은 HTML 요소의 레이아웃과 시각적 표현을 제어하는 핵심 속성입니다.

---

✅ 총정리

• rem과 퍼센트 단위는 반응형 웹에 최적
• 텍스트와 폰트 스타일링으로 콘텐츠 가독성 향상
• 박스 모델과 display 속성 이해는 레이아웃 구현의 기초