[CSS] ④ 박스 모델과 여백 상쇄

티스토리 뷰

프론트엔드/CSS

[CSS] ④ 박스 모델과 여백 상쇄

doeunnkimm 2022. 7. 13. 14:54

▶박스 모델

브라우저의 렌더링 엔진은 각 요소를 나타낼 때 CSS 박스 모델에 맞춰 그립니다.

박스 모델은 4가지 영역으로 이뤄지는데 cotent 영역, padding 영역, border 영역, margin 영역으로 구분됩니다.

content 영역은 텍스트나 하위 박스 모델 등을 나타내며 padding, border, margin은 순서대로 content 영역을 둘러싸는 영역입니다.

둘러싼 영역들은 margin, padding, border CSS 프로퍼티로 너비를 지정합니다.

박스 모델을 이해하기 위해 반드시 알아야 하는 CSS 프로퍼티가 존재합니다.

바로 box-sizing입니다. box-sizing 프로퍼티는 요소의 너비와 높이를 계산하는 방식을 지정합니다.

content-box, border-box 두 가지 값이 가능하며 브라우저 디폴트값은 conent-box입니다.

▷box-sizing: content-box

content 영역만을 기준으로 계산됩니다.

만약 해당 요소에 width를 100px 값을 준다면 content 영역의 너비만 100px이 되며 padding, border는 별개로 계산됩니다.

▷box-sizing: border-box

padding, border, content 영역을 합한 영역을 기준으로 계산됩니다.

만약 해당 요소의 width를 100px의 값을 준다면 padding, border, content 영역의 너비를 모두 합한 값이 100px입니다.

만약 양쪽 border의 합이 10px, 양쪽 padding의 합이 10px이라면 content 영역의 너비는 80px입니다.

비교를 위해 width, border, padding, margin 값을 고정한 뒤 콘텐츠 영역의 너비가 어떻게 되는지 확인해 보겠습니다.

필요에 따라 요소의 box-sizing 프로퍼티를 변경해 가면서 사용하기보다 두 값 중 선호하는 값 하나로 통일해 동일한 계산법으로 작성하는 것이 일관된 레이아웃을 작성하는데 도움이 됩니다.

또한 통일된 박스 모델을 사용하는 것이 요소에 적용된 스타일을 파악할 때도 용이합니다.

▶여백 상쇄

여백은 단순하게 너비나 높이에 더하여 계산될 것 같지만 실제로는 그렇게 동작하지 않습니다.

그 이유는 여백 상쇄 때문입니다.

인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상을 여백 상쇄라고 합니다.

이때 여백은 인접한 여백 중 큰 여백으로 상쇄됩니다.

<! DOCTYPE html>
<html>
    <head>
        <title>여백 상쇄 코드</title>
        <meta charset="utf-8" />
        <style>
            div {
                margin: 20px 0;
                border: 2px solid #ccc;
            }

            p {
                margin: 30px 0;
                border: 4px dashed #ddd;
            }
        </style>
    </head>
    <body>
        <p>bottom 영역 마진이 상쇄됩니다.</p>
        <p>top 마진이 상쇄되며 bottom 영역의 margin은 더 큰 30px이 됩니다.</p>
        <div>
            <p>이 문단은 위아래로 30px의 margin을 갖습니다.</p>
            <p>이 문단은 위아래로 30px의 margin을 갖습니다.</p>
        </div>
    </body>
</html>

이 코드의 실행 결과는 다음과 같습니다.

즉, 상하 여백이 겹치는 부분은 인접한 여백 중 큰 여백으로 상쇄 된 겁니다.

여기까지 박스 모델과 여백 상쇄에 대해 알아보았습니다 :)

728x90

LIST

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리 (0)	2022.07.13
[CSS] ⑤ flex를 이용한 레이아웃 만들어 보기 (0)	2022.07.13
[CSS] ③ CSS 우선순위와 명시도(Specificity) (0)	2022.07.06
[CSS] ② CSS 상속 & 선택자 (0)	2022.07.06
[CSS] ① CSS 작성방법 (0)	2022.07.06

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

doeunn.log

티스토리 뷰