스크립트를 통한 스타일 수정.
<script>
const h1 = document.querySelector('h1');
const first = document.getElementById('first'); //ID로 선택한다..
const second = document.querySelector('.second'); // 클래스로 선택.
const body = document.querySelector('body') // 바디 태그 선택
const lis = document.querySelectorAll('li'); //여러개 선택
</script>-> 스크립트로 selectors 지정.
<style>
/* cool */
.cool:hover {
color: #0a0a0a;
text-shadow:
/* Color 1 */
1px 1px #61b4de,
/* Color 2 */
2px 2px #91c467,
/* Color 3 */
3px 3px #f3a14b,
/* Color 4 */
4px 4px #e84c50,
/* Color 5 */
5px 5px #4e5965;
}
.cool {
color: #ededed;
font-family: Oswald;
font-size: 4em;
transition: 0.5s all ease;
text-transform: uppercase;
text-decoration: none;
text-shadow:
/* Color 1 */
1px 1px #61b4de, 2px 2px #61b4de, 3px 3px #61b4de, 4px 4px #61b4de, 5px 5px #61b4de,
/* Color 2 */
6px 6px #91c467, 7px 7px #91c467, 8px 8px #91c467, 9px 9px #91c467, 10px 10px #91c467,
/* Color 3 */
11px 11px #f3a14b, 12px 12px #f3a14b, 13px 13px #f3a14b, 14px 14px #f3a14b, 15px 15px #f3a14b,
/* Color 4 */
16px 16px #e84c50, 17px 17px #e84c50, 18px 18px #e84c50, 19px 19px #e84c50, 20px 20px #e84c50,
/* Color 5 */
21px 21px #4e5965, 22px 22px #4e5965, 23px 23px #4e5965, 24px 24px #4e5965, 25px 25px #4e5965;
}
</style>-> 해당 스타일을 원하는 곳에 적용.
버튼을 통한 자바스크립트.
<button onclick="h1.classList.toggle('cool')"> 클릭! </
selector 지정한 h1에 버튼을 누르면 해당 스타일이 적용, 한번더 누르면 remove 적용.VS CODE를 이용 자바스크립트를 통한 CSS 적용 변경
HTML 파일.
<head>
<meta charset="utf-8">
<title>Dicee</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Refresh Me</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="">
</div>
</div>
</body>
<script src="app.js">
</script>APP.JS 파일
// alert('테스트')
// 이미지명 지정하고 setAttribute를 통해 src에 대항 항목에 image 주소값입력.
const img1 = document.querySelector('.img1');
img1.setAttribute('src', 'images/dice6.png')
const img2 = document.querySelector('.img2');
img2.setAttribute('src', 'images/dice5.png')주사위 게임 만들어보기
랜덤으로 주사위 이미지를 출력하기
app.js
// alert('테스트')
const img1 = document.querySelector('.img1');
const img2 = document.querySelector('.img2');
// 랜덤 숫자 1~6까지 만들기
// 랜덤 정수 난수 함수
Math.floor(Math.random() * 6) + 1; //최댓값도 포함, 최솟값도 포함, Math.floor 정수만 출력.. 0 ~ 5.9999 -> (0 ~ 5)+1 -> 1 ~ 6
let randomNum_1 = Math.floor(Math.random() * 6) + 1
let randomNum_2 = Math.floor(Math.random() * 6) + 1
// 입력에 대한 설정 백틱``
img1.setAttribute('src', `images/dice${randomNum_1}.png`)
img2.setAttribute('src', `images/dice${randomNum_2}.png`)
// 그냥 변수를 통한 방법
// img1.setAttribute('src', 'images/dice' + randomNum_1 + '.png')
// img2.setAttribute('src', 'images/dice' + randomNum_2 + '.png')
이미지 파일 구성정보는 
/// 텍스트 및 이미지의 동적변경
const h1 = document.querySelector('h1');
const h1_image = document.querySelector('.h1_image')
if (randomNum_1 > randomNum_2) {
h1.textContent = "1번 이김 ㅅㄱ"
h1_image.setAttribute('src', 'images/new.jpg')
} else if (randomNum_2 > randomNum_1) {
h1.textContent = "2번 이김 ㅅㄱ"
h1_image.setAttribute('src', 'images/new2.jpg')
} else {
h1.textContent = "비김 ㅅㄱ"
h1_image.setAttribute('src', 'images/flag.png')
}
이후 해당 결과 값에 따라 텍스트 및 이미지의 동적 변경도 가능하다
백그라운드 생성기 만들어보기.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>백그라운드 생성기</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body id="gradient">
<h1>벡그라운드 생성기</h1>
<input onchange="change()" class="color1" type="color" name="color1" value="#00ff00">
<input onchange="change()" class="color2" type="color" name="color2" value="#ff0000">
<h2>Current CSS Background</h2>
<h3>이것이다 ! </h3>
<script type="text/javascript" src="script.js"></script>
</body>
const color1 = document.querySelector('.color1');
const color2 = document.querySelector('.color2');
const h3 = document.querySelector('h3')
const body = document.querySelector('#gradient');
function change() {
// alert('색변경')
// alert(color1.value)
// alert(color2.value)
body.style.background = `linear-gradient(to right, ${color1.value} , ${color2.value})`;
h3.textContent = '섞은 색깔은 ' + body.style.background + ";"
} 두개의 색깔에 대한 값을 입력 받아 이를 value 값으로 넘겨주기.
+ html class에 대해 다중 클래스 활용 가능
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
.k {
background: url(images/tom3.png) no-repeat center;
background-size: cover;
}
.l {
background: url(images/tom4.png) no-repeat center;
background-size: cover;
}
.drum {
border: 10px solid #404B69;
font-size: 5rem;
.....
}이처럼 하나의 클래스를 따로 분리해서 설정 가능
드럼 만들기 (addEventListener를 통해 이벤트 발생 )
const buttons = document.querySelectorAll('.drum')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () { // 클릭을하면 해당 함수실행
console.log(this.textContent)
switch (this.textContent) {
case 's':
var audio = new Audio('sounds/crash.mp3');
audio.play();
break
case 'd':
var audio = new Audio('sounds/kick-bass.mp3');
audio.play();
break
case 'w':
var audio = new Audio('sounds/snare.mp3');
audio.play();
break
case 'a':
var audio = new Audio('sounds/tom-1.mp3');
audio.play();
break
case 'j':
var audio = new Audio('sounds/tom-2.mp3');
audio.play();
break
case 'k':
var audio = new Audio('sounds/tom-3.mp3');
audio.play();
break
case 'l':
var audio = new Audio('sounds/tom-4.mp3');
audio.play();
break
}
});
}
HelloWorld에서 RealWorld로