CSS - 2

목차

1. CSS 박스 모델 (Box Model)
2. CSS 우선순위 (Specificity)
3. CSS 단위 (Units)

---

1. CSS 박스 모델 (Box Model)

1.1 개념 설명

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

1.2 박스 모델 구조

┌───────────────────────────────┐
│            Margin             │
│  ┌───────────────────────────┐│
│  │         Border            ││
│  │   ┌─────────────────────┐ ││
│  │   │     Padding         │ ││
│  │   │   ┌───────────────┐ │ ││
│  │   │   │    Content    │ │ ││
│  │   │   └───────────────┘ │ ││
│  │   └─────────────────────┘ ││
│  └───────────────────────────┘│
└───────────────────────────────┘

1.3 CSS 예시

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}

1.4 실습

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

<div class="box">이것은 박스 모델입니다!</div>

• 실습 목표: padding, border, margin 값의 변화를 통해 박스 크기와 간격이 어떻게 변하는지 직접 확인합니다.

---

2. CSS 우선순위 (Specificity)

2.1 개념 설명

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

2.2 예시 코드

<style>
  p {
    color: blue; /* 태그 선택자 */
  }

  .highlight {
    color: red; /* 클래스 선택자 */
  }

  #unique {
    color: green; /* ID 선택자 */
  }

  p.inline-style {
    color: yellow !important; /* !important */
  }
</style>

<p id="unique" class="inline-style highlight">CSS 우선순위 예시입니다!</p>

2.3 우선순위 계산 예시

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

2.4 실습

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

---

3. CSS 단위 (Units)

3.1 개념 설명

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

3.2 단위 비교 예시

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

3.3 주요 단위 설명

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

3.4 실습

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

---

마무리

• 박스 모델, CSS 우선순위, 그리고 다양한 CSS 단위는 웹 개발의 기본입니다.
• 실습을 통해 스타일을 조정하면서 개념을 이해하고, 실제 프로젝트에서 어떤 규칙을 사용할지 판단하는 능력을 길러보세요.

그 글자 크기를 설정하실 때 px, em, rem, % 의 쓰임!

px: 가장 직관적이고 다루기 쉽지만, 사용자가 글꼴 크기를 확대/축소할 때 유연하게 대응하지 못합니다.
나 이 크기로 해줘! 내가 지금 보이는 크기, 그걸 조정하는 단위라 생각하시면 이해하시기 편합니다.

em: 상대적인 크기 단위로, 부모 요소의 크기를 기준으로 하기 때문에 중첩될수록 최종 크기 계산이 복잡해질 수 있습니다.
parent, child, grandchild 세가지가 있습니다. 만약 parent 글자 크기를 16px으로 설정하고, chile의 크기는 parent의 1.5배, grand child는 child의 1.5배 설정했을 때, child는 1.6(parent크기)1.5 = 24px, grandchild는 24(child크기)1.5 = 36px가 됩니다.
em 단위는 직전 부모 요소의 크기를 기준으로 하기 때문에, 중첩될수록 원래 의도했던 크기를 파악하기 어려워질 수 있습니다.

rem: em의 단점을 보완하기 위해 나온 단위로, 항상 루트 요소의 font-size를 기준으로 하므로 일관된 크기 조절이 가능해 반응형 웹 디자인에 가장 많이 사용됩니다.

font-size를 16px로 정의했을 때,

.parent {
font-size: 1rem; / 루트 요소의 1배 = 16px /
}
.child {
font-size: 1.5rem; / 루트 요소의 1.5배 = 24px /
}
.grandchild {
font-size: 2rem; / 루트 요소의 2배 = 32px /
}
이렇게 사용하실 수 있습니다. 좀 더 직관적으로 일관성있게 글자 크기를 조정하기 쉽습니다.

%: 주로 너비나 높이 같은 레이아웃을 부모에 맞춰 유동적으로 만들 때 사용합니다.

.parent-box {
width: 600px; / 고정된 너비 /
height: 300px;
background-color: lightgray;
padding: 10px;
}

.child-box {
width: 50%; / 부모 너비의 50% /
height: 100px;
background-color: steelblue;
}
이렇게 사용합니다.