CSS 2-이론

Elvia SY Choi·2025년 4월 6일

학습-비기너 트랙

9. CSS 2-이론

📂 1. 오늘의 학습 키워드

이번에는 오즈코딩스쿨의 아홉 번째 시간으로 지난번에 이어 CSS 이론학습 두 번째 시간에 들어갔습니다. 지난주 금요일인 4일에는 베이스캠프 미션 마감일로 앞으로 더 이상 미션 진행을 해도 따로 미션 인정은 안 되지만, 며칠 바쁘다는 핑계로 공부를 못 했던 것도 마음에 걸리고 곧 있을 본 캠프 일정에 앞서 조금이라도 공부를 해두고자 오늘 학습을 진행하고 블로그에 글을 남겨봅니다.

📂 2. 오늘 학습 한 내용

✏️ css-이론(2)

1-1) CSS 박스 모델 (Box Model)

박스 모델(Box Model)은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념입니다.

각 박스는 다음의 네 가지 영역으로 이루어져 있습니다:
Content
텍스트나 이미지 등 실제 콘텐츠가 들어가는 영역입니다.
Padding
콘텐츠와 테두리(Border) 사이의 내부 여백입니다.
Border
요소의 테두리로, 박스의 경계를 나타냅니다.
Margin
요소 외부의 바깥 여백으로, 다른 요소와의 간격을 조절합니다.

1-2) 박스 모델 구조

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

2-1) CSS 우선순위 (Specificity)
인라인 스타일 :
<div style="color: red;"> 
→ 처럼 태그 내부에 직접 작성된 스타일은 가장 높은 우선순위를 가집니다.
▶ ID 선택자 (#id) :
→ 매우 높은 우선순위를 가짐 (ex: #title {}) (우선순위: 100)
▶ 클래스 선택자, 속성 선택자, 가상 클래스 (.class, [type], :hover 등) :
→ 중간 우선순위 (ex: .box {}) (우선순위: 10)
▶ 태그(요소) 선택자 (div, p 등) :
→ 가장 낮은 우선순위 (우선순위: 1)
▶ !important 사용 :
→ 모든 우선순위를 무시하고 강제로 스타일을 적용합니다.
(단, 너무 자주 사용하면 유지보수에 어려움)

3-1) CSS 단위 (Units)

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

주요 단위:

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

상대 단위:

em, rem - 글꼴 크기에 상대적인 단위

% - 부모 요소 크기에 상대적인 백분율

vw, vh - 뷰포트(화면) 크기에 비례하는 단위

3-2) 단위 비교 예시

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

3-3)주요 단위 설명

px: 고정된 크기이며, 화면에 가장 일반적으로 사용되는 단위이다. 디바이스 화면 크기에 상관없이 일정하게 유지된다.

em: 부모 요소의 글꼴 크기에 비례한다. 예로, 부모 요소가 글꼴 크기 16px이면, 2em은 32px이다. (1em = 부모 글꼴 크기)

rem: 루트 요소(html)의 글꼴 크기에 비례하는 것으로 루트 요소()의 글꼴 크기에 상대적인 크기로 루트 요소의 글꼴 크기가 16px이면, 1.5rem은 24px가 된다.

%: 부모 요소의 크기에 비례 하며, 부모 요소 너비가 200px이면, 50%는 100px가 된다.

vw, vh: 각각 뷰포트의 너비, 높이에 대한 백분율이다.

📂 3. 실습 과제

아래의 과제를 수행한 후 과제를 제출 합니다.

아래 HTML 문서를 조건에 맞게 디자인하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 실습</title>
  <style>
    /* 1. 박스 패딩, 테두리, 마진 설정 */
    .box {
      /* 이곳에 패딩, 테두리, 마진을 설정하세요 */
    }

    /* 2. 제목의 기본 색상은 녹색 */
    h1 {
      /* 이곳에 기본 제목 색상을 설정하세요 */
    }

    /* 3. 제목에 클래스 .highlight가 있을 때는 빨간색 */
    .highlight {
      /* 이곳에 클래스 적용 시 제목 색상을 설정하세요 */
    }

    /* 4. id가 special인 경우 노란색 */
    #special {
      /* 이곳에 id 적용 시 색상을 설정하세요 */
    }

    /* 5. 단위를 적절히 사용해 크기 및 글자 크기를 설정하세요 */
    .content {
      width: 50%; /* 50%로 박스 크기를 설정 */
      font-size: 1.5em; /* 글자 크기 설정 */
    }
  </style>
</head>
<body>

  <h1 class="highlight">박스 모델 실습</h1>
  <h1 id="special">우선순위 실습</h1>

  <div class="box content">
    이곳은 박스 모델이 적용된 콘텐츠입니다.
  </div>

</body>
</html>

👉 적용할 CSS 속성

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