오늘은 웹 페이지에서 특정 버튼을 눌러 야간모드를 전환하는 예제를 만들어봤다.
night버튼을 누르면 배경색이 검은색, 글자색이 흰색이 되고, day버튼을 누르면 배경색이 흰색, 글자색이 검은색이 되도록 하는 간단한 예제를 만들었다.
1. 야간 모드 동작 버튼을 만든다.
<input type="button" value="night" onclick="">
<input type="button" value="day" onclick="">night 버튼을 누르면 야간 모드, day 버튼을 누르면 주간 모드로 전환 된다.
2. 버튼을 클릭하면 배경색이 검은색이 되도록 한다. (야간모드)
CSS에서 글자색이나 배경색을 변경할 때는 <body> 태그에 스타일 속성을 변경하는 방법을 사용했다.
<body style="background-coloc:black;">
하지만 CSS로 넣은 태그는 단순히 디자인을 변경해서 상호작용을 하기에는 부족하다.
우리는 <body> 태그에 style 속성을 상호작용에 의해 넣고 싶기에 JavaScript 문법에 따라 웹 브라우저에게 <body> 태그를 선택하도록 한다. 방법은 "javascript select tag by css selector" 를 검색하니 document.querySelector('body') 코드를 추가 하는 방법이었다. (https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector)
Document.querySelector
: document.querySelector() 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다.
document.querySelector('body')이 코드를 추가해서 웹 브라우저에게 우리가 자바스크립트 문법에 따라 <body>태그를 선택할 것을 알도록 했다.
3. 버튼을 클릭하면 글자색이 흰색이 되도록 한다. (야간모드)
"javascript element style"를 검색을 검색하면 <body> 태그에 넣을 스타일 속성을 알 수 있다. (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
document.querySelector('body').style.backgroundColor='black';
우리는 야간모드를 만들어야하니 버튼을 누르면 배경색이 검은색이 되도록하는 스타일 속성값을 넣어줬다.
주의할 점은 backgroundcolor가 아니라 backgroundColor이다.
앞에서 배운 것을 코드에 추가했다.
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
">
</body>night버튼을 누르면 배경색이 검은색, 글자색이 흰색
day버튼을 누르면 배경색이 흰색, 글자색이 검은색이 되도록 했다.
아무 것도 누르지 않은 웹 사이트의 모습이다.
night / day 버튼을 누른 모습이다.
nigth 버튼을 누르면 <body style="background-color:balck; color: white;">으로 바뀐 것을 알 수 있고
day 버튼을 누르면 <body style="background-color:white; color:black;">으로 바뀐 것을 알 수 있다.
'소프트웨어 > JavaScript' 카테고리의 다른 글
| [JavaScript] 중복 제거를 위한 refactoring - 야간모드 예제 코드 간결하게 (0) | 2023.01.31 |
|---|---|
| [JavaScript] 웹 페이지 야간모드 만들기 기초 - 하나의 버튼으로 (0) | 2023.01.31 |
| [JavaScript] 변수(variable)와 상수(constant) console에서 사용 (0) | 2023.01.29 |
| [JavaScript] length / toUpperCase() / indexOf() / trim() (0) | 2023.01.29 |
| [JavaScript] Javascript alert(onclick, onchange) (0) | 2023.01.29 |
