프론트엔드/js
[생활코딩 WEB2 JS 12강] 제어할 태그 선택하기 onclick, Selcet 선택자 구글링하기, Document.querySelector(), css는 소문자,js는 대문자 이해하기
응개야
2023. 8. 7. 22:32
아침모드 눌렀을 때
다크모드 눌렀을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1><a href="index.html">WEP</a></h1>
<input
type="button"
value="다크모드"
onclick="document.querySelector('body').style.
backgroundColor = 'black'
document.querySelector('body').style.color = 'white'"
;
/>
<input
type="button"
value="아침모드"
onclick="document.querySelector('body').style.
backgroundColor = 'white'
document.querySelector('body').style.color = 'black'"
;
/>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>이것이 자바다.</p>
</body>
</html>
<선택자 검색>
javascript select tag by css selector을 구글링한다.
MDN사이트 고질라 어쩌고 사이트에 들어가서
Document.querySelector()
이 메서드를 복붙한다.
챗gpt에게 물어봄.
onclick이라는 태그를 처음 배웠다.
웹을 만들때 html+js를 해야 동적인게 가능하다.
onclick=
"document.querySelector('body').style.
backgroundColor='black'
(도큐먼트 이 브라우저에 쿼리 질의한다 ('body) 이 요소
.style (여기서부턴 css스타일) 스타일 추가하기)
배경과 글씨 색은 각각 코드를 짜줘야 한다.
글씨색도 해줘야하니 한번더 코드 쓰기.
document.querySelector('body').style.
Color='white'
backgroundColor='black'
document.querySelector('body'.style.color='white'
"
자바용어는 단어 중간에 대문자로 넣어야 작동이 되고
('body')할때는 "곁따옴표로 쓰면 처음에 쓴 "과 중복이 되버려 '홑겹으로 써야한다.
css 뒷배경 꾸밀때
background-color였는데
어떠한 이유에서인지
js에서는
backgroundColor라고 해야한다. 이건 작동원리를 이해하는게 좋음.