홈페이지 내 주간야간 모드 활성화 기능 구현

어제는 나의 홈페이지 내 innerHTML을 사용해서 이메일 주소를 노출 되게끔 하는 함수를 작성한 내용을 게시했다.
오늘은 나의 홈페이지에 두 가지 기능을 더 추가하여 반영했고 이에 대한 글을 작성하려한다.

기능은 요즘 대부분의 웹페이지나 심지어는 스마트폰에도 기본으로 내장되어 있는 주간야간 모드인데 이 기능이 나온 당시에는 개발에 관련된 내용을 1도 몰랐던 시기였기에 화면이 어두워지는 모습을 보면서 되게 신기해했었다. 이번에 홈페이지에 이 기능을 구현해보면서 예전엔 그렇게 신기하고 감탄했던 기능이 지금에서 알고보면 "와 나도 이런걸 할 수 있구나"라는 걸 깨달았다. 물론 혼자서 한게 아니고 주변 지인들이나 각종 블로그, MDN, 유튜브 동영상들을 참고해나가면서 진행했다.

---

위 사진을 보다시피 nav우측 상단에 주야모드 버튼을 만들었다. 해당 버튼의 스타일링은 구글링을 통해서 얻어왔지만 주간야간을 변동시키는 기능을 내포한 스크립트는 따로 없어 구현을 위한 스크립트는 유튜브를 많이 참고했다.

1. 버튼 스타일링

버튼은 구글링을 통해서 가져왔는데 스타일링에 대한 코드는 다음과 같다.

