자바스크립트 Local Storage를 이용한 투명한 배경 화면 구현

15 Sep 2023

javascript

투명한 배경 화면을 구현하는 방법 중에 하나는 자바스크립트의 Local Storage를 활용하는 것입니다. Local Storage는 웹 브라우저에 데이터를 저장하는 기능을 제공하며, 이를 사용하여 사용자의 화면 투명도 설정 값을 저장하고 불러올 수 있습니다.

1. HTML 구조

먼저, 투명한 배경을 가지는 요소를 만들기 위해 HTML 구조를 작성해야 합니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

<div id="background"></div>

위의 코드는 background라는 id를 가진 div 요소를 만듭니다.

2. CSS 스타일링

다음으로, 해당 요소의 CSS 스타일을 설정하여 투명한 배경을 만듭니다. 아래는 예시입니다.

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  pointer-events: none;
}

위의 CSS 코드는 position 속성을 fixed로 설정하여 요소를 고정 위치시킵니다. top, left, width, height 속성을 100%로 설정하여 화면 전체를 차지하도록 합니다. background-color 속성은 투명한 검은색을 지정하고, rgba 함수를 사용하여 투명도를 조절합니다. z-index 속성으로 배경 요소를 최상위로 겹치도록 만들고, pointer-events 속성을 none으로 설정하여 배경 위로 마우스 이벤트를 막습니다.

3. JavaScript를 통한 Local Storage 활용

이제 자바스크립트를 사용하여 사용자의 화면 투명도 설정 값을 Local Storage에 저장하고 불러오는 기능을 추가합니다. 아래는 예시입니다.

const backgroundElement = document.getElementById('background');

// Local Storage에서 화면 투명도 설정 값을 가져오는 함수
function getOpacitySetting() {
  const opacitySetting = localStorage.getItem('opacity');
  return opacitySetting ? parseFloat(opacitySetting) : 0.5;
}

// Local Storage에 화면 투명도 설정 값을 저장하는 함수
function setOpacitySetting(opacity) {
  localStorage.setItem('opacity', opacity);
}

// 투명도 설정 값을 가져와서 배경 요소의 투명도를 적용하는 함수
function applyOpacitySetting() {
  const opacity = getOpacitySetting();
  backgroundElement.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
}

// 초기 로딩 시 투명도 설정 값을 적용합니다.
applyOpacitySetting();

// 사용자가 화면 투명도 설정을 변경할 때마다 값을 저장합니다.
// 이벤트 리스너를 추가하여 변경 사항을 감지합니다.
backgroundElement.addEventListener('click', function() {
  const currentOpacity = getOpacitySetting();
  const newOpacity = currentOpacity === 0.5 ? 0.8 : 0.5;
  setOpacitySetting(newOpacity);
  applyOpacitySetting();
});

위의 자바스크립트 코드는 background 요소를 가져와서 변수에 할당합니다. getOpacitySetting 함수는 Local Storage에서 opacity라는 키로 저장된 값을 가져오고, 없으면 기본값인 0.5를 반환합니다. setOpacitySetting 함수는 인자로 전달된 투명도 값을 Local Storage에 저장합니다. applyOpacitySetting 함수는 가져온 투명도 값을 사용하여 배경 요소의 투명도를 적용합니다. 마지막으로, background 요소에 클릭 이벤트 리스너를 추가하여 사용자가 투명도 설정을 변경할 때마다 값을 저장하고 투명도를 적용합니다.

마무리

위의 방법을 따르면 자바스크립트 Local Storage를 이용하여 투명한 배경 화면을 구현할 수 있습니다. 사용자의 화면 투명도 설정 값을 저장하고 불러와서 실시간으로 적용할 수 있습니다. 이를 통해 사용자 경험을 개선하고 웹 애플리케이션 디자인에 다양한 효과를 적용할 수 있습니다.

#자바스크립트 #LocalStorage