들어가기 전에
height는 요소의 세로 크기를 정의하는 데 사용하는 속성입니다.
width와 마찬가지로 정확히는 content 영역의 높이를 지정하는 것입니다.
기본적으로는 width의 동작 방식과 같게 동작하지만, % 값을 가졌을 때의 동작 방식이 조금 다릅니다.
이 부분에 유의하여 height 속성에 대하여 알아보도록 하겠습니다.
핵심키워드
- height auto
- height percent
- box model
학습하기
11) 속성-height
height 속성
기본 값 : 0
< 속성 값 >
auto | 브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다. |
length | 고정값으로 지정합니다. (ex. px, em ....) |
percent | 부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다. |
height는 content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,
width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다.
예를 들어,
<div class="box"> box </div>
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 15px solid black;
}위와 같이 선언되어있다면 요소의 총 세로 크기는 150px이 됩니다.
앞선 설명에서 언급한 바와 같이 height도 padding, border 영역에 대해서 추가로 영향을 받기 때문입니다.
식으로 나타내면,
100px content + ( 10px * 2) padding + ( 15px * 2 ) border = 150px 가 된 것입니다.
%를 이용해서도 크기를 지정 할 수 있습니다.
<div class="parent">
<div class="child">
child
</div>
</div>
.parent {
width: 200px;
border: 10px solid black;
}
.child {
height: 50%;
background: red;
}
위와 같이 코드를 적용 했을때, .child 의 높이는 어떻게 적용 될까요?
실제로 확인해보면, height: auto일 때와 height: 50%일 때 차이가 없는 것을 확인할 수 있습니다.
왜 두 값의 차이가 없는 걸까요?
MDN에서 height 속성에 percent value에 대한 설명을 보면
"Containing Block의 높이에 대한 백분율로 높이를 정의합니다."고 나와 있습니다.
여기서 말하는 Containing Block은 부모를 의미한다고 생각하시면 됩니다.
즉, 현재 위의 코드에서는 부모가 명시적인 높이 값을 가지고 있지 않기 때문에
자식의 높이를 %값으로 지정해줘도 적용되지 않았던 것입니다.
부모 코드에 height: 200px로 명시적으로 높이 값을 지정해주면,
위와 같이 %값이 적용되는걸 볼 수 있습니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>height</title>
<style>
div {
height: 300px;
margin: 10px 20px;
padding: 30px;
border: 20px solid black;
}
</style>
</head>
<body>
<div> css height 속성 실습 </div>
</body>
</html>
생각해보기
height 또한 box-sizing 속성을 이용하여 기준값을 padding 영역, border 영역으로 바꿀 수 있습니다.
참고자료
- height
https://developer.mozilla.org
- The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
comment
기본값: 0
속성값:
auto: 브라우저에 의해 자동으로 계산하여 적용(요소의 레벨 기본 특성에 따라 다르게 동작)
length: 고정값으로 지정(ex. px, em ...)
percent: 부모 요소의 height에 상대적인 크기 지정(단, 부모요소가 명시적으로 height값이 있어야 함)
height는 content 영역의 높이를 제어할 때 사용하는데, 이 때 auto가 아닌 특정한 값을 지정하여 사용하면 width속성과 마찬가지로 box model영역에서 margin영역을 제외한 모든 영역에 대해 영향을 받는다.
width와 달리 부모요소에 명시적인 높이 값을 가지고 있지 않으면 자식의 높이를 %값으로 지정해도 적용되지 않음
Height
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 15px solid black;
}
height 100px + padding 상하 10 * 2 + border 15px * 2를 계산해서
총 height 값은 150px이 된다.
.parent {
width: 200px;
border: 10px solid black;
}
.child {
height: 50%;
background: red;
}
하위 요소 height 값에 %를 주기 위해선, 반드시 부모 요소의 height 값을 명시적으로 지정해줘야 적용이 된다.
21.08.05.
21.06.24
21.03.30
21.01.12
%는 누군가의 기본값이 있어야 한다.
부모 값을 지정해야 자식 요소에서 %가 적용된다!