제어할 태그 선택하기

웹페이지의 버튼을 눌러서 body태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해

넣으려고 한다. 그러려면 JavaScript의 문법에 따라서 웹브라우저에게 이 body 태그를 선택하라고 해야한다.

그걸 하기 전에 우선 검색부터 해봅시다.

JavaScript Select Tag by CSS Selector

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Element.querySelector()

querySelector를 통해서 CSS의 Selector를 선택하라고 합니다. 이것을 코드에 이용을 해보겠습니다.

이제 태그는 선택을 했는데 이 태그에 원하는 style을 어떻게 넣을 수 있을까요?

이것도 우선 검색을 해봅시다.

JavaScript element style

https://www.w3schools.com/jsref/prop_html_style.asp

위 사이트에 들어가보니 이런식으로 사용하라고 합니다. 여기서 getElementById는 querySelector의

대체제 정도 됩니다. 이것을 따라서 한번 작성을 해봅시다. style 태그에서 backgroundcolor는 어떻게 지정하는지

모르니 이것도 검색을 해봅시다

JavaScript style backgroundColor

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp

HTML DOM Style backgroundColor Property

그러면 이것을 이제 코드에 작성을 해보도록 합시다. 작성을 하고 버튼을 눌러보면 웹페이지의 backgroundColor가

바뀌는 것을 알 수 있습니다.

사용자와 상호작용을 해서 HTML 또 CSS를 프로그래밍적으로, 동적으로 변경해서,

보다 똑똑하고 사용자와 대화하는 것과 같은 느낌의 애플리케이션을 만드는 핵심적인 원리와

그 중요한 사례 중의 하나를 해보신 것입니다.