개인적으로 CSS의 핵심은 박스모델(Box Model)이라고 생각한다. 레이아웃을 잡으려면 배치를 잘 해야 하는데, 이 배치를 잘하기 위해서는 박스를 잘 다루어야 한다. 하지만 박스모델에 대한 이해없이 배치를 하다보면 레이아웃이 이리저리 튀어나와 엉망진창이 되기 십상이다.
나 역시도 대강 감으로 레이아웃을 잡다보니 꽤나 고생을 했다..^^
레이아웃 마스터를 꿈꾸며 이번 기회에 박스모델에 대해서 꼼꼼히 정리해도록 하자.
박스모델(Box Model)
브라우저의 렌더링 엔진은 HTML 문서의 요소를 사각형의 박스 모양으로 표현한다.
프론트엔드를 다룬다면 밥먹듯이 열게 되는 개발자 도구의 style 탭을 보면 최하단에 형형색깔로 표시된 박스를 확인할 수 있다.
특정 요소를 선택하면 해당 요소의 width-height, padding-margin, border 등의 수치가 박스에 표시된다.
박스의 형태를 자세히 살펴보면 다음과 같다.
박스 모델은 총 4개의 영역으로 구성되어 있다. 각각의 영역을 자세히 살펴보도록 하자.
1) content
content 영역은 요소의 텍스트나 이미지 등 실질적인 내용이 위치한 영역이다. content의 width와 height, background-color 등을 포함하고 있다.
2) padding
content와 border 사이의 간격, 즉 안쪽 여백이다. 이 영역의 크기는 안쪽 여백 박스의 width와 height이다. 안쪽 여백에는 각각 top-bottom-left-right의 수치가 부여된다.
3) border
content와 padding 주변을 감싸는 테두리 영역이다. border의 두께를 설정할 수 있다.
4) margin
border의 바깥 여백 영역이다. 기본적으로 margin은 투명하기 때문에 눈에 보이지는 않는다. padding과 마찬가지로 top-bottom-left-right값이 따로 부여된다.
💡 margin, padding property 지정하는 방법
i) 1개의 값으로 지정
1개의 값을 지정하면 top-bottom-left-right에 동일한 값이 적용된다.
ii) 2개의 값으로 지정
2개의 값을 지정하면 순서대로 top-bottom과 left-right에 값이 적용된다.
iii) 3개의 값으로 지정
3개의 값을 지정하면 순서대로 top → left-right → bottom에 값이 적용된다.
iiii) 4개의 값으로 지정
4개의 값을 지정하면 정시계 방향대로 top → right → bottom → left에 값이 적용된다.
box-sizing
열심히 쓰면서도 감이 잘 안 와서 알쏭달쏭했던 box-sizing!
간단히 말하자면, box-sizing property는 width와 height를 결정하는 방법이다.
보통 tag에 지정하는 width와 height값은 content 영역에 부여된다. 따라서 추가적으로 padding이나 border를 주게 되면 실제 width와 height의 값이 지정한 것보다 커지게 된다.
레이아웃을 잡을 때 화면의 비율에 맞춰 pixel값을 정확히 주어야 하는 경우, width와 height값이 유동적으로 변하게 되면 레이아웃이 깨질 수도 있다. 이 때, box-sizing의 border-box property를 지정하면 width와 height값을 고정시킬 수 있어 레이아웃을 직관적으로 사용할 수 있다.
1) content-box
CSS 기본값으로, width와 height는 content 영역만 포함한다. padding과 border가 추가되면 그만큼 width와 height 값이 증가한다.
2) border-box
width, height 값에 content, padding, border가 모두 포함된다.
Ref
[MDN] CSS 기본 박스 모델 입문
[사이트] poiemaweb | box-model
[사이트] tcpschool | box-model
