• Q&A
  • 회원가입
  • 로그인

[box] CSS - height 속성 ★ - 세로길이 (= 높이 = height속성 = 하이트속성) (상속 X) (※ vh, vw 단위 소개)


height 예제

<style type="text/css">
div {width:200px; height:200px; border:solid 10px red; padding:20px; margin:70px;}
div {line-height: 100px; text-align:center; font-size:20px; font-weight:bold;
</style>
 
<div> 홈짱닷컴 (homzzang.com)</div>
 
height 정의
 
요소의 세로 길이 지정 (= 요소 높이 지정)

 


 
1.
크로스브라우징 위한 웹 표준을 위해서 단위 꼭 표기.
 
2.
height 속성 지정 안 된 경우엔, 해당 요소 안의 아이템 높이에 의해 자동 결정됨.
 
3.
일반적으로 요소의 실제 높이는 (height + padding + border)이며, 
box-sizing:border-box 속성을 사용 시 height 값만으로 설정 가능.
ps. 아래서 자세히 설명 예정.
 

height 구문

 

선택자 {height:속성값;}

 


[속성값]

 
auto
자동 (요소의 길이에 따라 자동 조정) (기본값)
 
px, cm 등 길이 단위
(예) 100px , 30cm
 
백분율 단위
부모 요소 높이의 % 만큼의 높이 설정.
만약, 해당 요소가 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 이상 최신브라우저 지원.
자세히 보기
 
 
initial
이 속성의 기본값으로 설정.

inherit 
부모 요소의 길이값 상속



[주의1] - 실제 높이 ★★★★★
 
요소의 실제 출력 세로 길이 
260px  = height + border x 2 + padding x 2
260px  = 200px  + 10px x 2   +   20px x 2
 
요소의 실제 차지 세로 길이
400px  = height + border x 2 + padding x 2 + margin x 2 
400px  = 200px  + 10px x 2     + 20px x 2        +  70px x 2 
 
※ 곱하기 2는 상하 양쪽 모두 정의될 경우 가정
 
※ border padding margin 속성값 1개
(ex) border:10px
상하좌우 의미

※ border padding margin 속성값 2개
(ex) border:10px 10px;
첫 번째가 상하, 두 번째가 좌우 의미 

※ border padding margin 속성값 3개

(ex) border:10px 10px 10px;
첫 번째가 상단, 두 번째가 좌우, 세 번째가 하단 의미

※ border padding margin 속성값 4개 :
(ex) border:10px 10px 10px 10px; 
첫 번째가 상단, 두 번째가 우측, 세 번째가 하단, 네 번째가 좌측 의미.

  
[주의 2] - height:100% 적용법 (= 반응형 높이 = div 높이 100% 설정) ★★★★★

 

height :100% 적용 위해선,
상위 요소인 <html>과 <body> 태그에 100% 값을 미리 정의 필요.

 


[예제1] 높이 100% 설정 O

 <style>
htmlbody {height:100%; margin:0; padding:0;}
div {height:100%; width:300px; background:red;}
</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단 레이아웃

<style>

* { 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>

 

<div id='hz'>

  <div class='left'>왼쪽</div>

  <div class='right'>오른쪽</div>

</div>


결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012