Vue CSS height 속성 값에 % 사용해보기

 

 

 

소개

 

 

window.innerHeight 를 사용하면 현재 브라우저의 높이를 알 수 있다.

그리고,  window event중에서 resize를 함께사용한다면  브라우저 높이가 바뀔때마다 변경된 높이 값을 얻을 수 있다.

 

이를 활용해서 현재 브라우저 높이에서 원하는 %만큼만 반환하는 함수를 만들어서 가져다 쓸 수 있게끔 코드를 작성해보았다 🐣

 

예를들어 현재 높이가 100인데, 그중에서 10%만 원한다면 ?

 값을 구하는 방법은,  10을 100으로 나누고,   현재 높이에 곱해주면 된다.
 그럼 100 * ( 10 / 100 )  에서   100 * 0.1 으로 계산하는것과 같으니까,  원하는 결과인 10을 얻을 수 있게된다 ..!

 

 

 

 

 

 

---

 

 

 

 

예시

 

 

 

 

 

👀 체험 해보기

Vue SFC Playground

 

<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>