.night_day {
    position: relative;
    width: 100px;
    height: 56px;
    padding: 5px;
    border-radius: 5px;
    border: 3px solid #1a237e;
    background-color: #3f51b5;
    overflow: hidden;
    transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.circle {
    border-radius: 50%;
    display: inline-block;
    position: absolute;
}
.small {
    width: 30px;
    height: 30px;
    background: #3f515b;
    left: 20px;
    top: 3px;
    transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.large {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 3px solid #fff;
    top: 50%;
    transform: translateY(-50%);
    left: 7px;
    transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.night_day input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

/* 버튼 배경색 전환 */
.move {
    background-color: #fff;
    border-color: #f3909a;
}
/* 버튼내 large원을 움직임 */
.move .large {
    left: 50px;
    background: yellow;
    border-color: orange;
}
/* 버튼내 small원을 움직임 */
.move .small {
    left: 60px;
    top: 50px;
    background-color: #fff;
}
/* 출처 : https://learnersbucket.com/tutorials/js-projects/day-night-toggle-switch-in-javascript/ */

이건 번외의 얘기이지만 위의 코드들을 쳐보면서 새롭게 느낀점은 꼭 JavaScript만이 동적인 것을 보여주는 언어가 아니고 CSS도 마찬가지로 어느정도의 동적인 것을 보여줄 수 있는것을 알게 되었다. 예전에는 JavaScript가 동적인 것을 구현한다는 말만 인식하다보니 CSS는 웹페이지에 색칠을 해주는 스타일링만 책임지는 역할을 하는 것으로만 알고있었다. 하지만 이번에 스타일링 코딩을 쳐보면서 CSS만으로도 나름 뭔가를 동적으로 꾸밀 수 있겠구나 라는 생각이 들었다.(JavaSctipt에 비해서는 아니겠지만....)

2. 주간야간모드 구현

스타일링을 마치고나서 모드 버튼을 확인해보니 애니메이션은 정상적으로 잘 움직였다. 다음으로 배경과 글자색을 바꿔주는 함수를 구현해서 저 함수를 버튼이 클릭될때 실행되게 만들어주면 되는건데 이전에 생활코딩 유튜브를 보면서 jQuery를 활용한 주야모드를 구현하는 것을 잠깐 본 적이있어 다시 보고 이전에 같이 따라쳤던 코딩이 있어 그 부분을 많이 참조했다.

일단 코드를 먼저 보자면

/* 주야 모드 버튼 애니메이션 동작 */
const swithBox = document.querySelector(".night_day");

document.querySelector("input").addEventListener("change", (e) => {
  const { checked } = e.target;
  if (checked) {
    swithBox.classList.add("move");
  } else {
    swithBox.classList.remove("move");
  }
});

/* 주야 모드 배경전환 구현 */
let Back = {
  setColor: function (color) {
    let sections = document.querySelectorAll(".profile");
    for (let i = 0; i < sections.length; i++) {
      let item = sections.item(i);
      item.style.color = color;
    }
    // contact_logo i에 대한 색변경
    let logo = document.querySelectorAll(".contact_logo i");
    for (let i = 0; i < logo.length; i++) {
      let item = logo.item(i);
      item.style.color = color;
    }
    // document.querySelectorAll(".profile").style.color = color;
  },
  setBackgroundColor: function (color) {
    let sections = document.querySelectorAll(".profile");
    for (let i = 0; i < sections.length; i++) {
      let item = sections.item(i);
      item.style.backgroundColor = color;
    }
    // document.querySelectorAll(".profile").style.backgroundColor = color;
  },
};

/* 주야모드 실행함수 */
function nightDayHandler(self) {
  // let target = document.querySelector("body");
  if (self.value === "night") {
    Back.setBackgroundColor("#262e28");
    Back.setColor("#8fc2ae");
    self.value = "day";
  } else {
    Back.setBackgroundColor("#f7fcf8");
    Back.setColor("#6d6e78");
    self.value = "night";
  }
}

전체적인 코드는 위와 같다.

최상위의 애니메이션 동작기능은 기존 CSS코드 작성 후 클릭했을때의 조건을 충족시켜주는 조건문을 작성하여 addEventListner를 활용해 클릭했을때 어떻게 이루어지는지를 구현했으며

배경의 색전환을 역할을 해주는 코드인 통합적으로 background를 상징하는 말로 Back이라는 변수를 선언해서 작성했다. setColor와 setBackgroundColor로 함수를 만들어 최종적으로 마지막에 실행함수에서 활용하였다.

sections이라는 변수를 profile이라는 이름을 가진 클래스의 모든 요소들을 불러모아 반복문을 작성하여 4개의 profile이름을 가진 클래스를 불러들여 이 모든 클래스에 글자색과 배경색을 어떻게 줄 것이다 라는 함수를 작성하였다. 배경색도 마찬가지로 동일한 함수로 작성하였고 다만 배경색으로 줄 것이라는 명령의 차이가 있다.

그리고 나서 마지막으로 nightDayHandler라는 함수를 만들어서 조건문을 작성해 버튼을 클릭할 때 해당 조건에 따라 Back에 내가 지정한 색깔을 입히는 것을 마무리로 주간야간모드를 완성시켰다.

3. 최종 적용

<div class="night_day">
	<input type="checkbox" value="night" onclick="       
             		nightDayHandler(this);
            	"
    			/>
	<span class="circle large"></span>
    <span class="circle small"></span>
</div>

이런식으로 HTML에 만들어놓은 주야모드 버튼에 onclick이벤트를 추가시켜 nightDayHandler함수가 실행되도록 처리하였고 홈페이지에서도 적용이 잘되어 버튼애니메이션은 물론 배경색, 글자색까지 잘 변하는것을 확인하였다.

4. 오류 및 해결

let Back = {
  setColor: function (color) {
    let sections = document.querySelectorAll(".profile");
    for (let i = 0; i < sections.length; i++) {
      let item = sections.item(i);
      item.style.color = color;
    }
    // contact_logo i에 대한 색변경
    let logo = document.querySelectorAll(".contact_logo i");
    for (let i = 0; i < logo.length; i++) {
      let item = logo.item(i);
      item.style.color = color;
    }
    // document.querySelectorAll(".profile").style.color = color;
  },
  setBackgroundColor: function (color) {
    let sections = document.querySelectorAll(".profile");
    for (let i = 0; i < sections.length; i++) {
      let item = sections.item(i);
      item.style.backgroundColor = color;
    }
    // document.querySelectorAll(".profile").style.backgroundColor = color;
  },

해당 코드부분에서 처음에는 최상위 div를 querySelctor로 적용해서 전체에 주간야간 모드를 해주려고 했으나 왜인지는 잘 모르겠는데 자꾸 오류는 안나오나 적용이 되질않아 처음에는 애를 많이 먹었다.

아래에 있는내용이 최초에 작성했던 코드이다.

document.querySelectorAll(".profile").style.color = color;
document.querySelectorAll(".profile").style.backgroundColor = color;

이 두가지 코드인데 작동이 왜 안됐는지는 잘 모르겠어서 나중에 알아보기로 하고 바로 그냥 반복문으로 돌려서 일일이 하나씩 요소들을 잡아서 색칠해주는 방식으로 바꾸었더니 작동이 잘돼었다.

위의 오류 부분은 나중에 확인을 더 해봐야 할 것같다....

5. 결론

내 자신의 홈페이지에 기능을 처음으로 제대로 구현해보았는데 남들이 봤을 때는 별건 아니라고 생각할 수 있으나 내가 어찌저찌 가용수단과 방법을 활용하여 해냈다는 생각을 해보면 뿌듯하다고 느껴졌다.

다음 글에서는 지금까지 마지막으로 홈페이지에 구현한 기능인 Back to the Top 버튼에 대해 코드 작성과 작성동안의 시행착오에 대해 글을 게시하겠다.

참고자료:
1. MDN / querySelectorAll()
2. 생활코딩 / 오픈튜토리얼스