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을 참고하면 된다!!
날씨에 따라 배경 이미지 변경하기
날씨에 따라 변경될 배경화면 이미지는 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를 설정했을 때 배경 이미지가 화면을 꽉 채운다는 걸 알 수 있당! 굿~~
그럼 backgroundPosition은 무엇 때문에 사용했을까? backgroundPosition은 이름만 봐도 알 수 있는 배경 이미지의 위치를 지정하는 속성이다.
움짤로 쪘는데 용량 초과된다고 거절당했다 ㅠㅠ 흑흑 ...
이 속성은 브라우저의 크기를 줄이거나 늘렸을 때 사진 이미지의 위치를 결정해준다 ! 첫 번째는 속성을 주지 않아서 브라우저의 너비를 줄였을 때 사진의 위치가 그대로 있다. 반면 두 번째에서는 center로 위치를 정해놨기 때문에 브라우저 너비를 왼쪽에서 줄이든 오른쪽에서 줄이든 정중앙 부분의 사진이 보여지게 된당~!
큐큐 요새 이 창을 띄워놓고 할 일을 하다가 날씨에 따라 배경 이미지가 바뀌는 걸 구경하는 재미가 있다><이렇게 내가 만들고 싶었던 걸 만들고 그걸 이용하는 게 정말 즐겁다!
다음에는 화면에 보이는 것처럼 스탑워치를 만들어놨는데 어떻게 스탑워치를 만들었는지 다뤄보겠당! 남은 하루 홧팅~!!
'> 개발 > Javascript' 카테고리의 다른 글
[Javascript] API KEY 관리하기 - config/apikey.js (0) | 2023.06.15 |
---|---|
[Javascript] 스탑워치 만들기 (0) | 2023.05.21 |
[Javascript] geoloaction으로 내 위치 가져오기 (0) | 2023.05.19 |
[Javascript] JSON과 open weather map API : 날씨 정보 가져오기 (0) | 2023.05.18 |
[Javascript ] Vanila JS 투두리스트 - 항목 추가 매서드 (0) | 2023.03.29 |
댓글