CSS 박스 모델에 대한 얼마나 알고 있고 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명해보세요.
css 박스 모델이란 HTML 요소들을 감싸는 네모난 상자로 margin, border, padding, content로 구성됩니다. content는 내용, border는 테두리, padding은 내용과 태두리 사이 여백, margin은 테두리 밖 여백으로 요소 사이의 간격을 의미합니다.
기본적으로 박스는box-sizing: content-box속성을 갖고 있는데, 박스의 크기가 콘텐트 영역을 기준으로 정해지는 것을 의미합니다. 만약 박스 모델의 크기 기준을 바꾸고 싶다면border-box를 쓰면 테두리를 기준으로 크기가 정해집니다.
1. box model이란?
모든 HTML 요소는 박스로 간주된다. (박스 형태란 물론 사각형을 의미한다.) 그리고 박스 모델이란 각각의 요소들을 박스 형태로 나타내어 브라우저에 배치하기 위한 규칙 이다. 다르게 표현하자면 HTML 요소들을 감싸는 상자 라고 할 수 있다.
브라우저는 박스 모델의 크기나 프로퍼티(색, 배경, 모양 등), 위치를 근거로 렌더링하여 실행하게 된다.
HTML 요소란?
HTML 구성요소가 요소(element)이다. 시작 태그부터 종료 태그까지 한 묶음을 요소라고 한다.
즉, HTML은 요소들의 집합이다.
2. box model의 구성품
- content : 요소의 텍스트나 이미지 등 실제 내용이 위치하는 영역
- padding : 테두리(border) 안쪽에 위치하는 요소의 내부 여백 영역
- 요소에 적용된 배경 색상이나 이미지는 padding 영역까지 지정됨
- border : 테두리 영역으로 border 프로퍼티 값을 테두리의 두께를 의미
- margin: 테두리(border) 바깥에 위치하는 요소의 외부 여백 영역
3. CSS box model이 계산하는 것
- 블록 요소가 공간을 얼마나 차지하는가
- 테두리 또는 여백이 겹치거나 충돌하는지 여부
- 박스의 크기
4. box model의 규칙
- 블록 요소의 크기는 width, height, padding, border, margin에 의해 계산된다.
- height가 지정되지 않으면 블록 요소는 포함하고 있는 내용 만큼의 높이를 가지고 padding을 더한다.(float가 아닌 경우)
- width가 지정되지 않으면 float가 아닌 블록 요소는 부모의 너비 - padding에 맞게 확장된다.
- 요소의 height는 내용의 height에 의해 계산된다.
- 요소의 width는 내용의 width에 의해 계산된다.
- 기본적으로 padding과 border는 요소의 width와 height의 일부가 아니다.
5. box의 크기 및 생김새 조정
- width / height
- border
- padding / margin
- box-sizing
- content-box : width, height 프로퍼티 값은 content 영역을 의미
- border-box : width, height 프로퍼티 값은 content, padding, border가 포함된 영역을 의미
모든 박스모델 관련 프로퍼티(margin, width 등)는 상속되지 않는다.
box model의 종류 (IE 박스 모델 버그)
박스 모델에는 W3C 모델과 IE 모델이 있다.
W3C 모델은 content-box로 width가 content에 포함되지만, IE 모델은 border-box로 width가 content, padding, border를 모두 포함한다.
(참고로 IE 모델은 Internet Explorer의 초기 버젼일 때, 박스 모델을 다르게 처리했었던 것이다. 현재는 DOCTYPE을 정의하지 않는 경우도 드물고 IE는 더이상 사용하지 않으므로 참고만 하자.)
그래서 css reset 설정 시 border-box로 만들어주는 코드를 넣어줬었다.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}