height
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
height
CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing
이 border-box
라면 테두리 영역의 높이를 설정합니다.
시도해보기
min-height
와 max-height
속성은 height
를 덮어씁니다.
구문
css
/* 키워드 */
height: auto;
/* <length> */
height: 120px;
height: 10em;
/* <percentage> */
height: 75%;
/* 전역 값 */
height: inherit;
height: initial;
height: unset;
값
<length>
- : 높이의 절대값.
<percentage>
- : 컨테이닝 블록 높이의 백분율.
-
border-box
Experimental- : 앞선
<length>
또는<percentage>
가 요소의 보더 박스에 적용.
- : 앞선
-
content-box
Experimental- : 앞선
<length>
또는<percentage>
가 요소의 콘텐츠 박스에 적용.
- : 앞선
-
auto
- : 브라우저가 요소의 높이를 계산하고 선택.
-
fill
Experimental- : 글쓰기 방향에 따라
fill-available
인라인 크기 또는fill-available
블록 크기를 사용.
- : 글쓰기 방향에 따라
-
max-content
Experimental- : 본질적인 선호 높이.
-
min-content
Experimental- : 본질적인 최소 높이.
-
available
Experimental- : 컨테이닝 블록 높이에서 수평 여백, 테두리, 패딩을 제외한 값.
-
fit-content
Experimental-
: 다음 중 더 큰 값.
- 본질적인 최소 높이
- 본질적인 선호 높이와 사용 가능한 높이 중 작은 값
-
형식 구문
height =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
예제
HTML
html
<div id="taller">제 키는 50픽셀입니다.</div>
<div id="shorter">제 키는 25픽셀입니다.</div>
<div id="parent">
<div id="child">제 키는 부모의 절반입니다.</div>
</div>
CSS
css
div {
width: 250px;
margin-bottom: 5px;
border: 2px solid blue;
}
#taller {
height: 50px;
}
#shorter {
height: 25px;
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
결과
접근성 고려사항
페이지를 확대하거나 글꼴 크기를 늘렸을 때 height 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.
명세
Specification |
---|
CSS Box Sizing Module Level 3 # preferred-size-properties |
CSS Box Sizing Module Level 4 # sizing-values |
브라우저 호환성
BCD tables only load in the browser