JS 낮/밤 버튼
1.낮/밤 버튼을 만든다.
- <div >
<input type="button" value="white">
<input type="button" value="black">
</div>
2.오른쪽 구석탱이로 옮긴다.
- <div id="control">
- #control { float: right; } : CSS태그이므로 style태그에서 조정한다.
3.배경색/글자색이 다른 낮/밤 태그를 만든다.
- body.white{
background-color: white;
color:black;
} : CSS태그이므로 style태그에서 조정한다. class속성은 white이다.
- body.black{
background-color: black;
color:white;
} : CSS태그이므로 style태그에서 조정한다. class속성은 black이다.
4.버튼을 누르면 바디태그의 속성이 달라진다.
- <body id="target">
- <input type="button" value="white" onclick="document.getElementById('target').className='white'">
- <input type="button" value="black" onclick="document.getElementById('target').className='black'">
5.완성된 4의 태그를 모든 페이지에 붙여넣기한다.
'JavaScript' 카테고리의 다른 글
| Do it : JS -1,2.자바스크립트란, 입력과 출력, 규칙6가지 (0) | 2020.09.30 |
|---|---|
| 드림코딩 : JS -2. 콘솔 출력, JS 공식사이트, async VS. defer (by.자바스크립트 기초강의, ES5+) (0) | 2020.09.29 |
| 생활코딩 : JS 정리 -4. 이벤트 태그 (by 웹 어플리케이션 만들기) (0) | 2020.08.29 |
| 생활코딩 : JS 정리 -3. 함수 (by 웹 어플리케이션 만들기) (0) | 2020.08.29 |
| 생활코딩 : JS 정리 -2. 반복문, 배열 (by 웹 어플리케이션 만들기) (0) | 2020.08.29 |