실무에서 유용한 CSS 알아보기 - 박스 모델 이해하기

2024/03/03

안녕하세요 lika-7 입니다.
이번시간에는 가상 요소를 알아보겠습니다.

박스모델이란

박스모델이란 페이지의 모든 요소는 사각형 박스라고 할수 있습니다.

 

표준 CSS 박스 모델

CSS 박스 모델은 콘텐츠Contents, 안쪽 여백Padding, 테두리Border, 바깥쪽 여백Margin 모두 4개의 영역으로 구성됩니다

 

콘텐츠 영역

모든 여백을 제외한 실제 내용이 표시되는 영역입니다.

 

안쪽 여백 영역 Padding

안쪽 여백 영역은 콘텐츠 크기에 영항을 주며 콘텐츠와 테두리가 겹치지 않도록 공간을 확보합니다

padding: <위쪽><오른쪽><아래쪽><왼쪽>;

 

테두리 영역 Border

안쪽 여백과 바깥쪽 여백 사이의 영역 입니다.

border: <형태><너비><색상>;

 

바깥쪽 여백 영역 Margin

이 간격을 조절하여 페이지의 여백을 배치하는데 사용합니다

margin: <위쪽><오른쪽><아래쪽><왼쪽>;

---

요소의 크기 계산 기준 정하기 -box-sizing 속성

1. width 와 height의 속성값을 지정하면 요소의 너비와 높이가 정해집니다
2. padding과 border 속성값을 추가하면 너비와 높이에 더해져 요소의 크기가 정해집니다.

요소의 크기

1. <div>박스의 width와 height의 값을 100px에
2. padding을 20px
3. border를 1px로 지정하면
4. 박스 크기는 너비가 142px(100 + 20 + 20 + 1 + 1)이 됩니다.

 

div{
  width: 100px;
  height: 100px;
  padding: 20px;
  border: solid 1px black;
}

• 실제 요소의 크기는 표준 박스 모델의 영향을 고려하여 작성해야 합니다.
  • 요소의 크기를 구할 때마다 여백과 테두리를 계산해야 하는 불편사항이 있습니다.
  • 이를 보완하고자 box-sizing 속성이 추가되었습니다.

box-sizing

• box-sizing은 요소의 크기 계산 방식을 정하는 속성입니다.
  • border-box나 content-box로 속성값을 지정할수 있습니다.
  • border-box
    • 안쪽 여백과 테두리를 포함한 크기로 계산
  • content-box
    • 실제 콘텐츠 영역만 크기로 계산