CSS Box Model

Jerry95 2024. 4. 8. 22:23

2024. 4. 8. 22:23

1. Box Model

1-1) 정의

css를 구성하는 개념
HTML의 문서는 모두 박스 형태로 계산되어 있음

1-2) 구성

content: html 요소의 내용이 담겨짐
- width, height로 구성됨
padding: 콘텐츠의 테두리(border) 사이의 여백(내부영역)
margin: 가장 바깥 쪽 여백, 다른 요소 사이의 공백 역할

2. 크기

2-1) width, height

상속이 불가한 값으로 초기값은 auto

block 요소 : width, height 지정 가능
inline 요소 : width, height 지정 불가능
- 가지고 있는 콘텐츠에 의해 자동으로 설정되기 때문에 설정이 불가

2-2) max-width, min-width

상속이 불가한 값으로 초기값은 auto

min-width : 특정 값 이하로 줄어들지 않도록 구성
- 자식의 width를 퍼센트로 주고, 부모의 width가 줄어들어 자식의 min-width보다 작아지면, 자식은 min-width 값을 유지
<style> .parent{ width: 300px; height: 300px; } .child{ width: 50%; min-width: 100px; height: 100px; } </style>

3. 여백

3-1) margin

컨텐츠의 가장 바깥 테두리(여부)로 상속되지 않음(border 기준 바깥 여백)

입력값으로 퍼센트 사용 가능
- 부모의 width의 %가 값으로 사용됨

3-2) margin collapsing

여러 블록요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합되는 현상
인라인 요소에는 발생하지 않고, 좌우에도 발생하지 않음

인접형제

<style> 
  .box{ 
      width: 50px; 
      height: 50px; 
      background-color: tomato; 
      margin-top: 10px; 
      margin-bottom: 20px;
  } 
</style>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>

부모-자식 요소간
- 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우
- 부모 블록에 border, padding, inline content가 없고, 부모-자식을 분리할 height가 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우
```
<style> 
#parent{ 
  width: 100px; 
  height: 100px; 
  background-color: tomato; 

  margin-top: 30px; 
} 
#child{
  width: 30px;
  height: 30px;
  background-color: skyblue;

  margin-top: 40px;
}
</style>
<body>
<div id="parent">
  <div id="child"></div>
</div>
</body>
```
- 실제로는 부모, 자식 모두 margin-top이 40px
- 만약에 부모-자식 요소를 끊어줄 수 있는 요소가 단 1px만 있어도 margin collapsing은 일어나지 않음(padding, border)
빈블록
- border, padding, content가 없고, height가 존재하지 않으며, 해당 블록의 margin-top과 margin-bottom이 상쇄

3-3) padding

border를 기준으로 안쪽 여백

음수값 사용 불가
퍼센트 사용시, 부모 요소의 width를 기준으로 계산
maring과 사용법이 거의 동일

4. box-sizing

요소의 너비와 높이를 계산하는 방법을 지정

대부분은 wild card(*)로 box-sizing을 border-box로 선언함

<style>
  .box{
      width: 300px;
      height: 200px;

      border: 30px solid blue;
      padding: 20px;

      box-sizing: border-box;

      background-color: skyblue;
  }
</style>
<body>
  <div class="box">
      <span>Lorem</span>
      <h3>안녕하세요</h3>
  </div>
</body>

content-box : 초기값으로 width와 height가 content 영역만 포함, 안팎 여백과 테두리 미포함
- width를 300px로 설정했지만, border가 좌우 30px 추가 + padding 좌우 20px = 총 400px
- height를 200px로 설정했지만, border가 좌우 30px 추가 + padding 좌우 20px = 총 300px
border-box : width와 height가 안쪽 여백과 테두리 포함, 바깥여백은 포함하지 않음
- 실제로는 width가 400px, height가 200px이 되었지만, 사람은 컨텐츠가 width를 300px, height를 200px로 인지
- box-sizing을 border-box로 주면 width,height 계산시 컨텐츠가 차지하는 영역만 계산
  - 결과적으로, 실제 width가 차지하는 값은 200px, height가 차지하는 값이 100px이 됨
  - border포함한 값이 width, height

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

jerry