CSS 박스 모델(Box Model)
박스 모델은 모든 HTML의 요소가 사각형 모양의 박스로 구성된다는 CSS의 기본 개념입니다.
박스 모델 구조는 다음과 같고, 4개의 영역으로 나눌 수 있습니다.
┌───────────────────────────────┐
│ Margin │
│ ┌───────────────────────────┐ │
│ │ Border │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ Content │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │ └───────────────────────────────┘
- Margin : 다른 요소와의 간격(다른 박스와의 떨어진 거리)
- Border : 테두리, 요소의 경계(박스의 테두리)
- Padding : 내용와 테두리 사이 내부 여백(내용이 테두리랑 붙지 않도록 하는 거리)
- Content : 텍스트 혹은 이미지가 들어가는 실제 내부의 내용 영역(박스 안의 내용물)
4가지 영역들을 실습을 통해 확인하면, 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 실습</title>
<!-- style.css 파일과 연결 -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box">이것은 박스 모델입니다!</div>
</body>
</html><!-- style.css 파일 -->
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
CSS 우선 순위(Specificity)
여러개의 CSS 규칙이 동일한 요소에 적용이 될 경우, 어떤 스타일을 먼저 적용이 되는지에 대한 규칙이 있어야 합니다.
우선 순위 계산 방식의 경우, 다음과 같습니다.
인라인 스타일 > ID 선택자 > 클래스, 속성, 가상 클래스 선택자
만약, !important를 사용하게 되면, 우선 적용이 됩니다.
실습을 통해 확인해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 실습</title>
<style>
p {
color: blue; /* 태그 선택자 */
}
.highlight {
color: red; /* 클래스 선택자 */
}
#unique {
color: green; /* ID 선택자 */
}
p.inline-style {
color: brown !important; /* !important */
}
</style>
</head>
<body>
<p id="unique" class="inline-style highlight">CSS 우선순위 예시입니다!</p>
</body>
</html>
이 코드를 보면,
우선순위는 p → .highlight → #unique 순으로 적용됩니다.
하지만 p.inline-style의 경우, !important가 사용되었기 때문에,
다른 모든 규칙보다 우선적으로 적용되어
color 값이 blue가 아닌 brown으로 지정됩니다.
!important는 매우 강한 우선순위를 가지기 때문에,
CSS의 구조가 무너질 수도 있습니다.
따라서 필요한 경우에만 제한적으로 사용하고,
가능한 한 선택자의 구조와 우선순위를 통해 스타일을 관리하는 것이 훨씬 좋은 방법입니다.
CSS 단위(Units)
요소의 크기, 간격, 위치를 설정할 경우, 사용되는 단위는 다양합니다.
주요 단위는 다음과 같습니다.
- px = 고정
- em·rem = 비율
- % = 부모 기준
- vw·vh = 화면 기준
단위들은 다음과 같이 사용이 될 수 있습니다.
.container {
width: 50%; /* 부모 요소 너비의 50% */
padding: 1rem; /* 기본 글꼴 크기의 1배 */
margin: 20px; /* 20 픽셀 */
font-size: 2em; /* 현재 글꼴 크기의 2배 */
}
실습하기
지금까지 배운 개념들을 바탕으로 간단한 실습을 진행해봤습니다.
<!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 {
padding: 10px;
border: 3px solid blue;
margin: 20px;
}
/* 2. 제목의 기본 색상은 녹색 */
h1 {
color: green;
}
/* 3. 제목에 클래스 .highlight가 있을 때는 빨간색 */
.highlight {
color: red;
}
/* 4. id가 special인 경우 노란색 */
#special {
color: yellow !important;
}
/* 5. 단위를 적절히 사용해 크기 및 글자 크기를 설정하세요 */
.container {
width: 50%; /* 50%로 박스 크기를 설정 */
font-size: 1.5em; /* 글자 크기 설정 */
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<div class="box container">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</html>
CSS의 박스 모델에 대해 직접 간단한 실습을 해보면서,
단순히 개념으로만 이해했던 margin, padding, border의 차이를
시각적으로 확인할 수 있었습니다.
또한, 사용해보지 못한 rem, em 같은 CSS 단위들도 사용해 보면서,
각 단위가 기준으로 삼는 요소에 따라 크기가 각각 다르게 적용된다는 점 또한 직접 확인할 수 있었습니다.
이를 활용해 앞으로의 실습에서는
각 상황에 맞는 레이아웃을 구성하고, 적절한 CSS 단위를 구분하여 적용해보겠습니다.
'개발' 카테고리의 다른 글
| 파이썬: Colab으로 시작 (0) | 2026.03.27 |
|---|---|
| JavaScript 입문하기 (0) | 2026.03.27 |
| CSS 입문하기 #1 (0) | 2026.03.26 |
| HTML 입문하기 (0) | 2026.03.26 |
| Git과 Github (0) | 2026.03.26 |