모바일에서는 url 주소 창, 네비게이션 바의 높이를 뷰 포트(스크린)높이에 포함 시켜 pc에서처럼 화면에 꽉 차지 않고 실제 화면보다 크게 잡혀서 스크롤이 생긴다.
window.innerHeight 로 현재 뷰 포트 크기 가져와서 재정의 하기
next.js 에서는 최상위에 위치한 _app.js에서 적용하기
//_app.js
function setScreenSize() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
}
useEffect(() => {
setScreenSize();
});
css 적용하기
/* 필요한 곳에 적용 */
height: calc(var(--vh, 1vh) * 100);
tailwindCss 적용하기
setScreenSize() 적용 후 tailwind.config.js에서 스타일 지정한 후 h-real-screen , min-h-real-screen 사용하면 된다.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
height: {
"real-screen": "calc(var(--vh) * 100)",
},
},
minHeight: {
"real-screen": "calc(var(--vh) * 100)",
},
},
plugins: [],
};
만약 header 높이 값 빼야 된다면 real-screen": "calc(var(--vh) * 100 - 50px) 이렇게 100 뒤에 header 높이 값(50px) 빼면 된다.
참고
'Javascript' 카테고리의 다른 글
반복문 (0) | 2024.08.24 |
---|---|
Promise와 axios, fetch (0) | 2024.08.24 |
배열에 특정 값이 포함되어 있는지 확인 (0) | 2024.08.24 |
타이머 함수 - setTimeout(), setInterval() (0) | 2024.08.24 |
문자열 자르기 (0) | 2024.08.24 |