[CSS 수업] 5강 - 박스 모델 이해하기

 

CSS의 박스 모델은 웹 디자인에서 핵심적인 개념 중 하나입니다. 이해하고 응용하기 위해서는 각 요소가 어떻게 구성되고 표현되는지를 이해하는 것이 중요합니다.

웹 페이지를 디자인할 때, 각 요소는 사각형 박스로 표현됩니다. 이 사각형 박스는 여러 가지 구성요소로 이루어져 있는데, 이를 박스 모델이라고 합니다.

박스 모델은 크게 콘텐츠(Content), 패딩(Padding), 테두리(Border), 그리고 마진(Margin)으로 구성됩니다.

 

반응형

 

· 콘텐츠(Content): 박스의 내용물을 담고 있는 영역입니다. 일반적으로 텍스트나 이미지 등이 들어갑니다.

· 패딩(Padding): 콘텐츠와 테두리(Border) 사이의 여백을 나타냅니다. 즉, 박스의 내부 여백을 의미합니다.

· 마진(Margin): 박스와 인접한 다른 요소와의 간격을 나타냅니다. 즉, 박스의 외부 여백을 의미합니다.

· 테두리(Border): 콘텐츠와 패딩을 감싸는 테두리입니다. 주로 선의 형태로 표현되며, 선의 두께, 스타일, 색상 등을 지정할 수 있습니다.

 

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

 

이러한 구성요소를 조합하여 각 요소의 모양과 위치를 조절할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드를 사용하여 박스 모델을 조절할 수 있습니다.

 

 

위 코드는 너비가 200px, 높이가 100px인 박스를 만들고 내부 패딩은 20px, 테두리는 2px 두께의 검은색 실선으로 지정하며, 박스와 주변 요소 사이에 10px의 마진을 설정합니다.

 

이렇게 박스 모델을 이해하고 활용함으로써 웹 페이지를 보다 다채롭고 효과적으로 디자인할 수 있습니다.

 

 

- 이전 수업 목록