처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
퀴즈 / CSS / 문제

CSS에서 box-sizing: border-box를 적용하면 어떤 변화가 생기나요?

쉬움 MDN Web Docs
보기 및 정답
A width와 height에 padding과 border가 포함되어 계산된다
B align-self 속성은 플렉스 컨테이너 전체의 정렬 방식에 영향을 준다
C margin collapse는 좌우 방향에서도 동일하게 발생하는 현상이다
D box-shadow는 요소의 크기 계산에 포함되어 레이아웃에 영향을 준다

해설

box-sizing: border-box를 적용하면 요소의 width, height에 padding과 border 두께가 포함됩니다. 기본값인 content-box에서는 padding과 border가 width에 추가되어 실제 크기가 더 커지지만, border-box는 지정한 크기 내에서 계산되어 레이아웃 관리가 편합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기