wiki:css:css_note:css_box_sizing

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_box_sizing [2021/03/16 18:41]
emblim98
+++ wiki:css:css_note:css_box_sizing [2023/01/13 18:44] (현재)
@@ 줄 105: / 줄 105: @@
 </html>
 </code>
+\\
+''box-sizing: border-box;'' 사용한 결과가 훨씬 더 좋기 때문에, 많은 개발자들이 웹 페이지의 모든 요소들이 이런 방식으로 작동하기를 원합니다.\\
+\\
+하기 코드는 모든 요소들이 이런 보다 직관적인 방식으로 크기가 부여되는 것을 보장합니다.\\
+많은 브라우저에서 이미 많은 폼 요소(form elements)들에 대해 ''box-sizing: border-box;''를 사용합니다.\\
+(하지만, 모든 폼 요소에 대해서는 아닙니다. 이는 inputs과 텍스트 영역(text areas)이 width:100% 설정에서 크기가 다르게 보이기 때문입니다.)\\
+\\
+이 속성을 모든 요소에 적용하는 것이 안전하고, 현명합니다.\\
+====예제====
+<code css>
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+  margin: 0;
+}
+* {
+  box-sizing: border-box;
+}
+input, textarea {
+  width: 100%;
+}
+</style>
+</head>
+<body>
+<form action="/action_page.php">
+  First name:<br>
+  <input type="text" name="firstname" value="Mickey"><br>
+  Last name:<br>
+  <input type="text" name="lastname" value="Mouse"><br>
+  Comments:<br>
+  <textarea name="message" rows="5" cols="30">
+  </textarea>
+  <br><br>
+  <input type="submit" value="Submit">
+</form>
+<p><strong>Tip:</strong> 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.</p>
+</body>
+</html>
+</code>
+=====CSS Box Sizint Property=====
+^ Property    ^ Description                                 ^
+| box-sizing  | 요소의 너비와 높이가 계산되는 방법을 정의합니다: 패딩과 테두리의 포함 여부  |
 {{tag>오션, CSS box-sizing,}}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_box_sizing.1615887669.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)