JavaScript를 활용한 웹 페이지 nightmode, daymode

위의 코드에서 document.querySelector()는 html문서 내에서 ()내의 값과 일치하는 첫번째 태그를 반환한다.

()내의 값과 일치하는 태그가 없다면 null을 반환한다.

 

이후의 .style.은 앞의 태그의 스타일 속성을 다루겠다는 의미이다.

backgroundColor은 뒷 배경, color는 글자의 색상이다.

 

css에서는 background-color이지만, javascript에서는 backgroundColor을 나타낸다.

좌측 부터 최초 실행, night 버튼 클릭, day 버튼 클릭 결과이다

결과사진과 같이 잘 되는 모습이다.