CSS 이론 (2) - 박스 모델 / 우선순위 / 단위

1. CSS 박스 모델

웹 페이지에서 모든 요소는 하나의 박스로 표현된다. 이 박스는 내용, 패딩, 테두리, 마진으로 구성된다.

• Content (내용): 요소의 실제 내용이 들어가는 영역
• Padding (패딩): 내용과 테두리 사이의 여백
• Border (테두리): 요소를 감싸는 경계선
• Margin (마진): 요소 바깥쪽의 여백. 다른 요소와의 간격을 조정하는 데 사용됨

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

body {
  background-color: antiquewhite;
}
.box {
  width: 200px;
  padding: 20px 40px;
  border: 10px solid gray;
  margin: 15px;
  background-color: lightblue;
}

 

요소의 전체 크기는 width + padding + border로 계산된다.

2. CSS 우선순위

CSS에서 여러 스타일이 적용될 때 어떤 스타일이 우선 적용될지 결정하는 기준이 CSS 우선순위이다.

CSS 선택자는 다음과 같은 순서로 우선순위를 가진다.

1. 인라인 스타일 (1000점)
2. ID 선택자 (100점)
3. 클래스, 속성, 가상 클래스 선택자 (10점)
4. 태그 선택자 (1점)
5. 전체 선택자 및 상속된 스타일 (0점)

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

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

p {
  color: blue; 
}

.highlight {
  color: red; 
}

#unique {
  color: green; 
}

p.inline-style {
  color: yellow; 
}

위 예시에서 ID 선택자의 우선 순위가 가장 높기 때문에 글자는 초록색이 된다.

클래스 선택자에 !important를 추가하면 해당 스타일이 적용된다.

p {
  color: blue; 
}

.highlight {
  color: red; 
}

#unique {
  color: green; 
}

p.inline-style {
  color: yellow !important; 
}

3. CSS 단위

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

(1) 절대 단위

• px: 화면에서 고정된 크기, 일반적으로 가장 많이 사용됨
• cm, mm, in: 인쇄용 스타일에 사용

(2) 상대 단위

• %: 부모 요소의 크기에 대한 비율
• em: 부모 요소의 글꼴 크기를 기준 (ex. 2em은 부모 폰트 크기의 2배)
• rem: 최상위 html 요소의 글꼴 크기를 기준
• vw, vh: 뷰포트의 너비, 높이 기준 (ex. 50vw는 화면 너비의 50%)
• vmin, vmax: 뷰포트의 최소값 또는 최대값을 기준

  <div class="outer">
    20px
    <div class="inner">
      40px
    </div>
  </div>

.outer {
  width: 500px;
  height: 500px;
  background-color: bisque;
  font-size: 20px;
}

.inner {
  width: 50%;
  height: 25%;
  background-color: violet;
  font-size: 2em;
}

728x90

4. 실습하기

  <style>
    .box {
      padding: 10px;
      border: 3px solid blue;
      margin: 20px;
    }

    h1 {
      color: green;
    }

    .highlight {
      color: red;
    }

    #special {
      color: yellow;
    }

    .content {
      width: 50%;
      font-size: 1.5em;
    }
  </style>