[css 공부] 박스 모델

CSS 박스 모델(Box Model)은 웹 페이지의 각 요소를 사각형 박스로 보는 개념인데, 네가지 구성 요소(Content, Padding, Border, Margin )로 이루어져 있습니다. 이에 대해서 살펴 보겠습니다.

CSS에서 박스 모델이란

CSS 박스 모델(Box Model)은 웹 페이지의 각 요소를 사각형 박스로 보는 개념입니다. 이 박스는 여러 부분으로 구성되며, 이들 각각이 요소의 레이아웃과 크기를 결정하는 데 영향을 줍니다.

박스 모델은 다음과 같은 네 가지 주요 구성 요소로 이루어져 있습니다:

1. Content: 이것은 요소의 실제 내용을 포함하며, 예를 들어 텍스트나 이미지 등이 될 수 있습니다.
2. Padding: 패딩은 콘텐츠와 테두리 사이의 공간입니다. 패딩 값에 따라 콘텐츠가 얼마나 자신의 테두리로부터 떨어져 있는지가 결정됩니다.
3. Border: 경계는 콘텐츠와 패딩을 감싸는 선입니다. 경계의 너비, 스타일, 색상 등을 설정할 수 있습니다.
4. Margin: 마진은 박스와 다른 요소들 사이의 공간입니다. 마진 값에 따라 해당 요소가 주변 요소로부터 얼마나 멀리 떨어져 있는지가 결정됩니다.

CSS에서 이러한 속성들(content, padding, border, margin)을 조절함으로써 웹 페이지 내에서 각 HTML 요소들의 위치와 크기를 세밀하게 제어할 수 있습니다.

참고로 box-sizing 속성을 사용하면 padding과 border가 전체 box 크기에 포함되도록 설정할 수 있습니다(box-sizing: border-box). 기본적으로는 content-box 값이 사용되며, 이 경우 전체 box 크기 = width + padding + border 로 계산됩니다.

html 문서의 구성요소들은 기본적으로 박스형태로 정의 됩니다. 쉽게 생각하면 웹페이지 레이아웃은 이러한 박스들을 위/아래, 좌/우로 적절하게 배치하는 것을 말합니다.

1) 박스 개요

박스 모델은 테두리(border)와 내용(content) 그리고 안쪽 여백(padding)과 바깥쪽 여백(margin)의 네 가지 요소로 구성됩니다. 각 요소는 상, 하, 좌, 우 네 영역을 개별적으로 설정할 수 있습니다.

위에서 보시는 것처럼, 가장 안쪽에 있는 ‘Content’는 요소의 실제 내용을 나타냅니다. 그 주변의 ‘Padding’은 콘텐츠와 테두리 사이의 공간을 의미하며, ‘Border’는 이 패딩과 콘텐츠를 감싸는 테두리입니다. 가장 바깥쪽에 있는 ‘Margin’은 이 박스와 다른 요소들 사이의 공간을 나타냅니다.

각 부분은 해당 속성의 크기에 따라 크기가 결정되며, 이들 속성값들을 조절함으로써 웹 페이지 내에서 각 HTML 요소들의 위치와 크기를 세밀하게 제어할 수 있습니다.

2) 박스 크기

CSS에서 박스의 크기는 주로 width와 height 속성을 통해 설정됩니다. 이러한 속성은 박스의 너비와 높이를 결정합니다.

그러나, CSS 박스 모델에 따르면, 실제 요소의 전체 크기는 단순히 width와 height만으로 결정되지 않습니다. 요소의 전체 크기는 다음과 같은 구성요소들을 합한 것입니다:

• Content: 요소의 실제 내용이 위치하는 영역입니다. 이 영역의 너비와 높이는 width와 height 속성으로 설정됩니다.
• Padding: 콘텐츠 주변에 추가되는 내부 여백입니다. 이 여백은 콘텐츠와 테두리 사이에 공간을 만듭니다.
• Border: 콘텐츠와 패딩을 감싸는 테두리입니다.
• Margin: 요소 주변에 추가되는 외부 여백입니다. 다른 요소들과의 공간(갭)을 생성하는 데 사용됩니다.

따라서, 만약 border, margin, padding 값이 0이 아니라면, 실제로 보여지는 박스의 크기(width/height)가 설정한 값보다 클 수 있습니다.

예를 들어 width를 200px로 설정하고 padding을 20px, border를 10px로 설정하면 실제 보여지는 넓이(width)는 (200 + (202) + (102)) = 260px가 됩니다.

하지만 CSS3에서 등장한 box-sizing 속성값인 ‘border-box’를 사용하면 padding과 border까지 포함해서 지정된 width나 height 값을 유지할 수 있습니다. 예를 들어 box-sizing: border-box; 로 선언하고 width를 200px로 선언하면 padding과 border가 어떻든 간에 최종적인 박스 모델의 넓이가 200px가 됩니다.

박스요소에 크기를 지정하면 기본적으로 콘텐츠 영역에 적용 됩니다. 그러나 실제 박스의 크기는 border, margin, padding을 모두 더해야 하기 때문에 각각의 박스를 적절하게 배치 하려면 이들 크기가 함께 고려 되어야 합니다.

• <div width=”300px”> 은 콘텐츠 영역이 300px 임을 의미 합니다.
• 전체 박스 크기는 border, margin, padding 에 콘텐츠 영역 크기를 더해야 합니다.
• 박스 크기 계산을 편하게 하기 위해서는 border 를 기준으로 하는 것이 편합니다. 이경우 box-sizing 속성을 boder-box 로 지정하면 됩니다. 기본은 content-box 입니다.

