AAtomic CSS

height

요소의 높이를 설정합니다. px, rem, %, vh 단위를 지원하며, auto와 inherit 키워드도 사용할 수 있습니다.

클래스 목록

클래스 패턴CSS예시
h{N}pxheight: {N}pxh100px, h200px, h300px
h{N}remheight: {N}remh10rem (100px), h20rem (200px)
h{N}pheight: {N}%h50p (50%), h100p (100%)
h{N}vhheight: {N}vhh50vh, h100vh
haheight: auto브라우저 자동 계산
hiheight: inherit부모 값 상속

단위 비교

동일한 시각적 높이를 4가지 단위로 표현한 비교입니다.

px (픽셀) — h100px

h100px

고정 100px. 화면 크기와 무관하게 항상 동일

rem (root em) — h10rem

h10rem

10rem = 100px (1rem = 10px). 루트 폰트 크기에 비례

% (퍼센트) — h100p

h100p

부모 높이의 100%. 부모에 높이가 정의되어야 동작

vh (viewport height) — h20vh

h20vh

뷰포트 높이의 20%. 창 크기에 따라 변동

rem 환산 가이드

html { font-size: 10px } 기준으로 1rem = 10px입니다. 20px 이상은 rem 사용을 권장합니다.

px 값rem 값클래스
20px2remh2rem
40px4remh4rem
60px6remh6rem
80px8remh8rem
100px10remh10rem
150px15remh15rem
200px20remh20rem
300px30remh30rem
400px40remh40rem

클래스별 상세

h{N}pxheight: {N}px

픽셀 단위로 고정 높이를 설정합니다. 아이콘, 아바타, 구분선 등 작은 요소에 적합합니다.

<!-- 고정 높이 아바타 -->
<div class="w48px h48px br100p bg6366F1 df jcc aic cFFFFFF fs14px">
  AB
</div>

<!-- 고정 높이 구분선 -->
<div class="w100p h1px bg27272A"></div>

<!-- 고정 높이 썸네일 -->
<div class="w200px h150px bg18181B br8px oh">
  <img src="thumb.jpg" class="w100p h100p ofc" />
</div>

px 크기 비교

h32px
h48px
h64px
h100px

h{N}remheight: {N}rem

rem 단위로 높이를 설정합니다. 1rem = 10px이므로 h10rem은 100px, h20rem은 200px입니다.

<!-- 카드 썸네일 영역 -->
<div class="h20rem bg18181B br8px oh">
  <img src="cover.jpg" class="w100p h100p ofc" />
</div>

<!-- 히어로 섹션 -->
<div class="h40rem df jcc aic bg18181B">
  <h2 class="fs3-6rem fw800 cFAFAFA">히어로 제목</h2>
</div>

<!-- rem 크기 비교 -->
<div class="h4rem bg27272A p8px br4px mb8px df aic">h4rem = 40px</div>
<div class="h6rem bg27272A p8px br4px mb8px df aic">h6rem = 60px</div>
<div class="h10rem bg27272A p8px br4px df aic">h10rem = 100px</div>

rem 크기 비교

h4rem
h6rem
h10rem
h15rem

h{N}pheight: {N}%

부모 요소의 높이를 기준으로 백분율 높이를 설정합니다. p는 %를 의미합니다.

<!-- 부모 높이의 100% (부모에 높이 필수) -->
<div class="h300px bg18181B">
  <div class="h100p bg6366F1 df jcc aic cFFFFFF">
    부모의 100% (300px)
  </div>
</div>

<!-- 부모 높이의 50% -->
<div class="h200px bg18181B">
  <div class="h50p bg34D399 df jcc aic c000000">
    부모의 50% (100px)
  </div>
</div>

주의: 부모 높이 필수

h100p가 동작하려면 부모 요소에 명시적 높이가 설정되어 있어야 합니다. 부모에 높이가 없으면 퍼센트 높이는 무시됩니다. h100vh를 쓰거나 부모 체인 전체에 높이를 설정하세요.

h{N}vhheight: {N}vh

뷰포트 높이를 기준으로 높이를 설정합니다. h100vh는 화면 전체 높이이며, 풀스크린 레이아웃에 필수입니다.

