[TIL 2022](3) JS javascript로 Dark , Day Mode 만들기 -1

1) 학습한 내용

• js로 style 변경하기 , QuerySelector 선택자를 사용

<script> 
document.querySelector('body').style.color ='white';
document.querySelector('body').style.backgroundColor ='black';

</script>

• input 태그와 JS로 button 을 만들어 다크모드 & 데이모드 만들기
  → js로 input 태그의 onlick 이벤트 실행 (onclick 뒤에 js코드 삽입)

<input type='button' value="Night" onclick="
	document.querySelector('body').style.backgroundColor='black';   
"> 
<input type='button' value="Day" onclick="
	document.querySelector('body').style.backgroundColor='white';   
"> 

2) 학습내용 중 어려웠던 점 및 해결방법

• 코드들이 올바른 순서로 입력이 되었지만, 수정 반영이 되지 않음
• 오타로 인해 반영이 되지 않아 코드를 수정
• 강사님이 알려주신 'text-compare.com' 의 도움을 받아 해결

3) 학습소감

• JS 코드를 통해 html에서 다양한 액션을 표현할 수 있어 도움이 많이 되었다.
• JS 코드로 복잡한 코드를 짧고 간단하게 작성할 수있어 편리했다.