3) 보더(border) 속성

CSS에서 border 속성은 요소의 테두리를 지정하는 데 사용됩니다. border 속성은 테두리의 너비(border-width), 스타일(border-style), 색상(border-color)을 설정할 수 있습니다.

기본적으로, border 속성은 다음과 같이 사용됩니다:

예를 들어, 다음 코드는 테두리의 너비를 1픽셀로, 스타일을 solid로, 색상을 검정색으로 설정합니다:

각 부분에 대한 자세한 설명은 다음과 같습니다:

• width: 테두리의 두께를 지정합니다. 값은 일반적으로 길이 단위(예: ‘px’, ’em’) 또는 ‘thin’, ‘medium’, ‘thick’와 같은 상대적인 키워드를 사용하여 지정합니다.
• style: 테두리 선의 스타일을 지정합니다. 가능한 값에는 ‘none’, ‘hidden’, ‘dotted’, ‘dashed’, ‘solid’, ‘double’, ‘groove’, ‘ridge’, ‘inset’ 및’outset’ 등이 있습니다.
• color: 테두리 색상을 지정합니다. 이 값을 생략하면 폰트의 색상 (color 속성)이 사용됩니다.

더욱 구체적으로 각각의 변에 대해 서로 다른 값을 지정하고 싶다면, border-top, border-right, border-bottom, 그리고 border-left와 같은 개별 border 속성들을 사용할 수 있습니다.

border-width

테두리 두께를 지정하는 속성으로 상하좌우 네 영역을 개별적으로 설정하거나 상하, 좌우를 묶어서 설정할 수 있습니다.

border-style

테두리의 모양을 지정하는 속성으로 실선, 점선, 이중선 등을 사용할 수 있습니다. 4곳의 테두리를 각각 다르게 지정할수도 있습니다. border-top-style 처럼 사용합니다.

border-color

테두리의 색상을 지정하는 속성으로 일반적인 컬러 속성을 이용해 색상을 지정 합니다.

border-radius

테두리의 모서리를 둥글게 만들기 위한 속성 입니다. 반지름의 크기를 px 이나 % 등의 단위를 이용해 지정할 수 있습니다.

div {
  border-width: 2px 10px 4px 20px;  /* top, right, bottom, left */
  border-width: 2px 10px;  /* top bottom, right left */
}

단축형(Shorthand)

css 의 많은 속성들이 여러 속성들을 묶어 단축형으로 사용할 수 있도록 지원하고 있습니다. border 의 경우에도 width, style, color 순으로 나열하면 됩니다. 또한 4곳의 테두리를 다르게 설정해 다양한 용도로 활용가능한 박스를 만들 수 있습니다.

div {
  border: 5px solid red;
  border-left: 5px solid red;
}

4) 마진(margin) 속성

CSS에서 margin 속성은 요소의 외부 여백을 지정하는 데 사용됩니다. 이는 요소와 그 주변 요소 사이의 공간을 생성하거나 조절하는데 유용합니다. Margin은 보이지 않으며, 배경색 또한 적용되지 않습니다.

margin 속성은 다음과 같이 한 번에 모든 방향(위, 오른쪽, 아래, 왼쪽)의 마진을 설정할 수 있습니다:

만약 4개의 값 중 일부만 제공된다면, 다음과 같이 해석됩니다:

• margin: 25px;: 모든 방향에 대해 25px 마진을 적용합니다.
• margin: 25px 50px;: 위/아래에 대해 25px 마진을 적용하고, 좌/우에 대해 50px 마진을 적용합니다.
• margin: 25px 50px 75px;: 위에 대해 25px 마진을 적용하고, 좌/우에 대해 50px 마진을 적용하며, 아래에 대해 75px 마진을 적용합니다.
• margin: 25px 50px 75px100 px;: 각각 위(25), 우(50), 하(75), 좌(100) 방향으로 마진 값을 설정합니다.

더욱 구체적으로 각 변(margin-top/margin-right/margin-bottom/margin-left)마다 서로 다른 값을 지정하고 싶다면 개별 margin 속성을 사용할 수 있습니다. 이들은 각각 margin-top, margin-right, margin-bottom, 그리고 margin-left로, 각 방향에 대해 마진 값을 개별적으로 설정하는 데 사용됩니다.

이 코드는 div 요소의 위쪽 마진을 10px로, 오른쪽 마진을 20px로, 아래쪽 마진을 30px로, 왼쪽 마진을 40px로 설정합니다.

마지막으로 주의해야 할 점은 CSS에서 음수의 마진 값을 허용한다는 것입니다. 이는 특정 상황에서 요소간 공간을 줄이거나 겹치게 하기 위해 유용하게 사용될 수 있습니다.

margin 은 박스와 인접 요소간의 여백을 말합니다. 박스간의 적적할 배치를 위해 사용할 수 있으며 경우에 따라서는 박스를 가운데 정렬하기 위해 사용할 수도 있습니다.

다음은 margin 속성의 다양한 사용예 입니다.

p {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ 
p {margin: 10px 5px 15px;}          /* top-10px, right& left-5px, bottom-15px */ 
p {margin: 10px 5px;}                  /* top& bottom-10px, right& left-5px */ 
p {margin: 10px;}                         /* All 10px */

• auto: 브라우저가 자동으로 마진을 조정 한다.
• inherit: 부모 요소의 마진 속성을 상속 한다.

---

관련 유사 정보