본문 바로가기
Reference/CSS

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

by @webstoryboy 2023. 2. 4.

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

Reference/CSS

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

by @webs 2022. 02. 04.

max-width

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 : none | length | percentage | max-content | min-content | fit-content

/* 기본 속성 */ 
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)

.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.
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
max-width
max-content
min-content
fit-content

박스 요소와 관련된 속성

  • margin 속성은 요소의 바같쪽 여백을 일괄적으로 설정합니다.
  • margin-top 속성은 요소의 바같쪽, 위쪽 여백을 설정합니다.
  • margin-right 속성은 요소의 바같쪽, 오른쪽 여백을 설정합니다.
  • margin-bottom 속성은 요소의 바같쪽, 아래쪽 여백을 설정합니다.
  • margin-left 속성은 요소의 바같쪽, 왼쪽 여백을 설정합니다.
  • padding 속성은 요소의 안쪽 여백을 일괄적으로 설정합니다.
  • padding-top 속성은 요소의 안쪽, 위쪽 부분 여백을 설정합니다.
  • padding-right 속성은 요소의 안쪽, 오른쪽 부분 여백을 설정합니다.
  • padding-bottom 속성은 요소의 안쪽, 아래쪽 부분 여백을 설정합니다.
  • padding-left 속성은 요소의 안쪽, 왼쪽 부분 여백을 설정합니다.
  • border 속성은 요소의 테두리 속성을 일괄적으로 설정합니다.
  • border-top 속성은 요소의 테두리 위쪽 속성을 일괄적으로 설정합니다.
  • border-right 속성은 요소의 테두리 오른쪽 속성을 일괄적으로 설정합니다.
  • border-bottom 속성은 요소의 테두리 아래쪽 속성을 일괄적으로 설정합니다.
  • border-left 속성은 요소의 테두리 왼쪽 속성을 일괄적으로 설정합니다.
  • width 속성은 요소의 가로 크기를 설정합니다.
  • max-width 속성은 요소의 최대 가로 크기를 설정합니다.
  • min-width 속성은 요소의 최소 가로 크기를 설정합니다.
  • height 속성은 요소의 세로 크기를 설정합니다.
  • max-height 속성은 요소의 최대 세로 크기를 설정합니다.
  • min-height 속성은 요소의 최소 세로 크기를 설정합니다.
  • box-sizing 속성은 요소의 가로와 세로를 계산하는 방법을 설정합니다.

참고(Reference)


댓글