1. 소개
window.innerHeight 를 사용하면 현재 브라우저의 높이를 알 수 있다.
그리고, window event중에서 resize를 함께사용한다면 브라우저 높이가 바뀔때마다 변경된 높이 값을 얻을 수 있다.
이를 활용해서 현재 브라우저 높이에서 원하는 %만큼만 반환하는 함수를 만들어서 가져다 쓸 수 있게끔 코드를 작성해보았다 🐣
예를들어 현재 높이가 100인데, 그중에서 10%만 원한다면 ?
값을 구하는 방법은, 10을 100으로 나누고, 현재 높이에 곱해주면 된다.
그럼 100 * ( 10 / 100 ) 에서 100 * 0.1 으로 계산하는것과 같으니까, 원하는 결과인 10을 얻을 수 있게된다 ..!
2. 예시
Vue SFC Playground
play.vuejs.org
<html />
<template>
<!-- 매개변수(퍼센트)가 없다면, height 100% 를 적용하고 -->
<div class="sidebar-wrapper" :style="getBrowerHeight()">
<!-- 매개변수(퍼센트)가 존재한다면, height를 해당 %만큼만 적용 (70프로만 적용) -->
<div class="sidebar" :style="getBrowerHeight(70)"> 민우의 코딩일지 </div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
// 브라우저 높이에 대한 변수 및 함수
const browerHeight = ref(window.innerHeight);
const getBrowerHeight = (percent) => {
return percent ? { height : `${browerHeight.value * (percent / 100)}px` }
: { height : `${browerHeight.value}px` }
};
onMounted(() => {
// 마운트에 윈도우 이벤트 하나만 추가해주면 준비 끝 !
window.addEventListener("resize", () => { browerHeight.value = window.innerHeight; });
});
</script>
<!-- 사실, 아래 CSS는 필요없음 -->
<style>*{margin: 0px;padding:0px;}.sidebar-wrapper{display:flex;justify-content:center;align-items:center; border: 3px dashed gold;}.sidebar{width:500px;background:aqua;border:5px dashed burlywood;}</style>
'💻 FullStack > Vue.js' 카테고리의 다른 글
| Vue 간단하게 이미지 미리보기 만들어보기 (Base64, FileReader) (0) | 2024.01.13 |
|---|---|
| Vue 시작일과 종료일로 진행률(%) 표시하기 (0) | 2023.09.19 |
| Composition API 방식에서 refs를 쓰고싶다면 (0) | 2023.09.12 |
| Vue.js 코드 작성할 수 있는 사이트 소개 (Playground) (0) | 2023.08.21 |
| 데이터 시각화 - Chart.js 라이브러리 (0) | 2023.08.20 |