[CSS 핵심강좌] 3. 박스모델

CSS Box Model은 HTML 요소에 대해 생성되는 사각형 상자를 설명하는 웹 디자인에서 근본적인 개념입니다. 각 상자는 콘텐츠, 패딩, 테두리 및 마진으로 구성됩니다.

 

1. 콘텐츠(Content): 실제 요소 콘텐츠(텍스트, 이미지 등)가 들어가는 영역입니다.
2. 패딩(Padding): 콘텐츠를 감싸며 콘텐츠와 경계 사이의 공간을 제공합니다. 패딩은 투명하며 padding 속성을 사용하여 지정할 수 있습니다.
3. 테두리(Border): 패딩을 감싸며 border-width, border-style 및 border-color 속성을 사용하여 스타일을 지정할 수 있습니다.
4. 마진(Margin): 테두리를 감싸며 상자와 다른 요소 간의 공간을 제공합니다. margin 속성을 사용하여 지정할 수 있습니다.

 

CSS Box Model을 이해하는 것은 웹 페이지에서 요소의 레이아웃과 크기에 영향을 미칩니다. 요소의 너비와 높이 속성은 콘텐츠 영역에만 적용되며 패딩, 테두리 또는 마진은 포함되지 않습니다. 요소의 전체 크기를 계산하려면 콘텐츠, 왼쪽 및 오른쪽 패딩, 왼쪽 및 오른쪽 테두리, 왼쪽 및 오른쪽 마진의 너비와 높이를 추가해야합니다.

 

예를 들어, 아래는 CSS Box Model의 각 구성 요소에 대한 예제입니다.

 

HTML 코드:

<div class="box">
  This is the content of the box.
</div>

 

CSS 코드:

.box {
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

 

위 예제는 브러우저에서 아래와 같이 보여집니다.

This is the content of the box.

 

위의 예제에서 "box" 클래스를 가진 div 요소가 있습니다. 이 div 요소는 콘텐츠, 패딩, 테두리, 마진으로 구성된 상자가 됩니다.

 

• 콘텐츠(Content): "This is the content of the box."라는 텍스트가 콘텐츠 영역에 들어갑니다.
• 패딩(Padding): 콘텐츠와 테두리 사이에 20px의 패딩이 적용됩니다.
• 테두리(Border): 패딩을 감싸며 1px의 블랙색 테두리가 적용됩니다.
• 마진(Margin): 테두리를 감싸며 상자와 다른 요소 간에 10px의 마진이 적용됩니다.

 

전체적으로 "box" 클래스가 적용된 div 요소는 콘텐츠, 패딩, 테두리, 마진을 모두 포함한 상자가 됩니다.

 

CSS에서 box-sizing 속성을 사용하여 Box Model을 변경할 수 있습니다. 이 속성은 요소의 전체 너비와 높이가 계산되는 기본 방법을 변경합니다. 기본적으로 box-sizing 속성은 content-box로 설정되어 있지만, border-box로 설정하면 요소의 너비와 높이 속성이 패딩과 테두리를 포함하게 됩니다.

 

[CSS 핵심강좌] 4. 레이아웃