layout 최적화 코드 예시
<html class="h-full">
<body class="h-full">
<!-- Layout 시작 -->
<div class="min-h-screen md:h-dvh flex flex-col overflow-hidden">
<!-- Header -->
<div class="shrink-0">
...
</div>
<!-- Content 시작-->
<!-- 좌우로 배치됨 -->
<div class="flex flex-1 min-h-0 overflow-hidden">
<aside class="hidden md:block shrink-0">
...
</aside>
<!-- Main 유일한 스크롤 영역 -->
<main class="flex-1 min-h-0 overflow-y-auto">
<header>
...
</header>
<div>
... 화면이 변경되는 부분
</div>
</main>
<!-- Main 끝 -->
</div>
<!-- Content 끝-->
</div>
<!-- Layout 끝-->
</body>
</html>
컨텐츠 영역에만 스크롤이 생기는 최적화 Layout 코드.
화면이 깨지지 않도록
<html class="h-full">
<body class="h-full">
h-full
부모 박스에 h-full 이 없는 경우 flex-1 이 동작하지 않는다.
모바일 주소창에 따른 높이 반응형 (불필요한 스크롤 생기지 않도록 만듬)
<!-- Layout 시작 -->
<div class="min-h-screen md:h-dvh flex flex-col overflow-hidden"> • 모바일: 문서형
• 데스크톱: 앱형
h-dvh
모바일 주소창 대응
현실의 서비스는 이렇게 섞여 있다.
• 모바일: 글을 읽고, 스크롤한다
• 데스크톱: 구조를 보고, 작업한다
그래서 이 전략은 UX 기대치 자체를 기기별로 존중한다.
왼쪽 메뉴 반응형 UI
<!-- Content 시작-->
<!-- 좌우로 배치됨 -->
<div class="flex flex-1 min-h-0 overflow-hidden">
flex-row
가로로 박스 쌓기, 없어도 상관없음. flex 는 기본 쌓는 방식이 가로 쌓기임.
유일한 스크롤 공간 만들기
<!-- Main -->
{{-- Main: 유일한 스크롤 영역 --}}
<div class="flex-1 min-h-0 overflow-y-auto">
flex-1
나머지 빈 공간을 최대로 늘려준다.
min-h-0
컨텐츠 크기보다 줄어들 수 있음. 즉 글자 크기 보다 높이가 더 작아 질 수 있다.
이 코드 하나로 부모 박스 높이를 넘지 않는다. 넘어서는건 보이지 않거나, 스크롤로 만들 수 있다는 의미임.
overflow-auto
넘치는 컨텐츠는 자동으로 세로 스크롤을 만들어 준다.
Tailwind의 화면 높이 관련 유틸리티
고정 높이 계열
h-screen → height: 100vh
min-h-screen → min-height: 100vh
max-h-screen → max-height: 100vh
동적 뷰포트 대응 (모바일 최적화)
h-dvh
min-h-dvh
max-h-dvh
h-svh
h-lvh
세로 방향 레이아웃 에서는 flex-col 과 flex-1 조합이 일반적임.
flex-col
박스를 세로로 쌓음
flex-row
박스를 가로로 쌓음
flex-1
빈공간을 최대로 늘려서 박스를 만들어줌.
h-full
부모 박스에는 높이에 대한 속서이 추가되어 있어야 함.
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| npx tailwindcss init -p 에러 (0) | 2025.03.17 |
|---|---|
| PostCSS란? (0) | 2025.03.03 |
| Tailwindcss > peer (0) | 2024.09.20 |
| Tailwindcss - 지시어 Directives (base, components, utilities) (0) | 2024.03.05 |
| Tailwindcss - 개념 익히기 (0) | 2024.03.04 |
