노마더 코더의
바닐라 JS로 크롬 앱 만들기를 기초로 JS를 배우고 있다!
- Day01 -> 자바스크립트 문법
- Day02 -> 조건문을 이용해 간단한 로직 짜기
<!DOCTYPE html>
<html>
<head>
<style>
html, body, ul {
margin: 0;
}
#title {
background-color: cornflowerblue;
height: 100px;
width: 500px;
font-size: 4rem;
}
.titlehead {
height: 100vh;
background-color: darkgreen;
}
</style>
</head>
<body>
<header>
<div class="titlehead">
<div id="title">내용</div>
</div>
</header>
<script>
const title = document.getElementById('title');
const BASIC_COLOR = '#006400';
const CHANGE_COLOR = '#b3ffb3';
// 이벤트 핸들러 함수
function HandleClick() {
const currentColor = title.style.color;
console.log(title.style.color)
if(currentColor === BASIC_COLOR) {
title.style.color = CHANGE_COLOR;
} else {
title.style.color = CHANGE_COLOR;
}
}
// 실행 함수
function init() {
title.style.color = BASIC_COLOR;
// title.addEventListener('click', HandleClick);
title.addEventListener('mouseleave', HandleClick);
}
init(); // 실행
</script>
</body>
</html>References
- 노마드 코더 : 강의를 듣고 정리한 자료입니다.
- 🎈2020.11.28
- 🎈정리 : song, VSCode
안녕하세요:)