<!-- 풀스크린 히어로 -->
<div class="h100vh df jcc aic bg18181B">
  <div class="tac">
    <h1 class="fs4-8rem fw800 cFAFAFA">풀스크린 히어로</h1>
    <p class="fs16px c71717A mt16px">화면 전체를 채우는 섹션</p>
  </div>
</div>

<!-- 헤더-메인-푸터 레이아웃 -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header class="py16px px2rem bg18181B">헤더</header>
  <main class="p2rem">메인 콘텐츠 (남은 공간 전부)</main>
  <footer class="py16px px2rem bg18181B">푸터</footer>
</div>

<!-- 절반 높이 섹션 -->
<div class="h50vh df jcc aic bg27272A">
  화면 절반 높이
</div>

자주 쓰는 조합

h100vh화면 전체 높이. 풀스크린 레이아웃에 필수
h100vh df fdc전체 높이 + flex 세로 배치 (헤더-메인-푸터)
minh100vh최소 전체 높이. 콘텐츠가 많으면 늘어남
h50vh화면 절반 높이. 히어로 섹션에 활용
h100vh df jcc aic전체 화면 가운데 정렬. 로딩, 에러 페이지

haheight: auto

브라우저가 콘텐츠에 맞게 높이를 자동으로 계산합니다. 대부분의 요소는 기본값이 auto이며, 고정 높이를 해제할 때 사용합니다.

<!-- 고정 높이 해제 -->
<div class="h200px md-ha">
  기본 200px, 1024px 이하에서 콘텐츠에 맞게 자동
</div>

<!-- 콘텐츠에 맞는 자동 높이 (기본 동작) -->
<div class="ha bg18181B p2rem br8px">
  <p>이 영역은 콘텐츠만큼만 높이를 차지합니다.</p>
  <p>내용이 늘어나면 높이도 같이 늘어납니다.</p>
</div>

height: auto vs 명시적 높이

ha는 콘텐츠만큼만 높이를 차지합니다. 콘텐츠가 없으면 0px이 됩니다. 최소 높이가 필요하면 minh와 함께 사용하세요.

hiheight: inherit

부모 요소의 height 값을 그대로 상속받습니다. 부모의 고정 높이를 자식에게 전달할 때 사용합니다.

<!-- 부모 높이 상속 -->
<div class="h200px">
  <div class="hi bg18181B p16px df aic">
    부모의 200px을 그대로 상속
  </div>
</div>

반응형

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 높이를 조절할 수 있습니다.

<!-- 풀스크린 → 모바일 자동 높이 -->
<div class="h100vh sm-ha">
  기본 풀스크린, 768px 이하에서 콘텐츠에 맞게
</div>

<!-- 고정 높이 → 모바일 축소 -->
<div class="h40rem sm-h20rem">
  기본 400px, 768px 이하에서 200px
</div>

<!-- 히어로 반응형 -->
<div class="h100vh md-h50vh sm-h30rem df jcc aic">
  데스크탑: 전체, 태블릿: 절반, 모바일: 300px
</div>
클래스 조합동작
h100vh sm-ha기본 풀스크린 → 768px 이하에서 auto
h40rem sm-h20rem기본 400px → 768px 이하에서 200px
h100vh md-h50vh기본 100vh → 1024px 이하에서 50vh
h200px md-ha기본 200px → 1024px 이하에서 auto
h100vh md-h50vh sm-h30rem기본 100vh → 1024px 50vh → 768px 300px

팁 & 주의사항

풀스크린은 h100vh

화면 전체 높이를 채우려면 h100vh를 사용하세요. h100p는 부모 높이가 정의되어야만 동작합니다.

height: auto가 기본

대부분의 요소는 기본적으로 height: auto이므로 콘텐츠만큼 높이를 차지합니다. 명시적 높이가 필요할 때만 height 클래스를 사용하세요.

퍼센트 높이의 함정

h100p는 부모 요소에 명시적 높이가 설정되어야 동작합니다. 부모 체인 전체에 높이가 없으면 무시됩니다. 확실한 전체 높이가 필요하면 h100vh를 사용하세요.

모바일 vh 주의

모바일 브라우저에서 h100vh는 주소창 높이를 포함하여 실제 화면보다 클 수 있습니다. 필요시 JavaScript로 실제 뷰포트 높이를 계산하세요.

max-heightmin-heightwidthbox-sizing