- 웹브라우저에 올라가는 것은 HTML, CSS, JavaScript이다
- HTML : 정보
- CSS : 디자인
- Javascrpt : 웹 브라우저 HTML 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#selected {
color: tomato;
}
.dark {
background-color: black;
color: white;
}
.dark #selected {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id = "selected">JavaScript</li>
</ul>
<input type="button" value="dark" onclick="document.body.className='dark'">
</body>
</html>
1. HTML에서 자바스크립트 로드하기
- inline 방식은 태그에 직접 자바스크립트를 기술하는 방식, 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여있기 때문에 정보로서의 가치가 떨어짐
<!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>
<input type="button" value="Hello world"
onclick="alert('hello world!!!');"/>
</body>
</html>
<!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>
<input type="button" id="hw" value="Hello World"/>
<script src="script.js"></script>
</body>
</html>
let hw = document.getElementById("hw");
hw.addEventListener('click', function(){
alert('Hello world!!');
});
