CSS Max-width

====== CSS Max-width ====== * description : CSS width, max-width, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-15 \\ \\ =====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''를 대신 사용하면 작은 창에 대한 브라우저의 처리가 개선됩니다.\\ 사인트를 소형 장치에서 사용할 수 있도록 만들 때 중요합니다.\\ \\ ====예제====






    
    
    
    CSS Max-width
    




    CSS Max-width

    This div element has width: 500px;
    


    This div element has max-width: 500px;

    
        Tip: Drag the browser window to smaller than 500px wide, to see the differnece between the two divs!