CSS (2)

1. CSS 박스 모델

1) 박스 모델(Box Model)

모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념

1. Content: 텍스트나 이미지가 들어가는 실제 내용 영역
2. Padding: 내용과 테두리 사이의 내부 여백
3. Border: 테두리, 요소의 경계를 나타냄
4. Margin: 요소 외부의 여백, 다른 요소와의 간격

2) Box Model CSS 실습

3) padding, border, margin 값의 변화를 통해 박스 크기와 간격이 어떻게 변하는지 확인

---

2. CSS 우선순위 (Specificity)

여러 CSS 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 적용되는지를 결정하는 규칙

• 우선순위 계산 방식:
  • 인라인 스타일: 가장 높은 우선순위
  • ID 선택자: 높은 우선순위
  • 클래스, 속성, 가상 클래스 선택자: 중간 우선순위
  • 태그 선택자: 낮은 우선순위
  • !important를 사용하면 어떤 규칙보다 우선 적용

1) CSS 우선순위 실습

→ p 태그가 적용됨을 볼 수 있음.

• 태그 선택자: p (우선순위: 1)
• 클래스 선택자: .highlight (우선순위: 10)
• ID 선택자: #unique (우선순위: 100)
• !important: 무조건 적용

---

3. CSS 단위 (Units)

CSS에서 요소의 크기, 간격, 위치를 설정할 때 다양한 단위를 사용할 수 있다.

• 주요 단위:
  1. 고정 단위: px (픽셀) - 화면의 고정된 크기를 의미
  2. 상대 단위:
     • em, rem - 글꼴 크기에 상대적인 단위
     • % - 부모 요소 크기에 상대적인 백분율
     • vw, vh - 뷰포트(화면) 크기에 비례하는 단위

1) CSS 단위 실습

---

4. 실습 과제

1) 적용할 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, %를 적절히 사용하여 박스의 크기와 글자 크기를 설정

2) 결과