switch
<label class="switch">
<input id="switch" type="checkbox" />
<span class="slider"></span>
</label>
.slider::before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.5s;
border-radius: 50%;
}
input:checked + .slider {
background-color: black;
}
input:checked + .slider::before {
transform: translateX(26px);
}
slider::before 로 슬라이더 요소 앞에 가상요소로써 흰색 동그라미를 넣어주었다.
input 요소를 label 요소로 감싸면서 input checkbox가 아닌 label 전체를 클릭해도 input이 checked 됐음을 알 수 있게 했다.
input:checked + .slider checked 되면 배경은 black으로 변경 시키고,
input:checked + .slider::before ::before(흰 동그라미)는 x축 기준으로 26px 이동한다.
rem em
상대적으로 크기 조절하기.
-
em
해당 요소 내에서 상대적인 크기
ex) 0.9em -> 해당 요소에서 size가 100px 이었으면 90px -
rem
방식은 같고 기준이 다르다. root 기준 (html)
Dark Theme - CSS
html[theme="dark-mode"] {
/* ! */
filter: invert(100%) hue-rotate(180deg);
}filter로 스타일의 변경사항을 요소에 적용한다.
invert
invert 속성으로 색상을 반전 시킨다.
% 에 따라 얼마나 반전될지를 결정할 수 있다.
hue-rotate
색상표를 기준으로 원래 색상에서 몇도 가량 움직일 것인지를 결정한다.
ex) 붉은 계열에서 120도 움직이면 초록 계열이 나온다.
Dark Theme - JS
Private class fields
해쉬 # prefix 를 추가해 private class 필드를 선언할 수 있게 되었다.
export class Keyboard {
#switchEl;
constructor() {
this.#assignEl();
this.#addEvent();
}
#assignEl() {
this.#switchEl = document.getElementById("switch");
}
#addEvent() {
this.#switchEl.addEventListener("change", (e) => {
console.log(e.target);
});
}
}
id 값이 switch인 요소를 찾고 (assignEl) 요소에 이벤트 발생시 콘솔에 값을 찍어준다. (addEvent)
#addEvent() {
this.#switchEl.addEventListener("change", (e) => {
document.documentElement.setAttribute(
"theme",
e.target.checked ? "dark-mode" : ""
);
});
}
Document.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 Element를 반환한다. HTML 문서를 예로 들면 <html> 요소를 반환한다.
html 요소를 반환해서 그것의 theme 속성을 바꿔주기로 한다.
checked가 true이면 dark-mode로 변환해주는 동작을 실행했다.
Font 변경
<select id="font">
<option value="" disabled selected>Choose Font</option>
<option value="Comic Sans MS, Comic Sans, cursive">Font 1</option>
<option value="Arial Narrow, sans-serif">Font 2</option>
<option value="Chalkduster, fantasy">Font 3</option>
</select>html에 설정해둔 select 태그와 그 안의 폰트에 대한 value가 정의되어 있다.
addEventListener를 통해 해당 요소를 가져와서 style.fontFamily에 이 value 값을 그대로 넣어주면 적용할 수 있다.
this.#fontSelectEl.addEventListener("change", (e) => {
document.body.style.fontFamily = e.target.value;
});