WECODE Project Javascript code reveiw #3
자기소개 페이지 중 자바스크립트를 활용하여 동적 기능을 구현한 두번째 부분에 대해 소개하려고 합니다.
전체 소스코드
자기소개 페이지
첫번째 기능 - Slide
두번째 기능 - color theme
🌙 Light/Dark mode - input
마지막은 자기소개 페이지의 주간/야간 (light/dark) 모드를 바꿀 수 있는 기능입니다.
최근 사용자의 시력을 보호하기 위해 다양한 디지털 기기에서 야간 모드를 설정할 수 있게 되었습니다. 하지만 웹 프로그래밍에서 야간모드를 선택한다고 해서 블루라이트를 차단할 수 있다는 근거는 없습니다.
그 외에 사용자의 눈의 피로도를 줄이거나 가시성을 높여주는 목적으로 주/야간 모드를 설정할 수 있을 것입니다.
저의 자기소개 페이지를 둘러볼 때 심심하지 않도록 장난감 역할을 하는 주야간 모드에 대해 소개해드리겠습니다.🐣
📌 Html Layout
- 위 사진의
HTML코드는 다음과 같습니다.
주간과 야간을 의미하는 해와 달 이미지는 마찬가지로 icons8의 이미지를 참조했습니다.
버튼을 했을 때 좌우로 슬라이드 되는 버튼은 다양한 오픈 소스 코드가 많을 것입니다.
저는 input 태그를 사용해봤습니다.
자기소개 페이지에 처음 접속했을 때에는 기본 주간 모드 화면이 렌더링 되기 때문에
달 이미지 태그에는 invisible 클래스를 추가해주었습니다. (자바스크립트를 통해 없애고 추가하기)
<div class="controller">
<div class="mode-changer">
<label for="dark-mode-changer" class="changer__switch">
<input id="dark-mode-changer" type="checkbox">
<span class="slider round">
<img class="moon-image invisible"
src="icon8-moon-image" />
<img class="sun-image"
src="icson8-sun-image" />
</span>
</label>
</div>
</div>📌 Css styling
- 다음은
css코드입니다.
전체 코드 중 주요 선택자만 들여다보겠습니다.
-
.slider::before (pseudo class)
.slider선택자 앞에 가상의 요소 선택자를 추가합니다.
이 선택자는 슬라이드 되는 원형 버튼을 추가합니다.
content속성의 값을 공백으로 설정하면서 실제로는 아무 내용이 없는 선택자임을 가리킵니다. -
input:checked + .slider::before
이 프로젝트에서는input(type:checkbox)요소로 슬라이드 버튼을 구현하고 있습니다.
버튼을 움직이기 위해서는 input이 체크가 되어있을 때의 상태를 작성해주어야 합니다.
css를 통해 애니메이션을 구현할 수 있는데요,transform: translateX(30px)코드를 통해 input이 체크가 되어있으면 x축으로.slider::before을 30px만큼 이동시키는 코드를 작성해보았습니다.또한 부드러운 애니메이션 구현을 위해
.slider::before의 내부 코드에transition속성이 설정되어 있는 것을 확인해볼 수 있습니다. -
.slider.round
원형의 슬라이드 버튼을 담고 있는 span 태그를 가리키는데요.
양쪽 끝부분이 반원과 비슷한 모양을 가질 수 있도록border-radius를34px로 정의하여 주었습니다.
/* Controller - Mode Changer */
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e2e2e2;
transition: .4s ease;
}
.slider::before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background: #e2e2e2;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background: #2196F3;
}
input:checked + .slider::before {
transform: translateX(30px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
자바스크립트 뿐만 아니라 css를 활용해서도 다양한 슬라이드를 구현할 수 있습니다.
다음에는 자바스크립트로도 구현해봐야겠네요👍
📌 Javascript code
주야간 모드를 전환하는 버튼을 만들었으니, 이제 진짜로 주야간 모드를 전환시켜보겠습니다!
많은 블로그 포스팅이나 스택오버플로우에서는 J-query를 활용하는 것 같았으나,
저는 오직 자바스크립트로만! 코드를 작성해보았는데요.
이게 맞는지 확신이 안서는 코드였습니ㄷ ㅏ...
- 우선 마찬가지로 DOM 객체에 접근해보겠습니다.
slider는 click 이벤트를 부여할 input 객체입니다.
그 이외의 변수에는 slider의 체크 여부에 따라 style을 조정해줘야 하는 요소들을 담았습니다.
const slider = document.querySelector("#dark-mode-changer");
const sunImg = document.querySelector(".sun-image");
const container = document.querySelector(".container");
...
..
.
// 이외 전체 코드 참고- 다음으로는
slider에 이벤트를 추가해줍니다.
조건에 따른 내부 실행 코드는 반복되는 부분이 많아 두가지 요소씩만 적어보겠습니다.
여기서 파라미터로 받아오는 e(event) 객체를 통해 slider 버튼의 속성에 접근할 수 있습니다.
slider 객체의 체크 여부를 확인하여 아래와 같이 여러 객체들의 style 속성을 변경할 수 있었습니다.
slider.onclick = (e) => {
const checked = e.target.checked;
if (!checked) {
// 주간 모드 선택
container.style.backgroundColor = "#ffffff";
sunImg.classList.add("invisible");
// 이외 전체 코드 참고
} else {
// 야간 모드 선택
container.style.backgroundColor = "#1b1b1b";
sunImg.classList.add("invisible");
moonImg.classList.add("invisible");
// 이외 전체 코드 참고
}
};🛠️ 보완해야할 점
- 가상 선택자에 대한 개념 이해가 필요한 것 같음.
- 자바스크립트 코드를 다시 한번 생각해볼 필요가 있는 것 같음.
(선택자를 활용하여 겹치는 부분을 줄이기 or class형 함수 사용 등등..)
