CSS : 박스 모델 (Box Model)

목차

1. 박스 모델(Box Model)이란?

2. padding, margin

3. border

4. content

---

1. 박스 모델(Box Model)이란?

박스 모델(Box Model)은 HTML 요소가 브라우저에서 어떻게 레이아웃되고 공간을 차지하는지를 설명하는 개념이다.

웹 페이지에서 거의 모든 요소는 사각형 박스 형태로 구성되며, 이 박스는 다음 네 가지 영역으로 구성된다.

• Margin
  • 박스 바깥쪽 여백 
  • 요소 간 간격 조정용으로, 배경색이 적용되지 않음
• Border
  • 컨텐츠를 둘러싼  테두리 
  • border-width, border-style, border-color 등으로 설정
• Padding
  • 내용과 테두리 사이의  내부 여백 
  • 배경색이 적용됨
• Content
  • 텍스트, 이미지 등  실제 내용 이 들어가는 공간
  • width, height로 크기를 설정

 

---

2. padding, margin

padding과 margin은 각각 안쪽 여백, 바깥쪽 여백을 넣는 속성이다.

여백을 지정하는 방식은 두 속성이 동일하다.

 

1. 상하좌우 한 번에

padding: 8px;	/* 상하좌우: 8px */
margin: 8px;

 

2. 상하/좌우 각각

padding: 16px 8px;	/* 상하:16px 좌우:8px */
margin: 16px 8px;

 

3. 상, 좌우, 하

padding: 16px 8px 24px; /* 상:16px 좌우:8px 하:24px */
margin: 16px 8px 24px;

 

4. 상, 우, 하, 좌

시계방향으로 여백을 입력한다.

padding: 16px 8px 24px 10px;	/* 상:16px 우:8px 하:24px 좌:10px */
margin: 16px 8px 24px 10px;

 

 

 

padding- 속성, margin- 속성

위에서 padding: ~~, margin~~ 의 형식으로 여백을 한꺼번에 정의했지만, 

각 여백을 정하기 위해 속성을 따로 사용할 수도 있다.

padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

 

 

+ margin의 auto 속성값

margin은 부모 요소의 크기에 맞춰서 여백을 auto로 지정할수도 있다.

margin: 16px auto;

 

코드를 위와같이 작성하면 위아래로는 16px의 여백을, 가로로는 부모의 정해진 너비를 모두 채우는 여백을 가진다.

 

 

---

3. border

border 속성

border 속성을 사용하여 테두리를 표현할 수 있다.

border: 2px solid #ededed;

속성값으로 세 가지가 들어갔는데 순서대로 선 굵기, 테두리 모양, 테두리 색을 나타낸다.

 

border-radius 속성

박스 모델의 모서리를 둥글게 만들 때 사용한다.

border-radius: 16px;
border-radius: 50%;

 

---

4. content

box-sizing 속성

기본적으로 요소에 크기를 지정하면, 그 크기는 content 영역에 대한 크기이다.

따라서 margin, padding까지 적용하면 요소의 실제 크기는 더 커지게 되는 것이다.

 

box-sizing 속성을 사용하여 더 직관적으로 크기를 지정할 수 있다.

* {
	box-sizing: border-box;
}

#box {
	margin: 20px;
    padding: 30px;
    width: 100px;
}

 

이러면 테두리까지 합친 영역의 크기가 100px이 된다.

 

 

overflow 속성

박스의 크기를 지정하면 content의 내용이 많을 때 박스 밖으로 튀어나올 수가 있다.

이런 overflow에 대해 어떻게 할 건지 지정할 수 있다.

• overflow: hidden;
  → 넘치는 내용은 감춘다.
• overflow: auto;
  → 넘치는 내용을 스크롤로 표현한다.
• overflow: scroll;
  → 항상 스크롤하도록 한다.

 

마진 상쇄 (Margin Collapsing)

이웃한 태그들, 부모 자식 태그들이 모두 마진을 가질 경우, 세로 마진은 겹쳐서 상쇄가 된다.

 

이웃 태그의 마진 상쇄

<div id="a"> a </div>
<div id="b"> b </div>

#a { margin: 30px; }
#b { margin: 20px; }

이 둘의 마진이 겹쳐져, a와 b 사이의 마진은 30px이 된다.

 

 

부모자식 태그 마진 상쇄

<div id="a"> a </div>
<div id="b">
  <div id="c">
    c
  </div>
  b
</div>

#a { margin: 30px; }

#b { margin: 20px; }

#c { margin: 40px; }

b와 c 사이에 경계가 없으므로, 마진이 겹쳐서 마진은 40px이 된다.

이 마진값이 a와 겹쳐, a와 b 사이의 마진은 40px이 된다.

 

 

 

 

참고

codeit