[20220402]

devDependency(development) vs dependency (production)

1.keyboard project

flex-wrap: 줄바꿈

다크모드 스위치 만들기

.slider::before{
position:absolute;
content: "";
left: 지정;
bottom:지정;
width: 지정
height: 지정;
background-color: 지정;
border-radius: 지정;
}
input:checked + .slider:before{
transform: translate(지정);}

• 라벨로 input 감싸기

<label>
<input/>
</label>

• filter

filter:invert(0~100%) =>색상 반전 효과 /무채색 반전
filter:hue-rotate(0~360deg) => 유채색 반전

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

• 동작

class Keyboard{
#switchEl;
construnctor(){
this.#assignElement();
this.#addEvent();
}    

#assigElement(){}
}
#addEvent(){
this.#switchEl.addEventLsiter("change", (e)=>{
console.log(e.target.checked);
document.documentElement.setAttribute("theme" , event.target.checked ? "dark-mode":"")
})
}

웹팩설치 및 swtch 만들기

em vs rem
addEventListener 오타조심