차이

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

--- wiki:css:css_note:css_box_sizing [2021/03/16 18:05]
emblim98 만듦
+++ wiki:css:css_note:css_box_sizing [2023/01/13 18:44] (현재)
@@ 줄 14: / 줄 14: @@
 \\
 =====CSS Box Sizing=====
-CSS ''box-sizing''속성을 사용하여 요소의 총 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.\\
+CSS ''box-sizing''속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.\\
 \\
 =====Without the CSS box-sizing Property=====
@@ 줄 25: / 줄 25: @@
 ====예제====
 <code css>
+<!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>Difference</title>
+    <style>
+        .div1 {
+            width: 300px;
+            height: 100px;
+            border: 1px solid blue;
+        }
+        .div2 {
+            width: 300px;
+            height: 100px;
+            border: 1px dashed red;
+            padding: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="div1">
+        div1 (width: 300px, height: 100px).
+    </div>
+    <br>
+    <div class="div2">
+        div2 (width: 300px, height: 100px, padding: 50px).
+    </div>
+</body>
+</html>
 </code>
+\\
+상기 예제에서 동일한 지정 너비와 높이를 가진 두 개의 div 요소들(div1, div2)을 확인할 수 있습니다.\\
+하지만 div2가 지정 패딩 값을 가지고 있기 때문에 이 두 개의 div 요소들은 결과적으로는 다른 크기로 표시됩니다.\\
+\\
+이 문제를 ''box-sizing''속성을 사용하여 해결할 수 있습니다.\\
+\\
+=====With the CSS box-sizing Property=====
+''box-sizing'' 속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.\\
+\\
+요소에 ''box-sizing: border-box''을 설정하면, 패딩과 보더가 해당 요소의 너비와 높이에 포함됩니다.\\
+====예제====
+<code css>
+<!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>Difference</title>
+    <style>
+        .div1 {
+            width: 300px;
+            height: 100px;
+            border: 1px solid blue;
+            box-sizing: border-box;
+        }
+        .div2 {
+            width: 300px;
+            height: 100px;
+            border: 1px dashed red;
+            padding: 50px;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+    <div class="div1">
+        div1 (width: 300px, height: 100px).
+    </div>
+    <br>
+    <div class="div2">
+        div2 (width: 300px, height: 100px, padding: 50px).
+    </div>
+</body>
+</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,}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구