Difference

====== CSS Box Sizing ====== * description : CSS box-sizing Property * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-16 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css3_box-sizing.asp|CSS Box Sizing]] \\ \\ =====CSS Box Sizing===== CSS ''box-sizing''속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.\\ \\ =====Without the CSS box-sizing Property===== 기본적으로, 요소의 너비와 높이는 아래와 같이 계산됩니다.\\ \\ 너비 + 패딩 + 보더 = 요소의 실제 너비\\ 높이 + 패딩 + 보더 = 요소의 실제 높이\\ \\ 요소의 너비/높이를 설정할 경우, 해당 요소의 지정 너비와 높이에 보더와 패딩이 추가되기 때문에 해당 요소가 설정보다 더 크게 표시될 때가 있다는 것을 의미합니다.\\ ====예제====





    
    
    
    Difference
    


    
        div1 (width: 300px, height: 100px).
    
    

    
        div2 (width: 300px, height: 100px, padding: 50px).

\\ 상기 예제에서 동일한 지정 너비와 높이를 가진 두 개의 div 요소들(div1, div2)을 확인할 수 있습니다.\\ 하지만 div2가 지정 패딩 값을 가지고 있기 때문에 이 두 개의 div 요소들은 결과적으로는 다른 크기로 표시됩니다.\\ \\ 이 문제를 ''box-sizing''속성을 사용하여 해결할 수 있습니다.\\ \\ =====With the CSS box-sizing Property===== ''box-sizing'' 속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.\\ \\ 요소에 ''box-sizing: border-box''을 설정하면, 패딩과 보더가 해당 요소의 너비와 높이에 포함됩니다.\\ ====예제====






    
    
    
    Difference
    


    
        div1 (width: 300px, height: 100px).
    
    

    
        div2 (width: 300px, height: 100px, padding: 50px).

\\ ''box-sizing: border-box;'' 사용한 결과가 훨씬 더 좋기 때문에, 많은 개발자들이 웹 페이지의 모든 요소들이 이런 방식으로 작동하기를 원합니다.\\ \\ 하기 코드는 모든 요소들이 이런 보다 직관적인 방식으로 크기가 부여되는 것을 보장합니다.\\ 많은 브라우저에서 이미 많은 폼 요소(form elements)들에 대해 ''box-sizing: border-box;''를 사용합니다.\\ (하지만, 모든 폼 요소에 대해서는 아닙니다. 이는 inputs과 텍스트 영역(text areas)이 width:100% 설정에서 크기가 다르게 보이기 때문입니다.)\\ \\ 이 속성을 모든 요소에 적용하는 것이 안전하고, 현명합니다.\\ ====예제====










  First name:

  

  Last name:

  

  Comments:

    
  


  
 

Tip: Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.

=====CSS Box Sizint Property===== ^ Property ^ Description ^ | box-sizing | 요소의 너비와 높이가 계산되는 방법을 정의합니다: 패딩과 테두리의 포함 여부 | {{tag>오션, CSS box-sizing,}}