CSS 박스 모델 (Box Model)

개념 설명

• *박스 모델(Box Model)**은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념입니다.
• 각 박스는 네 가지 영역으로 나뉩니다:

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

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

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

  4. Margin: 요소 외부의 여백, 다른 요소와의 간격

     박스 모델 구조

CSS 예시

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

CSS 우선순위 (Specificity)

개념 설명

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

예시 코드

<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>

우선순위 계산 예시

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

CSS 단위 (Units)

개념 설명

• CSS에서 요소의 크기, 간격, 위치를 설정할 때 다양한 단위를 사용할 수 있습니다.
• 주요 단위:
  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 속성

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

실습 결과물