[Javascript] 날씨에 따라 배경 이미지 변경하기

openweathermap 으로 얻어진 날씨 정보에 따라 배경 이미지를 변경하는 방법을 알아보자! 

 

활용할 값을 변수에 담아주기

먼저 날씨 정보 중 내가 사용할 온도와 날씨 정보를 변수에 담아 저장하자. 

    const temp = result.main.temp;
    const weather = result.weather[0].main;

날씨 정보 한글로 변환하기

weather는 날씨에 따라 Clear, Rain, Mist 등으로 표현된다. 나는 영어가 아닌 한글로 화면에 정보를 나타내고 싶어서 얻은 결과값을 weatherValue에서 찾아 한글로 변환할 수 있도록 코드를 작성했다. 

 

const weatherValue = {
  Clear: "맑음",
  Rain: "비",
  Thunderstorm: "뇌우",
  Snow: "눈",
  Mist: "옅은 안개",
  Drizzle: "이슬비",
  Clouds: "흐림",
  Fog: "안개",
  Haze: "실안개",
};

const displayWeatherInfo = (temp, weather) => {
  changeBackgroundImg(weather);
  document.querySelector(".weather").textContent = weatherValue[weather];
  document.querySelector(".temp").textContent = temp.toFixed(1) + " °C";
};

 

내가 설정해둔 날씨보다 더 다양한 날씨 정보가 있다. 추가적인 내용은 weather Conditions을 참고하면 된다!!

 

Weather Conditions - OpenWeatherMap

날씨에 따라 배경 이미지 변경하기

날씨에 따라 변경될 배경화면 이미지는 unsplash 사이트에서 다운을 받았다. images 폴더 내에 background 폴더에다가 각 날씨에 맞게 파일명을 지정해주었다. 예를 들어 Clear할 때 띄우고 싶은 이미지는 Clear.jpg 이다.

배경 이미지를 차곡차곡 넣어두었다!

배경 이미지를 자바스크립트로 어떻게 설정해줄 수 있을까? 템플릿 리터럴로 background 이미지의 url을 설정해주면 된다. 

 

// js

const changeBackgroundImg = (weather) => {
  const wrapper = document.querySelector(".wrapper");
  wrapper.style.background = `url('/images/background/${weather}.jpg') no-repeat`;
  wrapper.style.backgroundSize = "cover";
  wrapper.style.backgroundPosition = "center";
};

// css

.wrapper {
  width: 100vw;
  height: 100vh;
}

 

배경 이미지를 설정할 때 헤맸던 부분이 있다. 배경 이미지를 css로 설정할 때는 object-fit : cover 속성을 써서 화면을 꽉 채웠었다. 그래서 처음에 objectFit 속성을 썼지만 효과가 없었다.

 

  wrapper.style.background = `url('/images/background/${weather}.jpg') no-repeat`;
  wrapper.style.objectFit = "cover";

 

대신 backgroundSize로 화면을 꽉 채우도록 사진 비율을 넓게 만들었다. 둘 다 CSS 속성인데 왜 backgroundSize는 사용할 수 있고 objectFit은 사용할 수 없을까? 만능 선생님 Chat GPT에게 물어봤다!

 

backgroundSize 속성과 object-fit 속성은 서로 다른 개념이기 때문에 동작하는 방식이 다릅니다.

backgroundSize: backgroundSize 속성은 배경 이미지의 크기를 조정하는 CSS 속성입니다. 이를 사용하여 배경 이미지를 컨테이너에 맞게 확대 또는 축소하고, 커버 또는 포함시킬 수 있습니다. 이는 CSS에서 배경 이미지에 대한 제어를 제공하는 속성입니다.object-fit: object-fit 속성은 img, video, object 등과 같은 대체 요소에 대해 적용되는 CSS 속성입니다. 이를 사용하여 대체 요소의 내용을 컨테이너에 맞게 조정할 수 있습니다. object-fit은 요소 내의 내용을 제어하는 속성이며, 배경 이미지와는 관련이 없습니다.

JavaScript로 직접적으로 object-fit 속성을 구현하는 것은 불가능합니다. 이는 CSS의 일부분으로서 브라우저가 처리하는 기능입니다. JavaScript는 CSS를 동적으로 조작하고 요소에 스타일을 적용할 수 있지만, object-fit과 같은 내용에 대한 렌더링 제어는 JavaScript로 직접적으로 수행할 수 없습니다.

따라서, backgroundSize는 배경 이미지에 대한 CSS 속성으로 JavaScript를 통해 조작할 수 있지만, object-fit은 다른 유형의 대체 요소에 적용되는 CSS 속성으로 JavaScript를 통해 직접 조작할 수 없는 것입니다.

 

이 글을 보고 나서 예전에 img 태그로 배경 이미지를 설정한 후 그 이미지에 object-fit 속성을 부여한 것이었지, background-Img를 url로 설정한 후 사이즈 조절을 object-fit으로 한 게 아니었다는 걸 깨달았다. 용도가 다르니 objeect-fit이 적용이 안되는 것이 당연했다.....

 

backgroundSize : cover을 설정했을 때와 하지 않았을 때의 이미지는 어떤 모습일까? 아래와 같이 cover를 설정했을 때 배경 이미지가 화면을 꽉 채운다는 걸 알 수 있당! 굿~~

backgroundSize : cover 를 설정하지 않았을 때

backgroundSize : cover 를 설정했을 때

그럼 backgroundPosition은 무엇 때문에 사용했을까? backgroundPosition은 이름만 봐도 알 수 있는 배경 이미지의 위치를 지정하는 속성이다. 

backgroundPosition이 없을 때

backgroundPosition이 없을 때

움짤로 쪘는데 용량 초과된다고 거절당했다 ㅠㅠ 흑흑 ...

 

이 속성은 브라우저의 크기를 줄이거나 늘렸을 때 사진 이미지의 위치를 결정해준다 ! 첫 번째는 속성을 주지 않아서 브라우저의 너비를 줄였을 때 사진의 위치가 그대로 있다. 반면 두 번째에서는 center로 위치를 정해놨기 때문에 브라우저 너비를 왼쪽에서 줄이든 오른쪽에서 줄이든 정중앙 부분의 사진이 보여지게 된당~!

구름이 많아 배경이미지가 바꼈다!

큐큐 요새 이 창을 띄워놓고 할 일을 하다가 날씨에 따라 배경 이미지가 바뀌는 걸 구경하는 재미가 있다><이렇게 내가 만들고 싶었던 걸 만들고 그걸 이용하는 게 정말 즐겁다! 

 

다음에는 화면에 보이는 것처럼 스탑워치를 만들어놨는데 어떻게 스탑워치를 만들었는지 다뤄보겠당! 남은 하루 홧팅~!!