가상 키보드에 기본모드 / 다크모드를 적용해 주기 위해서 html 태그에 theme 라는 커스텀 속성을 지정해주었다.
theme의 값이 빈 문자열이면 기본 모드, dark-mode이면 다크모드를 적용해 줄 것이다.
코드로 나타내면 아래와 같다고 할 수 있다.
<!-- 기본모드 -->
<html theme="">
<!-- 다크모드 -->
<html theme="dark-mode">
그리고 다음은 css에서 다크모드가 실행될때 적용될 부분을 작성해주었다.
기본모드에서 다크모드가 되면 흰색이 검은색이 되는 등 색상 반전이 일어나게 된다.
이것을 설정해주기 위해 css의 filter 속성을 사용한다.
filter 속성은 주로 흐림 효과, 색상 변형 등 그래픽 효과를 요소에 적용할때 사용한다. 이미지나 배경, 테두리의 렌더링을 조정할 수 있다.
html[theme="dark-mode"] {
filter: invert(100%) hue-rotate(180deg);
}
위의 코드는 html 태그의 속성중 theme가 dark-mode 이면 적용되는 내용이라는 뜻이다.
다크모드가 되면 filter 속성의 invert가 100%가 되고, hue-rotate가 180deg가 된다.
filter의 invert는 주어진 이미지의 색을 반전시키는 것이다. 위에서 설명했듯이 흰색이라면 검정색이, 검정색이라면 흰색이 나오는등 색상이 반전된다. 0에서 100(%)까지의 값을 지정할 수 있다. 100일 경우 색상을 정반대로 바꾸어준다.
그리고 hue-rotate 속성은 주어진 이미지에 색조 회전을 적용한다. 여기에는 angle 값이 들어가는데, 현재 색상에서 얼마정도로 바꿔줄 것인지를 정할 수 있다. 0에서 360deg 까지의 값을 지정할 수 있고, 만약 0이나 360deg를 넣는다면 색상은 변하지 않고, 180deg를 넣는다면 색상은 현재와 정반대인 보색이 나오게 될 것이다.
invert와 hue-rotate 속성을 모두 지정한 이유는 색상이 무채색인 경우와 무채색이 아닌 경우 모두 다크모드가 되었을때 색상을 반전시키기 위해서이다.
그리고 이벤트를 작성해 주기 위해서 js 파일을 새로 생성하고, Keyboard라는 class를 하나 작성해주었다.
export class Keyboard {
#switchEl;
// class 내부에서 해시를 붙인 변수는 private값이 되어서 클래스 밖에서 덮어씌우거나 수정할수없다.
#fontSelectEl;
constructor() {
this.#assignElement();
this.#addEvent();
}
#assignElement() {
this.#switchEl = document.getElementById("switch");
this.#fontSelectEl = document.getElementById("font");
}
#addEvent() {
this.#switchEl.addEventListener("change", (event) => {
// console.log(event.target.checked);
// true 일때 다크테마 적용
document.documentElement.setAttribute(
"theme",
event.target.checked ? "dark-mode" : ""
);
});
this.#fontSelectEl.addEventListener("change", (event) => {
console.log(event.target.value); // font 값
document.body.style.fontFamily = event.target.value; // body의 font를 수정
});
}
}
class 내부에서 해시(#)를 붙인 변수는 private값이 되어 외부에서는 수정할 수 없다고 한다.
switchEl은 다크모드와 기본모드를 전환할 토글 스위치이고, fontSelectEl은 폰트를 바꿀 수 있는 셀렉트 박스이다.
addEvent 메서드에서 각각 switchEl과 fontSelectEl에 이벤트를 걸어주었다.
this를 작성한 이유는, 이 요소들이 인스턴스를 바라보게 하기 위해서이다. 인스턴스는 index.js 파일에서 생성되었다.
************************
#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발
#패캠인강후기 #패스트캠퍼스후기 #오공완 #30개프로젝트로배우는프론트엔드withReact
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'study > fastcampus' 카테고리의 다른 글
| [React] 이미지 슬라이드 - 1. 프로젝트 개요 및 개발환경 설정 (0) | 2023.02.25 |
|---|---|
| [React] 가상 키보드 만들기 - 5. 마우스 이벤트 작성 (0) | 2023.02.24 |
| [React] 가상 키보드 만들기 - 4. 키보드 이벤트 작성 (0) | 2023.02.23 |
| [React] 가상 키보드 만들기 - 2. html, css 작업 (0) | 2023.02.21 |
| [React] 가상 키보드 만들기 - 1. 개발환경 설정 (0) | 2023.02.20 |
