📖
모바일 브라우저에서 주소표시줄만큼 위로 올려서 표시하고 싶은 경우
페이지 정보
본문
모바일 브라우저에서 주소표시줄만큼 위로 올려서 표시하고 싶은 경우 — 즉, 브라우저 UI 요소 때문에 center가 너무 아래로 오는 현상을 방지하고 싶을 때.
방법 1: 100vh 대신 안전한 높이 사용하기
모바일에서 주소표시줄을 제외한 진짜 화면 높이를 사용하려면 100vh 대신 100dvh 또는 height: 100% + 안전 영역을 써야 합니다.[code]html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
justify-content: center; /* 수직 중앙 */
align-items: center; /* 수평 중앙 */
height: 100dvh; /* 주소표시줄 제외 실제 뷰포트 높이 (지원 브라우저에서만) */
box-sizing: border-box;
padding-top: env(safe-area-inset-top); /* 아이폰 notch 등 안전 영역 고려 */
}[/code]✅ 100dvh는 viewport height excluding browser UI를 의미하며, 최신 모바일 브라우저(Chrome, Safari 등)에서 주소표시줄이 가려지지 않도록 도와줍니다.
🧪 대체 방법: JS로 뷰포트 계산 (100dvh 미지원 브라우저용)[code]function setViewportHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', setViewportHeight);
window.addEventListener('load', setViewportHeight);[/code]그리고 CSS에서 이렇게 사용합니다:[code].container {
height: calc(var(--vh, 1vh) * 100);/* JS로 설정한 --vh를 사용 */
}[/code]
align-items: center → Flexbox의 수평 정렬 방식 (문제 해결 아님)
100vh → 모바일 주소표시줄 포함된 높이 (문제 발생 원인)
100dvh → 주소표시줄 제외 실제 뷰포트 높이 (권장)
JS + window.innerHeight → 모든 브라우저 대응 안전한 방법
✅ 전체 예시 정리[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: calc(var(--vh, 1vh) * 100); /* JS로 설정한 --vh를 사용 */
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f0;
}
.box {
padding: 20px;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">주소줄 위로 조정된 박스</div>
</div>
<script>
function setVh() {
// 1% of viewport height
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 페이지 로드 및 창 크기 변경 시 갱신
window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);
</script>
</body>
</html>[/code]
📌 요약
--vh → JavaScript에서 직접 계산 후 CSS 변수로 설정
calc(var(--vh, 1vh) * 100) → 주소줄 제외한 실제 화면 높이를 100%로 사용
resize, load 이벤트 → 브라우저 크기 변경 시 동적 반영
🛞 CSS 변수 없이 JavaScript만으로 요소의 높이를 동적으로 설정[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
}
.box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="box">주소표시줄 제외 높이 적용됨</div>
</div>
<script>
function setContainerHeight() {
const container = document.querySelector('.container');
container.style.height = window.innerHeight + 'px';
}
// 최초 설정 + 리사이즈 대응
window.addEventListener('load', setContainerHeight);
window.addEventListener('resize', setContainerHeight);
</script>
</body>
</html>[/code]
window.innerHeight: 실제 보이는 화면 영역의 높이 (주소표시줄 제외됨)
.container.style.height = ...: CSS로 설정된 것보다 우선 적용됨 (인라인 스타일)
✅ 장점
CSS 변수 없이 간단하게 적용 가능
모든 브라우저에서 안정적으로 동작
⚠️ 주의
동적 크기 조정이 필요한 경우(resize, orientationchange) 이벤트에 꼭 대응해야 합니다.
브라우저 리플로우 최소화를 위해 불필요한 호출은 피하세요.
방법 1: 100vh 대신 안전한 높이 사용하기
모바일에서 주소표시줄을 제외한 진짜 화면 높이를 사용하려면 100vh 대신 100dvh 또는 height: 100% + 안전 영역을 써야 합니다.[code]html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
justify-content: center; /* 수직 중앙 */
align-items: center; /* 수평 중앙 */
height: 100dvh; /* 주소표시줄 제외 실제 뷰포트 높이 (지원 브라우저에서만) */
box-sizing: border-box;
padding-top: env(safe-area-inset-top); /* 아이폰 notch 등 안전 영역 고려 */
}[/code]✅ 100dvh는 viewport height excluding browser UI를 의미하며, 최신 모바일 브라우저(Chrome, Safari 등)에서 주소표시줄이 가려지지 않도록 도와줍니다.
🧪 대체 방법: JS로 뷰포트 계산 (100dvh 미지원 브라우저용)[code]function setViewportHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', setViewportHeight);
window.addEventListener('load', setViewportHeight);[/code]그리고 CSS에서 이렇게 사용합니다:[code].container {
height: calc(var(--vh, 1vh) * 100);/* JS로 설정한 --vh를 사용 */
}[/code]
align-items: center → Flexbox의 수평 정렬 방식 (문제 해결 아님)
100vh → 모바일 주소표시줄 포함된 높이 (문제 발생 원인)
100dvh → 주소표시줄 제외 실제 뷰포트 높이 (권장)
JS + window.innerHeight → 모든 브라우저 대응 안전한 방법
✅ 전체 예시 정리[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: calc(var(--vh, 1vh) * 100); /* JS로 설정한 --vh를 사용 */
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f0;
}
.box {
padding: 20px;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">주소줄 위로 조정된 박스</div>
</div>
<script>
function setVh() {
// 1% of viewport height
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 페이지 로드 및 창 크기 변경 시 갱신
window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);
</script>
</body>
</html>[/code]
📌 요약
--vh → JavaScript에서 직접 계산 후 CSS 변수로 설정
calc(var(--vh, 1vh) * 100) → 주소줄 제외한 실제 화면 높이를 100%로 사용
resize, load 이벤트 → 브라우저 크기 변경 시 동적 반영
🛞 CSS 변수 없이 JavaScript만으로 요소의 높이를 동적으로 설정[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
}
.box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="box">주소표시줄 제외 높이 적용됨</div>
</div>
<script>
function setContainerHeight() {
const container = document.querySelector('.container');
container.style.height = window.innerHeight + 'px';
}
// 최초 설정 + 리사이즈 대응
window.addEventListener('load', setContainerHeight);
window.addEventListener('resize', setContainerHeight);
</script>
</body>
</html>[/code]
window.innerHeight: 실제 보이는 화면 영역의 높이 (주소표시줄 제외됨)
.container.style.height = ...: CSS로 설정된 것보다 우선 적용됨 (인라인 스타일)
✅ 장점
CSS 변수 없이 간단하게 적용 가능
모든 브라우저에서 안정적으로 동작
⚠️ 주의
동적 크기 조정이 필요한 경우(resize, orientationchange) 이벤트에 꼭 대응해야 합니다.
브라우저 리플로우 최소화를 위해 불필요한 호출은 피하세요.
댓글목록
등록된 댓글이 없습니다.
  |