사용자 도구

사이트 도구


wiki:css:css_note:css_box_sizing

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판
이전 판
wiki:css:css_note:css_box_sizing [2021/03/16 19:47]
emblim98
wiki:css:css_note:css_box_sizing [2023/01/13 18:44] (현재)
줄 106: 줄 106:
 </code>  </code> 
 \\ \\
-''box-sizing: border-box;'' 속성을 사용한 결과가 더 좋기 때문에, 많은 개발자들이 웹 페이지의 모든 요소들이 이와 같은 방식으로 작동하기를 원하고 있습니다.\\+''box-sizing: border-box;'' 사용한 결과가 훨씬 더 좋기 때문에, 많은 개발자들이 웹 페이지의 모든 요소들이 이런 방식으로 작동하기를 원니다.\\
 \\ \\
-하기 예제에서 이 속성을 사용하여 모든 요소의 크기가 보다 직관적인 방식으로 조정고 있음을 확인할 수 있습니다.\\ +하기 코드는 모든 요소들이 이런 보다 직관적인 방식으로 크기가 부여는 것을 보장합니다.\\ 
-많은 브라우저에서 다양한 폼 요소(form elements)에 ''box-sizing: border-box;''가 이미 사용되고 있지만,\\ +많은 브라우저에서 이미 많은 폼 요소(form elements)에 대해 ''box-sizing: border-box;''를 사용합니다.\\ 
-모든 폼 요소에 대해서는 아닙니다. 이것은 inputs과 텍스트 영역(text areas)이 width:100% 설정되었지만 크기가 다르게 보이는 것에서 확인할 수 있습니다.\\ +(하지만, 모든 폼 요소에 대해서는 아닙니다. 이는 inputs과 텍스트 영역(text areas)이 width:100% 설정에서 크기가 다르게 보이기 때문입니다.)\\  
 +\\ 
 +이 속성을 모든 요소에 적용하는 것이 안전하고, 현명합니다.\\ 
 ====예제==== ====예제====
 <code css> <code css>
줄 150: 줄 153:
 </html> </html>
 </code> </code>
 +
 +=====CSS Box Sizint Property=====
 +^ Property    ^ Description                                 ^
 +| box-sizing  | 요소의 너비와 높이가 계산되는 방법을 정의합니다: 패딩과 테두리의 포함 여부  |
 +
 +
 +
      
 {{tag>오션, CSS box-sizing,}} {{tag>오션, CSS box-sizing,}}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_box_sizing.1615891631.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)