CSS(2)

1. CSS 박스 모델 (Box Model)

CSS 박스 모델(Box Model)은 모든 HTML 요소가 사각형 박스로 구성된다는 개념입니다.
각 요소는 네 가지 영역으로 구성되어 있으며, 이 구조는 레이아웃과 스타일을 조절할 때 매우 중요합니다.

📦 박스 모델의 구성

1. Content
   텍스트나 이미지가 들어가는 실제 내용 영역

   • Width: 이 영역의 너비

2. Padding
   내용과 테두리 사이의 내부 여백

3. Border
   요소의 테두리로, 경계를 나타냄

4. Margin
   요소의 바깥 여백으로, 다른 요소와의 간격을 조절

실습

HTML 코드를 VScode에 작성하고, 스타일을 수정하여 padding, border, margin 값이 박스에 어떻게 적용되는지 확인해 보세요.

---

2. CSS 우선순위 (Specificity)

🧠 개념 설명

CSS 우선순위(Specificity)는 여러 스타일 규칙이 하나의 요소에 동시에 적용될 때,
어떤 규칙이 실제로 적용될지를 결정하는 기준입니다.

🔢 우선순위 계산 방식

• 인라인 스타일 (style="..."): 가장 높은 우선순위
• ID 선택자 (#id): 높음
• 클래스, 속성, 가상 클래스 선택자 (.class, [type="text"], :hover 등): 중간
• 태그 선택자 (div, p 등): 낮음
• !important: 어떤 우선순위보다도 강제 적용 (가급적 사용 지양)

✏️ 우선순위 예시

선택자	예시	우선순위 점수
태그 선택자	p	1
클래스 선택자	.highlight	10
ID 선택자	#unique	100
인라인 스타일	style="..."	1000
!important	color: red !important	무조건 적용

실습

코드에서 color 속성이 어떻게 적용되는지 예상해보고, !important를 추가 또는 제거하며 스타일의 변화를 확인하세요.

---

3. CSS 단위 (Units)

📐 단위의 개념

CSS에서는 요소의 크기, 간격, 위치 등을 지정할 때 다양한 단위를 사용할 수 있어요.
크게 고정 단위와 상대 단위로 나뉩니다.

📏 주요 단위 종류

✅ 고정 단위

• px: 픽셀 — 화면의 고정된 크기를 의미. 장치 해상도에 관계없이 일정함.

✅ 상대 단위

• em: 부모 요소의 글꼴 크기에 상대적 (1em = 부모 폰트 크기)
• rem: 최상위 요소(html)의 글꼴 크기에 상대적 (1rem = html 폰트 크기)
• %: 부모 요소 크기에 대한 백분율
• vw: 뷰포트 너비의 1% (100vw = 화면 너비 전체)
• vh: 뷰포트 높이의 1% (100vh = 화면 높이 전체)

실습

• px, em, rem, % 등의 단위를 사용해 같은 요소의 크기와 여백을 다양하게 변경해 보세요. 각 단위가 어떻게 동작하는지 직접 확인할 수 있습니다

---

4. 전체 실습

적용할 CSS 속성

1. 박스 안에 텍스트가 있고, 패딩(padding)을 이용해 텍스트와 테두리 사이의 여백을 10픽셀로 설정합니다.
2. 박스 테두리(border)는 3픽셀 두께의 실선(solid)으로 설정하고, 색상은 파란색(blue)으로 합니다.
3. 박스 바깥쪽 여백(margin)은 20픽셀로 설정합니다.
4. h1 제목은 기본적으로 녹색(green)으로 설정하되, 클래스 .highlight가 적용된 경우 빨간색(red)이 되도록 스타일을 지정합니다.
5. id가 special인 요소는 우선순위에서 무조건 노란색(yellow)으로 설정되도록 합니다.
6. 단위로는 px, em, rem, %를 적절히 사용하여 박스의 크기와 글자 크기를 설정하세요.