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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== CSS Max-width ======
<WRAP left notice 80%>
  * description : CSS width, max-width, 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-15
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_max-width.aspp|CSS Layout - width and max-width]]
\\
\\
======CSS Layout - width and max-width======
=====Using width, max-width and margin: auto;=====
이전 챕터에서 언급한 것처럼; 블럭 레벨 요소는 항상 사용 가능한 화면의 전체 너비를 차지합니다>\\
\\
블럭 레벨 요소의 ''width''를 설정하면 해당 요소의 컨테이너 가장자리까지 늘어나지 않습니다.\\
그런 다음, 마진을 auto로 설정하여 해당 요소의 컨테이너 내부에서 가로로 중앙 정렬할 수 있습니다.\\
해당 요소는 지정된 너비를 차지하고, 남은 공간은 두 마진 사이에서 균등하게 분할됩니다.\\
\\
**Note:**브라우저 창이 해당 요소의 너비보다 작을 때, 브라우저는 그 웹페이지에 가로 스크롤 막대를 추가합니다.\\
\\
이런 상황에서 ''max-width''를 대신 사용하면 작은 창에 대한 브라우저의 처리가 개선됩니다.\\
사인트를 소형 장치에서 사용할 수 있도록 만들 때 중요합니다.\\
\\
====예제====
<code html>
<!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>CSS Max-width</title>
    <style>
        div.ex1 {
            width: 500px;
            margin: auto;
            border: 3px solid red;
        }

        div.ex2 {
            max-width: 500px;
            margin: auto;
            border: 3px solid green;
        }
    </style>
</head>

<body>

    <h2>CSS Max-width</h2>

    <div class="ex1">This div element has width: 500px;</div>
    <br>

    <div class="ex2">This div element has max-width: 500px;</div>

    <p>
        <strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the differnece between the two divs!
    </p>

</body>

</html>
</code>
  
{{tag>오션, CSS width, Max-width,  }}

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

사용자 도구

사이트 도구

문서 도구