요 CSS는 무슨 뜻인가요? -webkit-box-sizing:border-box;

요 CSS는 무슨 뜻인가요? -webkit-box-sizing:border-box;

QA

요 CSS는 무슨 뜻인가요? -webkit-box-sizing:border-box;

본문


-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box

 

요거 삭제하니까 자꾸 에러나네요.

이 질문에 댓글 쓰기 :

답변 5

해당 코드는 CSS의 box-sizing 속성을 전체 요소에 적용하는 코드입니다. box-sizing 속성은 요소의 크기 계산 방법을 변경하는 속성으로, border와 padding을 포함하여 요소의 전체 크기를 계산할 때 사용합니다.

 

위의 코드는 모든 요소에 대해 box-sizing 속성을 적용하고 있습니다. 일반적으로 이렇게 전체 요소에 적용하는 것은 CSS 스타일을 일관성 있게 유지하고 요소 크기 계산을 편리하게 하기 위한 방법입니다.

 

코드를 삭제했을 때 에러가 발생하는 이유는 해당 코드가 전체적인 스타일링에 영향을 주고 있기 때문입니다. 코드를 삭제하면 box-sizing 속성이 적용되지 않아서 기본값으로 동작하게 되고, 스타일 계산이 변경되어 예기치 않은 결과가 발생할 수 있습니다.

 

에러를 해결하려면, 해당 코드를 삭제하지 않고 유지하시는 것이 좋습니다.

* box-sizing이 border-box가 아닌경우


div { border:1px solid #000; padding:10px; width: 100px; height: 100px; }

해당 박스가 실제 확보되는 영역 크기가 122*122, 즉 border과 padding은 너비 높이 값외에서 추가됩니다. 

box-sizing이 border-box로 설정된 경우


div { border:1px solid #000; padding:10px; width: 100px; height: 100px; box-sizing:border-box; }

해당 박스가 실제 확보되는 영역 크기가 100*100, 즉 border과 padding는 너비 높이 값에서 계산합니다.

아래 코드를 html 파일로 저장하고 브라우저로 열어 개발자 도구를 확인하시면 됩니다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <style>
      .box1 { display:inline-block; width: 100px; height: 100px; padding: 10px; border:1px solid #ccc; }
      .box2 { display:inline-block; width: 100px; height: 100px; padding: 10px; border:1px solid #ccc; box-sizing: border-box;}
    </style>
  </head>
  <body>
    <div class="box1">122X122</div>
 
    <div class="box2">100X100</div>
  </body>
</html>

thumb-3661522857_1690261174.6149_730x408.png

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT