CSS 2-이론

GAMMJ·2025년 12월 7일

비기너 오즈코딩스쿨

1. CSS 박스 모델 (Box Model)

1.1 개념설명

박스 모델은 HTML요소가 사각형 박스로 구성된다는 개념입니다

1.2 모델 구조

출처 mdn

Content: 텍스트나 이미지가 들어가는 실제 내용 영역
Padding: 내용과 테두리 사이의 내부 여백
Border: 테두리, 요소의 경계를 나타냄
Margin: 요소 외부의 여백, 다른 요소와의 간격

1.3 CSS 예시

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

1.4 실습

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

위의 코드를 작성하고 padding, border, margin 값에 따라 박스가 어떻게 바뀌는지 확인하기!

.box {
  padding: 20px;
  border: 2px solid #2f2f2f;
  margin-bottom: 20px;
}

이렇게 적용한 결과이다

2. CSS 우선순위 (Specificity)

2.1 개념 설명

css 우선순위는 여러 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: 무조건 적용(이건 자주 사용하면 안된다된다)

나같은 경우에는 !important 는 스크롤바 없앨 때 display: none 을 줄 때 icon font 부분에서 자주 사용했었는데 그 외에는 거의 안쓰는 것 같긴하다

2.4 실습

2.2 의 예시 코드에서는 노란색이 우선적으로 적용이 되고 !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 주요 단위 설명