목차

CSS Max-width

  • description : CSS width, max-width,
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-15



Source of the article



CSS Layout - width and max-width

Using width, max-width and margin: auto;

이전 챕터에서 언급한 것처럼; 블럭 레벨 요소는 항상 사용 가능한 화면의 전체 너비를 차지합니다>

블럭 레벨 요소의 width를 설정하면 해당 요소의 컨테이너 가장자리까지 늘어나지 않습니다.
그런 다음, 마진을 auto로 설정하여 해당 요소의 컨테이너 내부에서 가로로 중앙 정렬할 수 있습니다.
해당 요소는 지정된 너비를 차지하고, 남은 공간은 두 마진 사이에서 균등하게 분할됩니다.

Note:브라우저 창이 해당 요소의 너비보다 작을 때, 브라우저는 그 웹페이지에 가로 스크롤 막대를 추가합니다.

이런 상황에서 max-width를 대신 사용하면 작은 창에 대한 브라우저의 처리가 개선됩니다.
사인트를 소형 장치에서 사용할 수 있도록 만들 때 중요합니다.

예제

<!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>
, , ,