CSS

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

목차
  1. height 예제 - 높이 (= 세로 길이)
  2. height 정의
  3. height 구문
  4. height 이슈 - 실제 높이 ★★★★★
  5. height 이슈 - 높이 100% 설정 (= 반응형 높이) ★★★★★

 

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.
  • 크로스브라우징 위한 웹 표준을 위해서 단위 꼭 표기.
  • 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 등 길이 단위 (예) 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 이상 최신브라우저 지원.
 
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
이 속성의 기본값으로 설정.

inherit 
부모 요소의 길이값 상속


 

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;
첫 번째가 상하, 두 번째가 좌우 의미 

※ border padding margin 속성값 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>
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>


결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인