Reference/CSS

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

by @webs 2022. 02. 04.

height

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

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

정의(Definition)

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

비교(Compare)

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

문법(Syntax)

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

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

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

속성(Property)

속성값	값(예)	설명
length	height: 2px	요소의 가로 크기를 CSS 단위를 통해 설정합니다.
percentage	height: 2%	요소의 가로 크기를 %를 통해 설정합니다.
auto	height: auto	요소의 가로 크기를 기본값으로 설정합니다.
max-content	height: max-content	요소의 가로 크기를 콘텐츠를 기준으로 최대로 설정합니다.
min-content	height: min-content	요소의 가로 크기를 콘텐츠를 기준으로 최소로 설정합니다.
fit-content	height: 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. I hope that even one person will be inspired or moved in the space I created. I don't have a house in Seoul, but I have a lot of my own houses here. The house can be built at any time without cost. I think being able to create my own space is a great attraction for coding. I want to design and design my own dream in one corner and live in the future.

height: 100px; height: 20%; height: 10em; height: none; height: max-content; height: min-content; height: 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. 
        I hope that even one person will be inspired or moved in the space I created. 
        I don't have a house in Seoul, but I have a lot of my own houses here. 
        The house can be built at any time without cost. 
        I think being able to create my own space is a great attraction for coding. 
        I want to design and design my own dream in one corner and live in the future.
    </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
height	○	○	○	○	○	○	○	○	○	○	○	○	○	○
max-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
min-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
fit-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○