### 간단한 CSS 사용 법
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#selected{
color:red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="selected">JavaScript</li>
</ul>
</body>
</html>
이렇게 간단히 # '으로 id값을 불러와 CSS 설정을 할 수 있다
### 색변환 설정 기본값 만들기 버튼만들기
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#selected{
color:red;
}
.dark{
background-color: black;
color:white;
}
.dark #selected {
color:yellow;
}
</style>
</head>
<body class="dark">
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="selected">JavaScript</li>
</ul>
<input type="butten" value="dark" onclick="document.body.className='dark';" />
</body>
</html>
맞나?? 암튼 스크립트는 저렇게 온클릭같은 역동적인것이다
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#selected{
color:red;
}
.dark{
background-color: black;
color:white;
}
.dark #selected {
color:yellow;
}
</style>
</head>
<body class="dark">
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="selected">JavaScript</li>
</ul>
<input type="butten" value="dark" onclick="document.body.className='dark';" />
</body>
</html>
로드하기
<!DOCTYPE html>
<html>
<body>
<input type="butten" id="hw" value="Hello world" />
<script type="text/javascript">
var hw = document.getElementBtId('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
스크립트 안은 자바스크립트로 해석을 한다
<!DOCTYPE html>
<html>
<body>
<input type="butten" id="hw" value="Hello world" />
<script src="./script.js"></script>
</body>
</html>
//<File JavaScript.js>
var hw = document.getElementBtId('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
이렇게 해서 스크립트를 이용해 불러오기로 사용할 수 있다
이거할 때 안될 수 있다 load 하기전에 버튼 함수가 없기 때문에 이름을 러와야한다
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var hw = document.getElementBtId('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}
</script>
</head>
<body>
<input type="butten" id="hw" value="Hello world" />
</body>
</html>
ㅇ
이렇게 뒤에 다끝나고 onload 하는것으로 마즈막까지 다 참조 해서 읽기 때문에 애러가 안난다.
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 3. JavaScript 사용자와 커뮤니케이션 (0) | 2020.04.10 |
|---|---|
| 2. Java Script 구조에 대하여(HTML) (0) | 2020.04.10 |
| 선택만들기 (0) | 2020.03.12 |
| 테이블 및 이미지 (0) | 2020.03.12 |
| 글자 크기 조정 (0) | 2020.03.12 |
Or71nH