목차
height 예제 - 높이 (= 세로 길이) height 정의 height 구문 height 이슈 - 실제 높이 ★★★★★ height 이슈 - 높이 100% 설정 (= 반응형 높이) ★★★★★
height 예제 - 높이 (= 세로 길이)
div {width:200px; height:200px ; border:solid 10px red; padding:20px; margin:70px;}
</style>
<div> 홈짱닷컴 (homzzang.com)</div>
height 정의
높이 (= 세로 길이) 지정.
1.
크로스브라우징 위한 웹 표준을 위해서 단위 꼭 표기
height 속성 지정 안 된 경우엔, 해당 요소 안의 아이템 높이에 의해 자동 결정됨. 이 경우, 로딩 지연으로 이미지 콘텐츠 등 레이아웃이 중첩되는 현상 발생할 수도 있으니 주의. (min-height 속성 설정해서 해결 가능. 관련글 ) 일반적으로 요소의 실제 높이는 (height + padding + border)이며, box-sizing:border-box 속성을 사용 시 height 값만으로 설정 가능. ps. 아래서 자세히 설명 예정.
2.
모든 브라우저 지원.
3. MDN height 예제보기
height 구문
selector {height : auto|length |% |vh |vmin |vmax |initial|inherit ;}
[속성값]
auto
length
px, em, cm 등 길이 단위
% 백분율 단위
만약, 해당 요소가 body 요소의 자식요소일 땐, html・body 요소에도 100% 줘야 인식. (예) html,body {height:100%}
vh 단위 ★
viewport 높이의 1/100 (= 1%). (예1) 부모요소 높이가 1000px 일 때, 1vh = 10px (예2) 50vh 경우, viewport 높이의 50% cf. vw 단위 - viewport 너비의 1/100 (= 1%). (예1) 부모 요소 너비가 1000px 일 때, 1vw = 10px (예2) 50vw 경우, viewport 너비의 50%
vmin 단위 - vh・vw 중 최소값.
(예) viewport 너비 1000px, 높이 700px 일 때, 1vmin = 7px
vmax 단위 - vh・vw 중 최대값.
(예) viewport 너비 1000px, 높이 700px 일 때, 1vmax = 10px
※ vh・vw・vmin・vmax 경우, IE9 이상 최신브라우저
지원 .
max-content
본질적인 선호 높이
min-content
본질적인 최소 높이
fit-content
사용 가능한 공간을 사용하되, max-content (예: min(max-content, max(min-content, Stretch))) 초과 X
fit-content(20em )
사용 가능한 공간을 지정된 인수(예: min(max-content, max(min-content, <length-percentage>))로 대체한 내용 적합 공식을 사용.
initial
이 속성의 기본값으로 설정.
height 이슈 - 실제 높이 ★★★★★
요소 실제 높이 height (260) + border (10 x 2) + padding (20 x 2)
요소 실제 차지 높이height (260) + border (10 x 2) + padding (20 x 2) + margin (70 x 2)
PS. 곱하기 2는 상하 양쪽 모두 정의될 경우 가정
PS. border, padding, margin 계산
※ border padding margin 속성값 1개 : (ex) border: 10px
상하좌우 의미 ※ border padding margin 속성값 2개 : (ex) border: 10px 10px;
첫 번째가 상하, 두 번째가 좌우 의미
3개 : (ex) border: 10px 10px 10px ;
첫 번째가 상단, 두 번째가 좌우, 세 번째가 하단 의미 ※ border padding margin 속성값 4개 : (ex) border: 10px 10px 10px 10px; 첫 번째가 상단, 두 번째가 우측, 세 번째가 하단, 네 번째가 좌측 의미.
height 이슈 - 높이 100% 설정 (= 반응형 높이) ★★★★★
height : 100% 적용 위해선, 상위 요소인 <html> 과 <body> 태그에 100% 값을 미리 정의 필요 .
[예제1] 높이 100% 설정 O
<style>html , body { height:100%; margin:0; padding:0;}
div {height:100%
</style>
<div>홈짱닷컴 (homzzang.com)</div>
결과보기
PS1. 위 소스에서 html, body {height:100%; margin:0; padding:0;} 부분 없으면 높이 100% 적용 X
<style>
div {height:100% ; width:300px; background:red;}
</style>
<div>홈짱닷컴 (homzzang.com)</div>
결과보기 PS2. vh 단위 사용하면, html・body 요소에 100% 안 줘도 부모 요소 너비 100% 차지 가능.
<style>
div {height:100vh; width:300px; background:red;}
</style>
<div>홈짱닷컴 (homzzang.com)</div>
[예제2] - 가로 3단 레이아웃
* { padding: 0; margin: 0; }
html, body, #hz, #hz .left, #hz .right {
min-height: 100% !important;
height: 100%;
}
#hz {
width: 100%;
background: blue;
}
#hz .left {
width: 30%;
float:left;
background: yellow;
}
#hz .right {
width: 30%;
float:right;
background: yellow;
}
<div id='hz'>
<div class='left'>왼쪽</div>
<div class='right'>오른쪽</div>
</div>
결과보기
