CSS의 기본 중의 기본: 박스 모델을 파헤쳐보자!

웹에 있는 모든 HTML 요소들, 그러니까 글자, 이미지, 버튼, 심지어 보이지 않는 공간까지도! 사실은 전부 네모난 '상자(Box)'라고 생각하면 이해하기 편해요. CSS는 바로 이 상자들을 꾸미고 배치하는 규칙을 만드는 거거든요.

이 '상자'에는 네 가지 중요한 부분이 있어요. 안에서부터 바깥으로 나열해볼게요.

콘텐츠 (Content)
패딩 (Padding)
보더 (Border)
마진 (Margin)
이렇게 네 가지가 합쳐져서 하나의 박스를 이룬다고 해서 '박스 모델'이라고 불러요.

각 부분이 뭐 하는 애들일까?
그림으로 보면 더 쉬운데, 일단 제가 말로 설명해 드릴게요.

1. 콘텐츠 (Content): 상자 안의 실제 내용물
이게 뭐냐면요? 우리가 웹페이지에 실제로 보여주고 싶은 글자, 이미지, 동영상 같은 내용물 자체를 말해요. CSS에서 width (가로 길이)와 height (세로 길이)로 이 콘텐츠 영역의 크기를 조절할 수 있어요.

.my-box {
width: 200px; /* 콘텐츠의 가로 길이를 200px로 */
height: 100px; /* 콘텐츠의 세로 길이를 100px로 */
}
2. 패딩 (Padding): 내용물과 테두리 사이의 '안쪽 여백'
이게 뭐냐면요? 상자 안에 있는 내용물(콘텐츠)이 테두리(Border)에 너무 바싹 붙어 있으면 답답해 보이잖아요? 그래서 콘텐츠 주변에 주는 안쪽 공간, 즉 내용물을 보호하는 푹신한 여백이라고 생각하면 돼요. CSS에서 padding을 사용해요. 상하좌우를 한꺼번에 줄 수도 있고, 개별적으로 줄 수도 있어요.

.my-box {
padding: 20px; /* 상하좌우 모두 20px의 패딩을 줘요 */
}
/* 또는 */
.my-box {
padding-top: 10px; /* 위쪽만 10px */
padding-right: 5px; /* 오른쪽만 5px */
padding-bottom: 10px; /* 아래쪽만 10px */
padding-left: 5px; /* 왼쪽만 5px */
}
/* 팁! 한 줄로 네 방향 설정: 위 오른쪽 아래 왼쪽 순서 */
.my-box {
padding: 10px 5px 10px 5px;
}
/* 팁! 상하 / 좌우 설정 */
.my-box {
padding: 10px 5px; /* 상하 10px, 좌우 5px */
}
3. 보더 (Border): 상자의 '테두리'
이게 뭐냐면요? 상자의 윤곽선을 그려주는 '테두리'예요. 말 그대로 경계선을 만들어주는 거죠. CSS에서 border를 사용해요. 두께(width), 선 스타일(style), 색상(color) 세 가지를 함께 설정할 수 있어요.

.my-box {
border: 2px solid #ccc; /* 2px 두께에 실선, 회색 테두리를 줘요 */
}
/* 또는 */
.my-box {
border-width: 2px;
border-style: solid; /* dotted (점선), dashed (파선) 등 */
border-color: #ccc;
}
4. 마진 (Margin): 상자 '바깥의 여백'
이게 뭐냐면요? 내 상자 바깥쪽, 즉 다른 상자들과의 간격을 조절할 때 쓰는 '바깥쪽 여백'이에요. 내 상자는 그대로 두고 다른 상자들이랑 얼마나 떨어져 있을지 정하는 거죠. CSS에서 margin을 사용해요. padding처럼 상하좌우 개별 설정이나 축약형으로 쓸 수 있어요.

.my-box {
margin: 30px; /* 상하좌우 모두 30px의 마진을 줘요 */
}
/* 팁! 가운데 정렬할 때 많이 쓰는 방법 */
.my-box {
width: 300px;
margin: 0 auto; /* 상하 여백은 0, 좌우는 자동으로 맞춰서 가운데 정렬 */
}
정리해볼까요?
간단하게 외우면 좋아요!

width와 height는 실제 내용물 크기.
padding은 내용물과 테두리 사이의 안쪽 여백.
border는 상자의 테두리 선.
margin은 내 상자와 다른 상자 사이의 바깥쪽 여백.

이 박스 모델 개념만 잘 이해해도 CSS 레이아웃의 절반은 먹고 들어간다고 해도 과언이 아니에요. 직접 HTML 파일 만들어서 div 같은 걸 놓고 이 속성들을 하나씩 바꿔보면서 눈으로 확인해 보세요! 훨씬 감이 잘 올 거예요!