[CSS] 박스 모델(Box)

목차

CSS 박스 모델: 웹 페이지의 빌딩 블록 이해하기 📦✨

안녕하세요, 웹 디자인 애호가 여러분! 🎨 오늘은 CSS의 핵심 개념 중 하나인 '박스 모델'에 대해 알아보겠습니다. 웹 페이지의 각 요소는 마치 박스처럼 취급되고, 이 박스들이 어떻게 구성되는지를 이해하는 것은 CSS 디자인의 기본입니다.

 

1. 박스 모델이란?

박스 모델은 웹 페이지에서 객체를 표현하는 모델을 의미합니다. 각 요소는 마치 박스로 감싸져 있는 것처럼 여러 개의 속성(패딩, 테두리, 마진 등)을 가질 수 있습니다.

 

2. 박스 모델의 주요 구성요소

• 콘텐츠(Content): 실제 내용(텍스트, 이미지 등)이 들어가는 영역입니다.
• 패딩(Padding): 콘텐츠와 테두리 사이의 공간입니다. 이 공간에는 배경색이 적용됩니다.

.box {
    padding: 10px;
}

• 테두리(Border): 요소의 바깥쪽을 감싸는 선입니다.

.box {
    border: 2px solid black;
}

• 마진(Margin): 박스와 다른 요소 사이의 빈 공간입니다. 여기에는 배경색이 적용되지 않습니다.

.box {
    margin: 15px;
}

 

3. 박스 크기 계산하기

기본적으로 박스의 총 크기는 width, height, padding, border를 합한 것이 됩니다. 그러나 box-sizing 속성을 border-box로 설정하면, padding과 border가 width 및 height에 포함되게 만들 수 있습니다.

.box {
    box-sizing: border-box;
}

 

4. 마진 겹침

두 개의 수직 박스가 연속되어 있을 때, 아래 박스의 상단 마진과 위 박스의 하단 마진이 겹치는 현상을 마진 겹침이라고 합니다. 이때, 큰 마진의 값만 적용됩니다.

 

마치며

CSS 박스 모델은 웹 페이지의 레이아웃을 구성하는 데 굉장히 중요한 개념입니다. 이를 통해 요소 간의 간격, 크기, 테두리 등을 조절하여 다양한 디자인을 실현할 수 있습니다. 다음 포스트에서는 레이아웃에 관한 더 깊은 이야기를 나누도록 하겠습니다. 디자인의 세계로 더욱 깊이 빠져보아요! 🚀🌟🎈