답변 5개
댓글을 작성하려면 로그인이 필요합니다.
아래 코드를 html 파일로 저장하고 브라우저로 열어 개발자 도구를 확인하시면 됩니다.
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p> <head></p>
<p> <meta charset="UTF-8" /></p>
<p> <meta http-equiv="X-UA-Compatible" content="IE=edge" /></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0" /></p>
<p> <title>Document</title></p>
<p> </p>
<p> <style></p>
<p> .box1 { display:inline-block; width: 100px; height: 100px; padding: 10px; border:1px solid #ccc; }</p>
<p> .box2 { display:inline-block; width: 100px; height: 100px; padding: 10px; border:1px solid #ccc; box-sizing: border-box;}</p>
<p> </style></p>
<p> </head></p>
<p> <body></p>
<p> <div class="box1">122X122</div></p>
<p> </p>
<p> <div class="box2">100X100</div></p>
<p> </body></p>
<p></html></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
* box-sizing이 border-box가 아닌경우
</p>
<p>div { border:1px solid #000; padding:10px; width: 100px; height: 100px; }</p>
<p>해당 박스가 실제 확보되는 영역 크기가 122*122, 즉 border과 padding은 너비 높이 값외에서 추가됩니다.
box-sizing이 border-box로 설정된 경우
</p>
<p>div { border:1px solid #000; padding:10px; width: 100px; height: 100px; box-sizing:border-box; }</p>
<p>해당 박스가 실제 확보되는 영역 크기가 100*100, 즉 border과 padding는 너비 높이 값에서 계산합니다.
답변에 대한 댓글 2개
어디서 찾아 보나요?
댓글을 작성하려면 로그인이 필요합니다.
해당 코드는 CSS의 box-sizing 속성을 전체 요소에 적용하는 코드입니다. box-sizing 속성은 요소의 크기 계산 방법을 변경하는 속성으로, border와 padding을 포함하여 요소의 전체 크기를 계산할 때 사용합니다.
위의 코드는 모든 요소에 대해 box-sizing 속성을 적용하고 있습니다. 일반적으로 이렇게 전체 요소에 적용하는 것은 CSS 스타일을 일관성 있게 유지하고 요소 크기 계산을 편리하게 하기 위한 방법입니다.
코드를 삭제했을 때 에러가 발생하는 이유는 해당 코드가 전체적인 스타일링에 영향을 주고 있기 때문입니다. 코드를 삭제하면 box-sizing 속성이 적용되지 않아서 기본값으로 동작하게 되고, 스타일 계산이 변경되어 예기치 않은 결과가 발생할 수 있습니다.
에러를 해결하려면, 해당 코드를 삭제하지 않고 유지하시는 것이 좋습니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인