study/clab-26-1/week3

[giscus[bot]]

study/clab-26-1/week3

SEOJing's 프론트엔드 개발 블로그 플랫폼

https://seojing.tjwlsrb1021.workers.dev/blog/study/clab-26-1/week3

[gmrdytjr12]

box-sizing: border-box가 적용된 width: 300px, padding: 20px, border: 10px solid black을 준 요소의 경우 테두리 및 안쪽 여백의 크기 또한 요소의 크기로 고려하여 계산하기 때문에 실제 화면에서의 너비는 주어진 너비인 300px을 유지하며, 콘텐츠가 자리하게 되는 영역의 경우 주어진 300px의 너비 중 20px의 padding으로 인해 총 40px, 또한 10px의 border에 의해 총 20px의 공간이 차지되므로 콘텐츠 영역의 너비는 300 - 40 - 20 = 240px가 됩니다.

[chjnett]

1.content-box는 패딩과 보더가 별도의 공간을 차지하면 계속 커지기에 너비= 300 220 210으로 답은 360px입니다

[jihyun808]

box-sizing: content-box은 콘텐츠 크기만 계산하기 때문에 패딩 20에 보더 10을 주면 총 너비는 콘텐츠+양쪽 패딩+양쪽 보더로 300+202+102, 360이 됩니다.

[jihyun808]

만약 box-sizing 속성을 border-box로 설정한다면 이는 패딩과 보더를 콘텐츠에 포함하기 때문에 계산이 달라집니다

[marxhtpfls]

3. 수직으로 붙은 블록 마진은 마진 겹침으로 인해 더 큰 값인 30px만 남습니다. 이를 해결하기 위해 padding, overflow hidden 등을 사용합니다.