학습 내용

웹 페이지에 생명을 불어넣는 마법! CSS 기초 이론 2

초록대디 2025. 6. 16. 16:07

안녕하세요, 초록대디 입니다. 😊 지난 CSS 기초 이론 1 에 이은 CSS 기초 학습에 대한 내용 리뷰입니다. 오늘은 HTML 문서에 생명을 불어넣는 CSS의 세 가지 핵심 개념인 박스 모델, 우선순위, 그리고 단위에 대해 깊이 있게 다뤄보고자 합니다.

 

CSS 박스 모델 (Box Model): 모든 HTML 요소는 박스다!

개념 설명: 박스 모델의 네 가지 영역

박스 모델(Box Model)은 CSS의 가장 기본적인 개념으로, 웹 페이지의 모든 HTML 요소가 사각형 '박스'로 구성된다는 것을 의미합니다[cite: 1]. [cite_start]이 박스는 단순히 콘텐츠를 담는 공간이 아니라, 다음과 같이 네 가지 중요한 영역으로 나뉘어 구성됩니다.

  • Content (콘텐츠): 텍스트나 이미지와 같은 실제 내용이 들어가는 영역입니다[cite: 1]. 이 부분이 바로 사용자에게 보여지는 핵심 정보입니다.
  • Padding (패딩): 콘텐츠와 테두리(border) 사이의 내부 여백입니다[cite: 1]. 콘텐츠가 숨 막히지 않도록 공간을 주는 역할을 합니다.
  • Border (테두리): 요소의 경계를 나타내는 선입니다[cite: 1]. 박스의 시각적인 윤곽을 만들어 줍니다.
  • Margin (마진): 요소 외부의 여백으로, 다른 요소와의 간격을 조절합니다[cite: 1]. 요소들이 서로 너무 붙어있지 않도록 공간을 확보합니다.

 

박스 모델 구조 시각화

이해를 돕기 위해 박스 모델의 구조를 시각화해 보았습니다. 바깥쪽부터 안쪽으로, 마진-테두리-패딩-콘텐츠 순으로 쌓여있는 것을 확인할 수 있습니다.

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

 

CSS 예시

실제 CSS 코드에서는 각 영역을 다음과 같이 정의합니다.

.box {
  width: 200px;    /* 콘텐츠 영역의 너비 */
  padding: 20px;   /* 내부 여백 */
  border: 5px solid black; /* 테두리 (두께, 종류, 색상) */
  margin: 15px;    /* 외부 여백 */
}

 

실습: 박스 모델의 변화를 직접 확인!

아래 HTML 코드를 VSCode에 작성하고, padding, border, margin 값을 직접 수정하며 각 속성이 박스 크기와 다른 요소와의 간격에 어떻게 영향을 미치는지 확인해 보겠습니다. 

 

HTML 코드:

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

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

 

 

CSS 우선순위 (Specificity): 어떤 스타일이 적용될까?

개념 설명: 스타일 충돌 시의 해결사

CSS 우선순위(Specificity)는 여러 CSS 규칙이 동일한 HTML 요소에 적용될 때, 어떤 스타일이 최종적으로 적용될지를 결정하는 규칙입니다. 이는 개발자가 의도한 스타일이 정확하게 적용되도록 하는 데 매우 중요한 개념입니다.

