-
질문 & 답변
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
해결됨
box-sizing: border-box
21.04.17 17:08 작성 조회수 144
1
선생님 안녕하세요
강의에서 box 클래스안에
<div><div>
<div><div>
<div><div>
여기다가 box-sizing:border-box;
를 넣어주면 div의 border:width부분이 서로 겹치게 되는건가요?
그렇게 이해하면 될까요?
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
10. 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)
강의실 바로가기
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2021.04.17
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페이지의 설명을 참조하시며 이해가 더 쉬우실거에요.
답변 1