Dev-Tino 7주차(2):: CSS 박스 모델

2024.08.08

CSS에 포함되는 모든 요소의 외장은 박스이다. 이 박스를 이해하는 것은 CSS를 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠이다. 이번 포스팅에서는 CSS의 박스 모델과 박스의 작동 방식, 그리고 박스와 관련된 용어에 대해 이해하도록 노력한다.

CSS 박스 모델

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리, 모양 등)을 결정한다.

하나의 박스는 네 부분(영역)으로 이루어진다. 각 영역을 컨텐츠 영역, 안쪽 여백(패딩) 영역, 테두리(border) 영역, 그리고 바깥 여백(margin) 영역이라고 부른다.

컨텐츠 영역

컨텐츠 영역(Content area)은 컨텐츠 경계(Content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다. 컨텐츠 영역의 크기는 컨텐츠 너비(컨텐츠 박스 너비)와 컨텐츠 높이(컨텐츠 박스 높이)이다. 배경색과 배경 이미지를 가지고 있기도 하다.
box-sizing(*CSS 박스 모델은 테두리와 안쪽 여백을 너비와 높이에 더해 화면에 그리기에, 그 점 역시 고려를 하여야 하는데 box-sizing 속성을 이용해 그 방식을 바꿀 수 있다. content-box는 기본 CSS 박스 크기 결정법을 사용하며, border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100픽셀로 설정하고 테두리와 안쪽 여백을 추가하면 컨텐츠 영역이 줄어들어 총 너비 100픽셀을 유지한다. 대부분의 경우 이 편이 크기를 조절할 때 쉽다.) 속성이 기본값인 content-box이며 요소가 블록 레벨의 요소인 경우, 컨텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설정할 수 있다.

*box-sizing
요소의 너비와 높이를 계산하는 방법을 지정하는 속성.
CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 컨텐츠 박스 크기에만 적용된다. 요소의 테두리나 안쪽 여백이 있으면 너비와 높이에 더해 화면에 그린다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 안쪽 여백을 고려하여야 한다. box-sizing을 content-box로 하느냐, border-box로 하느냐에 따라 기본 CSS 결정법을 따를지 안 쪽 여백과 테두리의 크기 역시 요소의 크기로 고려할지 결정할 수 있다.

안쪽 여백(padding) 영역

안쪽 여백 영역(padding area)은 패딩 경계가 감싼 영역으로, 컨텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장한다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이이다. (*안쪽 여백의 두께는 padding이 결정한다. padding-~~을 사용할 수도 있다.)

테두리(border) 영역

테두리 영역(border area)은 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장하는 것이다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이이다. 테두리의 두께는 border-width와 단축 속성 border이 결정한다.

바깥 여백(margin) 영역

바깥 여백 영역(마진 영역, margin area)은 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만든다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이이다. 이 바깥 여백 영역의 크기는 margin-~~와 단축 속성 margin이 결정된다. 여백 상쇄(* 여러 블록의 위쪽 및 아래쪽 바깥 여백=마진은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합된다. 이를 여백 상쇄라 불리는데, 단 플로팅=floating 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않는다. 이쪽 참고)
비대체 인라인 요소가 차지하는 공간의 크기(줄높이에 기여하는 양)는 요소 주위에 테두리와 안쪽 여백이 표시되더라도 line-height(*가로 쓰기 모드에서 줄 상자의 높이를 설정하는 것)속성으로 결정한다는 점을 주의해야 한다.

박스 모델 VS 인라인 모델

-박스 모델, ‘브라우저의 좌우 공간을 가득 채우며 존재’,

-항상 세로로 배치

-내가 지정한 width, height 크기 값을 브라우저에 그대로 표현

-글자 관련 태그를 제외한 대부분의 태그들은 블럭 요소의 특징을 가짐

박스 모델은 가로 크기를 지정하지 않아도 브라우저를 가득 채운다. (이 때, 세로 크기가 없으면 브라우저에 박스의 크기가 표현되지 않으니 세로 크기는 필수로 넣어주어야만 한다.) 그래서 박스 모델은 언제나 ‘세로로’ 배치된다. 어떤 크기값을 넣어도 마찬가지이다.
p, div, h1~h6이 위와 같은 특징을 가지나, style 속성 등을 이용해 태그의 특징을 바꿀 수 있다.

-인라인 모델, ‘내가 지정한 width, height 크기 값이 표현되지 않음’,

-세로로 배치되지 않고 가로로 배치됨

-글자 관련 태그가 이와 같은 특징을 가짐

박스 모델 확인하는 법

이 박스 모델이 웹사이트에 적용되고 있음을 어떻게 확인할 수 있을까? 답은 개발자도구창에 있다. 크롬을 기준으로 할 때 F12를 누르면 개발자 도구 창이 나오는데, 이 곳의 Elements => Style 탭에서 각 요소의 박스 모델을 확인할 수 있다. 혹은 브라우저에 나타난 요소에 우클릭=> 검사를 클릭하여도 해당 요소의 박스 모델을 볼 수 있다.

Box- sizing 속성

이 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.

복사됨

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 컨텐츠 박스 크기에만 적용된다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그리는 것. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려하여야 한다.

이 때, box-sizing 속성을 이용하면 이 방식을 바꿀 수 있다.

-content-box는 기본 CSS 박스 크기 결정법을 사용한다. 요소의 너비를 100픽셀로 설정하면 콘텐츠 영역이 100픽셀 너비를 가지고 테두리와 안쪽 여백은 이에 더해진다.

-border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100픽셀로 설정하고 테두리와 안쪽 여백을 추가하면 컨텐츠 영역이 줄어들어 총 너비 100픽셀을 유지한다. 대부분의 경우 이 편이 크기를 조절하기 쉽다.

[참고 자료]

-https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model

-https://developer.mozilla.org/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model

-https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block

-https://www.tcpschool.com/css/css_boxmodel_boxmodel