우선순위는 다음과 같은 순서로 계산됩니다 (높은 순서부터):

  • 인라인 스타일 (Inline Style): HTML 요소의 style 속성에 직접 작성된 스타일이 가장 높은 우선순위를 가집니다.
  • ID 선택자 (#id): #id 형태로 특정 요소를 고유하게 선택하는 ID 선택자가 그 다음으로 높은 우선순위를 가집니다.
  • 클래스 선택자 (.class), 속성 선택자 ([attr]), 가상 클래스 선택자 (:hover 등): 중간 우선순위를 가집니다.
  • 태그 선택자 (tag): p, h1 등 HTML 태그 이름을 직접 사용하는 선택자가 가장 낮은 우선순위를 가집니다.
  • !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 태그에는 id="unique", class="inline-style highlight"가 모두 적용되어 있습니다. 각 선택자의 우선순위 점수는 다음과 같이 이해할 수 있습니다:

  • 태그 선택자: p (우선순위: 1)
  • 클래스 선택자: .highlight, .inline-style (각 10, 총 20)
  • ID 선택자: #unique (우선순위: 100)
  • !important: 무조건 적용되므로, 다른 모든 우선순위를 무시합니다. (하지만 남용은 금물!)

 

실습: !important의 위력 확인!

위 코드에서 color 속성이 어떻게 적용되는지 예상해보고, !important를 추가하거나 제거하면서 스타일의 변화를 직접 확인해 보겠습니다.

 

CSS 단위 (Units): 크기와 간격을 정밀하게 제어하다

개념 설명: 다양한 크기 측정 방식

CSS에서 요소의 크기, 간격, 위치 등을 설정할 때 다양한 단위를 사용할 수 있습니다. 이 단위들은 크게 '고정 단위'와 '상대 단위'로 나눌 수 있습니다.

  • 고정 단위 (Fixed Units):
    • px (픽셀): 화면의 고정된 크기를 의미합니다. 디바이스 화면 크기에 상관없이 일정하게 유지됩니다.
  • 상대 단위 (Relative Units):
    • em, rem: 글꼴 크기에 상대적인 단위입니다.
      • em: 부모 요소의 글꼴 크기에 비례합니다 (1em = 부모 글꼴 크기).
      • rem: 루트 요소(HTML 문서의 <html> 태그)의 글꼴 크기에 비례합니다.
    • % (백분율): 부모 요소 크기에 상대적인 백분율입니다.
    • vw, vh: 뷰포트(브라우저 화면)의 너비(vw) 또는 높이(vh)에 비례하는 단위입니다.

 

단위 비교 예시

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

 

실습: 다양한 단위로 스타일 조절!

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

조절 효과를 확인하기 위해서 아래 테두리 효과 추가해서 실습 해봣습니다.

border: 1px solid black

 

마무리: CSS 핵심 개념 마스터하기

박스 모델, CSS 우선순위, 그리고 다양한 CSS 단위는 웹 개발에서 스타일을 제어하는 데 있어 가장 기본적인 도구입니다. 이 개념들을 실습을 통해 충분히 이해하고 숙달한다면, 여러분은 복잡한 레이아웃을 만들고 원하는 스타일을 정확하게 적용할 수 있는 능력을 갖추게 될 것입니다.

이는 아이디어를 시각적으로 매력적인 웹 서비스로 구현하는 데 필수적인 역량입니다. 꾸준히 실습하며 개념을 내 것으로 만들고, 실제 프로젝트에서 어떤 규칙을 사용할지 판단하는 능력을 길러봐야겠습니다.

 

 

🍩 실습 과제: HTML 문서에 CSS 스타일 입히기

이제 아래 HTML 문서를 조건에 맞게 디자인하는 CSS 코드를 작성해 보겠습니다. VSCode에서 styles.css 파일을 만들고 아래 CSS 속성을 적용해 보겠습니다. (해당 실습은 오즈코딩스쿨 학습 내용 입니다.)

 

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 속성 (HTML <style> 태그 내부에 직접 작성 또는 외부 styles.css 파일에 작성):

  1. .box:
    • 패딩(padding): 텍스트와 테두리 사이의 여백을 10px로 설정합니다.
    • 박스 테두리(border): 3px 두께의 solid 실선으로 설정하고, 색상은 blue로 합니다.
    • 박스 바깥쪽 여백(margin): 20px로 설정합니다.
  2. h1: 기본적으로 green으로 설정합니다.
  3. .highlight: class="highlight"가 적용된 h1 제목의 글자색을 red로 설정합니다.
  4. #special: id="special"인 요소는 yellow로 설정하되, !important를 사용하여 우선순위를 무조건 높입니다.
  5. .content: 이미 width: 50%;와 font-size: 1.5em;가 설정되어 있으니, 이대로 유지하여 단위의 적용을 확인합니다.