1. 개요
브라우저는 문서의 레이아웃을 계산할 때, 렌더링 엔진을 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.
이 때 CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 등)을 결정한다.
하나의 박스는 네 영역으로 이루어진다. 박스 안쪽부터 순서대로
컨텐츠(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin) 영역이다.
이곳에서는 CSS 표준 박스 모델, 대체 박스 모델, 오버플로우에 대해서 정리한다.
2. CSS 박스 구성
CSS 박스 모델은 content, padding, border, margin 네 부분으로 구분한다.
Content
컨텐츠가 표시되는 영역이다.
width, height와 같은 속성을 사용해 크기를 정할 수 있다.Padding
컨텐츠 주변을 공백으로 감싸는 영역이다.
padding 속성을 이용해 공백의 크기를 정할 수 있다.Border
컨텐츠와 패딩을 둘러싸는 영역이다.
박스의 영역을 결정하는 가장 바깥의 영역이다.
border 속성을 이용해 테두리의 크기와 스타일을 정할 수 있다.Margin
컨텐츠, 패딩, 테두리를 둘러싸며 해당 박스와 다른 요소 사이를 공백으로 감싼다.
박스가 페이지에서 차지하는 총 공간에 영향을 미치지만 박스의 실제 크기에 포함되지 않는다.
margin 속성을 이용해 공백의 크기를 정할 수 있다.
3. 표준 CSS 박스 모델
박스에 width, height를 부여하면 content의 너비와 높이가 결정된다.
그 다음 패딩과 테두리가 박스의 너비와 높이에 추가되어 박스가 점유하는 전체 크기가 정해진다.
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}위와 같이 박스의 크기를 정했을 때, 박스가 차지하는 공간은 다음과 같다.
너비 410px(350 + 25 + 25 + 5 + 5)
높이 210px(150 + 25 + 25 + 5 + 5)
양쪽 패딩과 테두리는 컨텐츠 박스에 사용되는 너비에 더해진다.
4. 대체 CSS 박스 모델
박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하다면 대체 CSS 박스 모델을 고려할 수 있다.
이 모델에서 컨텐츠의 크기는 표준 박스 모델의 컨텐츠 + 패딩 + 테두리의 크기와 같다.
사용하기 위해서는 아래 CSS 값을 추가한다.
.box {
box-sizing: border-box;
}
5. 오버플로우(overflow)
CSS의 모든 것은 박스이고 저마다의 크기를 가진다.
그러나 표현해야 할 데이터의 양이 박스의 크기를 넘어서는 일이 종종 발생한다.
이 때 한정된 박스의 크기 내에서 모든 데이터를 표기하기 위해 overflow 속성을 사용할 수 있다.
overflow-x, overflow-y로 원하는 축의 오버플로우를 다룰 수 있다.
데이터가 넘칠 때 스크롤바를 추가하고 아닐 때는 제거하고 싶으면 auto값을 넣으면 된다.