ep.04 제어할 태그 선택하기

CSS 기초는 알고 있기 때문에 지금 당장은 스킵하도록 하겠습니다. 너무나도 많은 속성이 있기 때문에 구글검색을 통하여 하나하나씩 알아 나가시는 것을 추천드리며, 태그 선택 단원부터 시작해보겠습니다.

 

기본적인 HTML코드는 선생님이 보여주신 예시와 비슷하게 아주 간단히 만들고 시작하겠습니다.

이런 느낌이 될겁니다. 이때 우리는 click을 했을때 style을 바꿔주고 싶은거니까, onclick이라는 이벤트를 사용하여 명령어를 입력해볼겁니다.

앞에서도 말했지만 type은 input의 종류, value는 이름(왼쪽 화면에서는 버튼안의 이름), 이어지는 onclick은 event입니다. 이벤트안의 큰따옴표안에 우리는 명령어를 입력하게 될겁니다. 

 

이때 우리는 구글검색의 도움을 받게 될텐데, "javascript select tag by css selector" javascript select tag까지만 쳐도 자동완성이 실행될거에요! 이렇게 검색하면 쉽게 태그를 알수있을겁니다.

 

 

<h1><a href="#">WEB</a></h1>
    <input type="button" value="night" onclick="
        document.querySelector('body').style.background = '#000'
        document.querySelector('body').style.color = '#fff'
        ">
    <input type="button" value="day" onclick="
        document.querySelector('body').style.background = '#fff'
        document.querySelector('body').style.color = '#000'
    ">

그 후에 스타일을 바꾸는 속성을 넣어주면 끝나게 됩니다.