# CHAP 11. 🎯 CSS 기초 + 심화 완전 정복 📘

📌 1️⃣ CSS란? + 실무 감각까지 확장

구분	내용	비유 🌟
CSS란?	Cascading Style Sheets (계단식 스타일 시트). HTML 구조에 디자인과 레이아웃 적용	HTML: 🏠 건물 뼈대, CSS: 👕 인테리어 & 옷
역할	색상, 폰트, 크기, 위치, 정렬, 반응형, 애니메이션 등 시각적 표현 전담	📖 흑백 책을 컬러로 꾸미기

✅ 심화 포인트:

방법	위치	특징	비유 🌟	실무 Best Practice 🚩
Inline	HTML 태그 내 `style` 속성	특정 요소 1개에만 적용, 우선순위 최상, 유지보수 지옥	✍️ 옷에 낙서하기	긴급 수정 외에 사용 지양
Internal	`<style>` 태그, `<head>` 안	1페이지 전용, 유지보수 불편	📄 한 장에만 색칠	작은 프로젝트나 프로토타입 시
External	별도 `.css` 파일	실무 표준! 여러 페이지, 유지보수 & 속도↑	📁 옷장에 스타일 모아놓기	파일 분리 + Minify + CDN 적용 권장

✅ 추가 심화:

/* 네비게이션 메뉴에서 활성화된 항목에만 효과 */
nav > ul.menu > li.active a:hover {
  color: red;
  font-weight: bold;
}

기술 면접 포인트:

* {
  box-sizing: border-box;
}

Why?

body {
  background: url('bg.jpg') no-repeat center/cover fixed;
}

✅ cover vs contain:

✅ fixed → 패럴랙스 스크롤 효과에 자주 사용

💡 실무에서 !important 남발 지양 → 구조적 우선순위 관리 필수

포인트	설명
External CSS 관리 → 파일 분리 & Minify 적용	유지보수, 속도 향상
box-sizing: border-box 전체 적용	크기 계산 쉽게, 레이아웃 안정
선택자 → id 최소, class 중심, 태그 선택 최소화	우선순위 관리 편리
background shorthand 적극 활용	성능, 가독성 ↑
가상 클래스 (`hover`, `focus`, `nth-child` 등) 적극 사용 → UX 개선	심화 스타일링 필수

질문	심화 답변
box-sizing: border-box의 장점?	레이아웃 계산 간편, 크기 유지, 유지보수 편리
class와 id 선택자 차이?	class → 재사용 가능, id → 유일 요소
가상 클래스와 일반 클래스 차이?	가상 클래스 → 상태/위치(hover, nth-child 등) 스타일링
background cover와 contain 차이는?	cover → 채움, 잘림O / contain → 잘림X, 여백O
선택자 우선순위 정렬은 어떻게?	inline > id > class > 태그 > *