CSS 2-이론

1. CSS 박스 모델 (Box Model)

1-1) 개념 설명

• *박스 모델(Box Model)**은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념입니다.
• 각 박스는 네 가지 영역으로 나뉩니다.
  1. Content: 텍스트나 이미지가 들어가는 실제 내용 영역
  2. Padding: 내용과 테두리 사이의 내부 여백
  3. Border: 테두리, 요소의 경계를 나타냄
  4. Margin: 요소 외부의 여백, 다른 요소와의 간격

1-2) 박스 모델 구조

1-3) CSS 예시

1-4) 실습

2. CSS 우선순위 (Specificity)

2-1) 개념 설명

• CSS 우선순위(Specificity)는 여러 CSS 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 적용되는지를 결정하는 규칙입니다.
• 우선순위 계산 방식:
  • 인라인 스타일: 가장 높은 우선순위를 가집니다.
  • ID 선택자: 높은 우선순위
  • 클래스, 속성, 가상 클래스 선택자: 중간 우선순위
  • 태그 선택자: 낮은 우선순위
  • !important를 사용하면 어떤 규칙보다 우선 적용됩니다.

2-2) 예시코드

2-3) 우선순위 계산 예시

• 태그 선택자: p (우선순위: 1)
• 클래스 선택자: .highlight (우선순위: 10)
• ID 선택자: #unique (우선순위: 100)
• !important: 무조건 적용(하지만 자주 사용하시면 안되요!)

2-4) 실습

3. CSS 단위 (Units)

3-1) 개념 설명

• CSS에서 요소의 크기, 간격, 위치를 설정할 때 다양한 단위를 사용할 수 있습니다.
• 주요 단위:
  1. 고정 단위: px (픽셀) - 화면의 고정된 크기를 의미
  2. 상대 단위:
     • em, rem - 글꼴 크기에 상대적인 단위
     • % - 부모 요소 크기에 상대적인 백분율
     • vw, vh - 뷰포트(화면) 크기에 비례하는 단위

3-2) 단위 비교 예시

3-3) 주요 단위 설명

• px: 고정된 크기로, 디바이스 화면 크기에 상관없이 일정하게 유지됨.
• em: 부모 요소의 글꼴 크기에 비례함. (1em = 부모 글꼴 크기)
• rem: 루트 요소(html)의 글꼴 크기에 비례함.
• %: 부모 요소의 크기에 비례.
• vw, vh: 각각 뷰포트의 너비, 높이에 대한 백분율.

3-4) 실습

최종 실습