Reference/CSS

max-width 속성은 요소의 최대 가로 크기를 설정합니다.

by @webs 2022. 02. 04.

max-width

박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다.

특징	설명
기본값	max-width: none
적용	box
버전	CSS1
사용성	★★★☆☆

정의(Definition)

max-width 속성은 요소의 최대 가로 크기를 설정합니다.

비교(Compare)

width 속성은 요소의 가로 크기를 설정합니다.
max-width 속성은 요소의 최대 가로 크기를 설정합니다.
min-width 속성은 요소의 최소 가로 크기를 설정합니다.
height 속성은 요소의 세로 크기를 설정합니다.
max-height 속성은 요소의 최대 세로 크기를 설정합니다.
min-height 속성은 요소의 최소 세로 크기를 설정합니다.

문법(Syntax)

/* 기본 속성 */ 
max-width: 10px;        /* 단위 설정 */
max-width: 1em;        /* 단위 설정 */
max-width: 10%;        /* 퍼센트 설정 */

/* 키워드 속성 */ 
max-width: none;       
max-width: max-content;     
max-width: min-content;     
max-width: fit-content;    

/* 전역 속성 */
max-width: inherit;   /* 상속 */
max-width: initial;   /* 초기화 */
max-width: revert;    /* 원래대로 돌리기 */
max-width: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
none	max-width: none	요소의 최대 가로 크기를 설정하지 않습니다.
length	max-width: 200px	요소의 최대 가로 크기를 CSS 단위를 통해 설정합니다.
percentage	max-width: 200%	요소의 최대 가로 크기를 %를 통해 설정합니다.
max-content	max-width: max-content	요소의 가로 크기를 콘텐츠를 기준으로 최대로 설정합니다.
min-content	max-width: min-content	요소의 가로 크기를 콘텐츠를 기준으로 최소로 설정합니다.
fit-content	max-width: fit-content	요소의 가로 크기를 콘텐츠를 기준으로 설정합니다.

예제1(Sample)

박스 요소 (bakcground, width, height, margin, padding, border)

background

width(px)

height(px)

margin(px)

padding(px)

border(px)

.box {
    background-color: #a2cbfa;
    width: 200px;
    height: 200px;
    margin: 0px;
    padding: 0px;
    border: 0px solid #a2cbfa;
}

예제1(Sample)

박스모델의 크기를 설정한 예제입니다.

어렸을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다.

Since I was young, I liked to make my own space and I liked my own attic.

max-width: 200px; max-width: 20%; max-width: 30em; max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content;

HTML

CSS

SCRIPT

<div class="box-wrap">
    <div class="box">
        <div>어렸을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다.</div>
    </div>
    <div class="box">
        <div>Since I was young, I liked to make my own space and I liked my own attic.</div>
    </div>
</div>

#sample1 .box-wrap {
    display: flex;
}
#sample1 .box-wrap .box {
    width: 49%;
    background-color: #cae3ff;
    padding: 10px;
    margin-right: 2%;
}
#sample1 .box-wrap .box span {
    border: 1px solid #64acff;
    display: inline-block;
}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
max-width	○	○	○	○	○	○	○	○	○	○	○	○	○	○
max-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
min-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
fit-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○