본문 바로가기
Reference/CSS

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

by @webstoryboy 2023. 2. 4.

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

Reference/CSS

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

by @webs 2022. 02. 04.

height

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

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

.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.
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
height
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)


댓글