click me-!

* 공부 및 자격증을 위해 작성하는 글입니다.

* 부족한 내용이나 틀린 내용을 알려주시면 감사합니다.

* 코딩애플 js 강의를 참고하여 기능을 연습했습니다.

---

 

 

내가 한 번 바뀌어볼게

 

 

 

---

 

 

 

코드

<!-- css -->
<style>
    h1 {
    	color: yellowgreen;
    }

    #click_me {
        display: inline-block;
        padding: 8px 14px;
        border: none;
        border-radius: 6px;
        background-color: #ddd;
        transition: all 0.18s;;
        cursor: pointer;
    }

    #click_me:hover {
        background-color: #000;
        color: #fff;
    }
</style>


<!-- html -->
<h1 id="change_me">이제 내가 바뀌어볼게</h1>
<button type="button" id="click_me">click me-!</button>


<!-- js -->
<script>
    document.getElementById('click_me').addEventListener('click', function(){
        alert('하나, 둘, 셋 얍-!');
        document.getElementById('change_me').innerHTML = '히히 바꼈다';
        document.getElementById('change_me').style.color = 'pink';
    });
</script>