지난 포스팅 중 개발자 도구 뜯어먹기 : Elements 편에서 마지막에 Box-model에 대해서 짧게 언급하고 지나갔었다.
근데 이게 프론트엔드 면접 질문으로 나올 수도 있다기에 조금 더 정리해 보려고 작성해 본다.
먼저 읽고 오면 좋은 글
Box model
기본적으로 박스 모델에 대한 정의를 해보자면 모든 HTML 요소를 이루고 있는 구조다.
기본적인 구성은 margin, border, padding, content로 구성이 되어있다.
모든 HTML 요소를 이루고 있는 구조라고 하는 말은
HTML에서 사용한 각 태그마다 이 박스 모델을 가지고 있다는 것을 의미한다.
모든 태그가 이 박스 모델을 가지고 있다는 것은 결국 문서의 레이아웃을 구성하기 위함이라고 볼 수 있겠다.
박스 모델의 4개 요소를 조금 더 살펴보자.
Margin
Margin은 요소의 바깥 영역 여백을 담당하는 부분이다.
주로 요소와 요소와의 간격 설정을 위해 사용하곤 한다.
근데 이 margin을 사용하다 보면 마진 병합 현상(Margin Collapsing)이라는 것이 발생하곤 하는데
요 부분에 대해서는 차후에 다뤄보도록 하자.
Border
Border는 요소의 테두리를 담당하는 부분이다.
이 테두리를 기준으로 margin과 padding을 나누게 되고,
만약 content가 요소의 너비보다 클 경우, overflow: hidden을 통해 넘치는 content를 숨기게 되는 경우
숨기게 되는 기준이 border가 된다.
Padding
Padding은 요소의 내부 영역 여백을 담당하는 부분이다.
조금 더 자세하게 말하면 border와 content 사이의 영역을 담당한다.
나 같은 경우에는 배경색이나 테두리 스타일을 지정 한 뒤에,
디자인 적으로 좋은 레이아웃을 표현할 때 종종 사용하는 것 같다.
Content
Content는 요소의 내부 요소를 뜻한다.
지금까지 margin, padding, border는 모두 CSS 스타일을 통해 직접적으로 적용할 수 있는데
이 Content는 어떤 요소가 들어오게 될지 알 수 없다.
그냥 텍스트가 들어올 수도 있고, 또 다른 영역이 들어올 수도 있기 때문에
어떤 요소의 내부 요소라고 표현하는 게 맞겠다.
여기까지 박스 모델에 대한 내용을 알아봤는데, 그냥 끝내기에는 좀 아쉽다.
왜냐하면 박스 모델과 함께 엮여서 등장하는 몇 가지 개념들이 있는데
기왕 말 나온 김에 그 내용들도 한번 정리해 보려고 한다.
Block vs Inline
박스 모델이 HTML 문서의 레이아웃을 구성하기 위해 적용되는 개념이라고 했는데,
CSS에서 자주 사용하는 속성 중 display라는 속성이 있다.
이 속성은 해당 요소가 웹 페이지에서 어떻게 배치될 것인지를 정하는 속성인데
대표적으로 block과 inline이 있다.
block과 inline에 대해 간략하게 말하면 위의 사진처럼
block은 요소가 한 라인을 전부 차지하도록 하는 것이고,
inline은 요소 옆에 다음 요소가 위치할 수 있게 되는 것이다.
이 성질을 이용하면 레이아웃을 구성할 때 조금 더 쉽게 레이아웃을 구현할 수 있다.
근데 엄밀히 따지자면 이게 박스 모델과는 크게 상관없어 보이는데
block과 inline이 가지고 있는 특징과 박스 모델과 밀접하게 연관되어 있는 부분이 있다.
See the Pen Untitled by KIM_MS (@sstaar91) on CodePen.
위의 코드를 보면 display:block을 기본적으로 가지고 있는 div태그와
display:inline을 기본적으로 가지고 있는 span 태그에 각각 margin, padding, width, heigth를 적용하고 있다.
적용된 결과를 보면, block의 성질을 가지고 있는 div는 모든 속성이 적용되어 있는데,
inline의 경우는 일부분만 적용된 것을 볼 수 있다.
margin의 경우 좌, 우는 적용 됐지만, 상하는 적용이 되지 않았고,
width와 height는 전혀 적용이 되지 않고 있는 것을 볼 수 있다.
모든 요소가 박스 모델의 4가지 구성 요소로 이루어지긴 했지만
CSS의 속성에 따라서 적용이 되는 경우도 있고 아닌 경우도 있기에,
이러한 부분도 고려하면서 스타일을 적용해야 하겠다.
box sizing
CSS 속성 중에는 box-sizing이라는 속성이 있다.
해당 속성은 해당 속성을 적용한 요소의 박스 모델 기준을 잡아주는 속성이다.
위의 사진은 box-sizing에 대해 MDN에서 보여주고 있는 예시다.
여기서 box-sizing에는 border-box와 content-box가 있는데,
border-box는 기준을 border로 잡겠다는 의미가 되고,
content-box는 기준을 content로 잡겠다는 의미가 된다.
위의 예시 사진을 보면 두 개의 차이를 좀 더 명확하게 볼 수 있는데,
두 개의 사진 중 위의 사진을 보면 content-box로 기준을 잡고, width 값에 100px을 부여했고,
아래 사진은 border-box로 기준을 잡고, 마찬가지로 width 값에 100px을 부여했다.
정리해 보면, box-sizing이 content-box일 때는 content를 기준으로 잡기 때문에
width에 100px을 부여하면 content가 100px이 된다.
그 후 나머지 요소에 (padding, border) 추가적인 너비를 부여하게 된다.
반대로 border-box일 때는 border를 기준으로 잡아서 width에 100px을 부여하면
margin을 제외한 요소가 100px로 설정이 된다.
100px 안에서 padding, border의 영역이 계산이 되고, 나머지 부분이 content로 할당 되게 된다.
이렇다고 할 때, 레이아웃을 구성하는데 더 유리한 건 어떤 속성이 될까?
그렇다. border-box가 레이아웃을 구성하는데 더 유리하게 구성할 수 있다.
content 영역을 기준으로 잡게 되면 그에 맞게 모든 너비를 일일이 계산해야 할 경우가 있을 수 있는데
border를 기준으로 잡게 되면 전체 크기만 잡아주면 알아서 조절이 되기 때문에
레이아웃을 구성하는데 조금 더 유리한 속성이라고 볼 수 있겠다.
포스팅 작성에 참고한 감사한 글들
Hyodduru님 블로그 : display 속성에 관하여
'Stack > CSS' 카테고리의 다른 글
| CSS 적용 우선 순위 : 어려운 말로 CSS 명시도 (0) | 2024.11.04 |
|---|