동적 패딩 구현하기 : window의 크기에 반응하는 padding

안녕하세요. 미래를 개발하는 남자... ㅎ 김준수입니다. 스터디에서 진행하고 있는 프로젝트를 진행하는 도중, 레퍼런스를 보고 있는데 참 신기한 것을 봤습니다. 요즘은 모바일 환경에서도 웹에 접속을 많이 하기 때문에 웹 페이지를 반응형으로 다 만듭니다. 그걸 쉽게 구현할 수 있는 것이 바로 부트스트랩 같은 프레임 워크를 이용하는 것이죠. 저도 왠만하면 부트스트랩이나 vue 같은 경우는 quasar를 통해서 구현을 하고 있었습니다.

 

그런데 이 레퍼런스는 조금 다른 방식을 이용해서 반응을 하도록 만들었더라구요? 바로 window의 width크기에 반응해서 요소의 right padding이 줄어들었다가 늘어났다가 하는 방식으로 반응을 하더라구요. 처음에 쉬워보여서 바로 구현에 들어갔다가 두드려 맞고 나왔습니다. 그러다 밤에 잠시 생각해보다 새로운 방법이 생각나서 구현의 실마리를 찾았습니다. 

 

1. 기준이 될 window의 width 정하기

vue.js에서 브라우저의 처음 크기를 가져오는 것이 첫번째 입니다. onMounted 함수를 통해서 mount 될 때 window의 창 크기를 가져와서 mount 될 때의 window의 width라는 mountedWindowWidth 변수를 만들어서 창 크기의 값을 담아줍니다.

 

처음에는 window의 처음 크기를 기준으로 하려고 했는데 그렇게 되면 기준이 계속 바뀌어서 요소의 위치가 계속 변하게 되니까, 결국 기준이 될 window의 width를 가장 큰 window의 width로 정해야 합니다. 요즘은 정말 큰 모니터도 많지만 보편적인 모니터 크기인 1920 X 1080인 FHD 모니터를 기준으로 maxWindowWidth를 1920으로 설정합니다.

 

<script setup>
const maxWindowWidth = 1920;
const initRightPadding = 500;
</script>

 

 

그리고 그 맥스 Width에서 요소의 rightPadding의 초깃값을 변수로 세팅해줍니다.

 

2. 동적 padding을 적용할 요소에 스타일 넣기

 

<template>
    <div :style="{ paddingRight: rightPadding + 'px'}">
		  <input placeholder="입력 후 Enter"/>
          <button class="search-btn">Search(F3)</button>
	</div>
</template>

 

이렇게 동적 padding을 적용할 요소에 :style을 통해서 변수를 넣어 패딩값이 변수의 값에 따라서 변할 수 있도록 해줍니다. 그렇게 되면 이제 저 변수가 변할때마다 패딩이 변하게 되겠죠?

 

const rigthPadding = ref(500);

 

그리고 변수를 선언해주고, 초깃값으로 500을 주게 되면 500px만큼의 padding이 적용되게 됩니다. 그렇게 되면 아마 이렇게 될 것입니다.

 

이렇게 오른쪽 끝과의 거리가 500px의 패딩값을 가진 요소가 만들어졌습니다. 이제 window의 사이즈가 변할 때마다 저 변수의 값이 변하도록 해주면 되겠죠?

 

3. 'resize' eventlistener 등록

그 다음 해야할 일은 onMounted 함수 안에서 'resize' eventlistener를 능록하는 것입니다. 그리고 window가 resize될 때마다 실행 될 메서드를 선언하고, 그 메서드에서 창 크기에 따라서 rightPadding 변수가 변하도록 해주면 되겠죠?

 

먼저 빈 메서드부터 선언해보도록 하겠습니다.

 

const adjustPadding = () => {
	
}

 

이 안에 들어갈 로직은 다음에 구현해보도록 하고, 바로 onMounted 함수에 eventlistener를 등록을 하게되면

 

onMounted(() => {
  window.addEventListener('resize', adjustPadding);

  mountedWindowWidth.value = window.innerWidth;
});

 

이렇게 되고, onUnmounted 함수에 removeEventListener를 통해서 unMount시에 추가한 resize 이벤트를 삭제해주도록 하겠습니다.

 

onUnmounted(() => {
  window.removeEventListener('resize', adjustPadding);
})

 

 

4. 동적 padding 로직 구현

로직을 한 번 구현해보도록 하겠습니다. 제가 생각한 로직은 바로 처음에 마운트 당시의 window의 width크기를 가지고, 변하는 width크기의 차이만큼 padding의 크기를 변화하는 것입니다.

 

그러면 아까 선언한 메서드에 현재 window의 width 크기를 받는 변수를 선언해서 값을 받아두고, 그 값과 mount 시의 width 크기를 담은 변수와의 차이를 더해주면 됩니다. 하지만 이렇게 하면 계속해서 기준이 되는 값이 변해서 브라우저의 창의 width 크기마다 패딩이 다르게 적용되니까 max width를 정해두고 구현합니다.

 

로직자체는 단순합니다.

 

const adjustPadding = () => {

  const windowWidth = window.innerWidth;

  rightPadding.value = initRightPadding + (windowWidth - maxWindowWidth);

};

 

메서드가 실행될 때 현재의 window의 width 크기를 담고, 초깃값에 현재창 크기에 max크기를 뺀 값을 더하면 됩니다. 그러면 창 크기가 변한 만큼 rightPadding도 변하게 되서 창 크기에 반응해서 rightPadding이 줄어들었다가 늘어났다가 하게 됩니다. 쉽죠.

 

그런데 이렇게만 하면 rightPadding이 처음 생길때 무조건 초기에 세팅한대로 생성이되기 때문에 onMounted 함수에 adjustPadding 메서드를 한번 실행 시켜주고, rightPadding 초깃값을 0으로 바꿔주면 완성됩니다.

 

const rightPadding = ref(0);

const maxWindowWidth = 1920;
const initRightPadding = 500;

const adjustPadding = () => {

  const windowWidth = window.innerWidth;

  rightPadding.value = initRightPadding + (windowWidth - maxWindowWidth);
  
};

onMounted(() => {
  window.addEventListener('resize', adjustPadding);
  adjustPadding();
});

onUnmounted(() => {
  window.removeEventListener('resize', adjustPadding);
});

 

이렇게 되면 이제 창 크기에 맞추서 오른쪽 Padding이 동적으로 변경되는 코드가 완성됩니다. 예전에는 정말 이런거 보면서 아무 생각도 못했는데 이제는 웹 페이지 하나하나 볼때마다 너무 신기합니다. 이렇게 재밌는 코딩 모두 즐깁시다!!