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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Box Sizing ======
<WRAP left notice 80%>
  * description : CSS box-sizing Property 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-16
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====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=====
기본적으로, 요소의 너비와 높이는 아래와 같이 계산됩니다.\\
\\
너비 + 패딩 + 보더 = 요소의 실제 너비\\
높이 + 패딩 + 보더 = 요소의 실제 높이\\
\\
요소의 너비/높이를 설정할 경우, 해당 요소의 지정 너비와 높이에 보더와 패딩이 추가되기 때문에 해당 요소가 설정보다 더 크게 표시될 때가 있다는 것을 의미합니다.\\
====예제====
<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

사용자 도구

사이트 도구

문서 도구
