인프런 커뮤니티 질문&답변
작성한 질문수
box-sizing: border-box
해결된 질문
작성
·
199
1
선생님 안녕하세요
강의에서 box 클래스안에
<div><div>
<div><div>
<div><div>
여기다가 box-sizing:border-box;
를 넣어주면 div의 border:width부분이 서로 겹치게 되는건가요?
그렇게 이해하면 될까요?
답변 1
1
box-sizing:border-box;를 주면 보더가 겹친다고 이해하시면 안됩니다.
예를들어,
<div></div>가 있는데 너비와 높이를 100픽셀 씩 주었다고 가정하게요. 그럼 이 div의 실제 크기는 100*100입니다.
그런데 <div></div>에 패딩을 상하좌우 10픽셀을 추가했다면 이 div의 실제 크기는 (100+10)*(100+10) 입니다.
또, <div></div>에 보더를 상하좌우 1픽셀을 추가했다면 이 div의 실제 크기는 (100+10+1)*(100+10+1) 입니다.
마지막으로 이 div에 box-sizing:border-box;를 주면 최초의 너비인 100*100을 늘리지 않고 패딩값과 보더의 값을 포함시킨다는 의미입니다. 곧, 패딩을 20을 주던 30을 주던 보더를 5를 주던 10을 주던 div의 실제 크기는 여전히 100*100 입니다. 이건 이 div에 box-sizing:border-box 주었기 때문입니다.
box-sizing의 기본값은 content-box입니다. 이건 패딩 보더를 추가하는 만큼 div의 너비와 높이가 커지라는 뜻이죠. 기본값이에요.
섹션 12. [코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드에서
[코딩웍스 02] CSS 핵심이론 PDF 교재 보시면 43페이지의 설명을 참조하시며 이해가 더 쉬우실거에요.
