CSS 이론 - 2

CSS 박스 모델(Box Model)

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

각 박스는 네가지 영역으로 나뉜다.

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

CSS 예시

---

CSS 우선순위(Specificity)

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

우선순위 계산 방식

   1. 인라인 스타일: 가장 높은 우선순위를 가짐

2. ID 선택자: 높은 우선순위

3. 클래스, 속성, 가상 클래스 선택자: 중간 우선순위

4. 태그 선택자: 낮은 우선순위

5. !important를 사용하면 어떤 규칙보다 우선 적용
   
   
   
   

예시 코드

우선순위 계산 예시

- 태그 선택자: p (우선순위: 1)

• 클래스 선택자: .highlight (우선순위: 10)

• ID 선택자: #unique (우선순위: 100)

• !important: 무조건 적용(하지만 자주 사용 자제)

  ---

  CSS 단위(Units)

  
  

- 요소의 크기, 간격, 위치를 설정할 때 다양한 단위를 사용

• 주요 단위:

  1. 고정 단위: px (픽셀) - 화면의 고정된 크기를 의미

  2. 상대 단위:

     • em, rem - 글꼴 크기에 상대적인 단위
     • % - 부모 요소 크기에 상대적인 백분율
     • vw, vh - 뷰포트(화면) 크기에 비례하는 단위
       
       
       
       

단위 비교 예시

.container {
width: 50%; / 부모 요소 너비의 50% /
padding: 1rem; / 기본 글꼴 크기의 1배 /
margin: 20px; / 20 픽셀 /
font-size: 2em; / 현재 글꼴 크기의 2배 /
}

주요 단위 설명

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

---

학습

CSS 박스모델을 적용하여 실습을 해보았다.