Reference/CSS

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

by @webs 2022. 01. 26.

width

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

특징	설명
기본값	width: auto
적용	box
버전	CSS1
사용성	★★★★★

정의(Definition)

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

비교(Compare)

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

문법(Syntax)

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

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

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

속성(Property)

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

제너레이트(Generator)

박스 요소 (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.

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

HTML

CSS

SCRIPT

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

#sample1 .box-wrap {
    display: flex;
}
#sample1 .box-wrap .box {
    width: 48%;
    background-color: #cae3ff;
    margin-right: 2%;
}

//javascript none

호환성(Compatibility)

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