Delvelop/CSS

[새싹x코딩온] CSS 완벽 정리 4부 - CSS 박스 모델 & 크기 단위 정리

ChipTuneX 2025. 3. 21. 08:13

CSS 완벽 정리 4부 – CSS 박스 모델 & 크기 단위 정리

웹 개발에서 CSS는 필수적인 역할을 합니다.
특히 크기 단위, 박스 모델, 여백(margin & padding), 테두리(border), 박스 크기 설정(box-sizing) 등의 개념을 이해하면 더 직관적이고 깔끔한 디자인을 만들 수 있습니다.

이 글에서는 CSS 속성을 초보자도 쉽게 이해할 수 있도록 상세한 설명 + 예제 코드(CSS & HTML) 와 함께 정리해보겠습니다! 🚀

✅ 1. CSS 크기 단위 – 절대 단위 vs 상대 단위

CSS에서 크기를 정의할 때는 절대 단위와 상대 단위를 사용할 수 있습니다.

단위	유형	설명
px	절대 단위	고정된 크기 (화면 크기와 상관없이 일정)
em	상대 단위	부모 요소의 폰트 크기를 기준으로 결정
rem	상대 단위	최상위 요소(<html>)의 폰트 크기를 기준으로 결정
%	상대 단위	부모 요소 크기의 백분율
vh	상대 단위	브라우저 창 높이의 백분율
vw	상대 단위	브라우저 창 너비의 백분율

✅ CSS 예제

.absolute {
  width: 200px; /* 고정된 크기 */
  height: 100px;
  background-color: lightblue;
}

.relative-em {
  font-size: 2em; /* 부모 폰트 크기의 2배 */
}

.relative-rem {
  font-size: 1.5rem; /* 최상위 HTML 폰트 크기의 1.5배 */
}

.percentage {
  width: 80%; /* 부모 요소의 80% */
  height: 50vh; /* 브라우저 높이의 50% */
}

✅ HTML 코드

<div class="absolute">고정 크기 박스</div>
<p class="relative-em">이 문장은 부모 폰트 크기의 2배입니다.</p>
<p class="relative-rem">이 문장은 기본 폰트 크기의 1.5배입니다.</p>
<div class="percentage">이 박스는 부모 요소의 80% 너비를 가집니다.</div>

✔️결과

See the Pen 절대 단위 vs 상대 단위 by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

반응형 웹을 고려한다면 em, rem, %, vh, vw를 적절히 활용하는 것이 좋습니다.

✅ 2. 박스 모델 (Box Model)

CSS에서 모든 요소는 박스 모델(box model) 을 따릅니다.
박스 모델은 HTML 요소를 구성하는 크기, 여백, 테두리, 패딩을 정의하는 개념입니다.

✅ inline 요소 vs block 요소

inline 요소 → 내용 크기만큼 차지, 줄 바꿈 없음 (<span>, <a>)

block 요소 → 한 줄을 전부 차지, 줄 바꿈 발생 (<div>, <p>)

✅ CSS 예제

.inline-box {
  display: inline;
  background-color: lightcoral;
}

.block-box {
  display: block;
  background-color: lightgreen;
}

✅ HTML 코드

<span class="inline-box">인라인 요소</span>
<div class="block-box">블록 요소</div>

✔️결과

See the Pen inline vs block by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

display: inline-block;을 사용하면 인라인 요소처럼 동작하면서 크기 조정 가능

✅ 3. width & height (크기 조절 속성)

✅ CSS 예제

.box {
  width: 200px;
  height: 150px;
  max-width: 500px;
  min-height: 100px;
  background-color: lightblue;
}

✅ HTML 코드

<div class="box">크기 조절 박스</div>

✔️결과

See the Pen width & height by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

calc()를 활용하면 동적 크기 설정이 가능함

.dynamic-box {
  width: calc(100% - 50px);
  background: lightblue;
}

<div class="dynamic-box">calc(100% - 50px)</div>

✔️결과

See the Pen calc() by KIM (@JINKYOUNG) on CodePen.

line-height : 영역 요소 내부 컨텐츠 글자의 줄 높이

.p {
  line-height; 180px;
}

✅ 4. margin & padding (여백 설정)

✅ CSS 예제

.box {
  margin: 20px; /* 네 방향 동일한 여백 */
  padding: 10px; /* 네 방향 동일한 내부 여백 */
  background: lightblue;
}

✅ HTML 코드

<div class="box">이 박스에는 margin과 padding이 적용되었습니다.</div>

✔️결과

See the Pen margin & padding by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

margin: auto; → 가운데 정렬할 때 사용
padding은 내부 간격을 조절할 때 사용

✅ 5. border (테두리 설정)

✅ CSS 예제

.box {
  border: 2px solid black;
}

✅ HTML 코드

<div class="box">이 박스는 테두리가 있습니다.</div>

✔️결과

See the Pen border by KIM (@JINKYOUNG) on CodePen.

✅ 6. border-radius (모서리 둥글게 만들기)

✅ CSS 예제

.box {
  width: 200px; 
  height: 200px;
  border:1px solid #000;
}

.round-box {
  border-radius: 10px;
}

✅ HTML 코드

<div class="box round-box">둥근 모서리 박스</div>

✔️결과

See the Pen border-radius by KIM (@JINKYOUNG) on CodePen.

✅ 7. box-sizing (박스 크기 계산 방식 설정)

✅ CSS 예제

.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  background: lightblue;
}

✅ HTML 코드

<div class="box">이 박스는 box-sizing이 적용되었습니다.</div>

✔️결과

See the Pen box-sizing by KIM (@JINKYOUNG) on CodePen.

🚀 Tip!

box-sizing: border-box;를 사용하면 예상치 못한 크기 변화 방지 가능

🎯 정리 – CSS 주요 속성 활용법

✔ 크기 단위 → px, em, rem, %, vh, vw
✔ 박스 모델 → block, inline, inline-block
✔ 크기 조절 → width, height, max-width, min-height
✔ 여백 조절 → margin, padding, margin-top, padding-left
✔ 테두리 설정 → border, border-radius
✔ 박스 크기 설정 → box-sizing: border-box;