<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 1000px;
height: 200px;
margin: 20px auto;
}
/*
div를 호출 시 1개씩 다 호출하게 됨 -> div의 클래스를 호출할 때는 .box1 를 사용함
class는 HTMl의 요소 중 하나
*/
</style>
</head>
<boby>
<div class = "box1"></div>
<div class = "box2"></div>
<div class = "box3"></div>
<div class = "box4"></div>
<div class = "box5"></div>
<script>
// 배열 (Array)
// 데이터를 순차적으로 관리하는 방법
var friend = ["철수", "영희", "바둑이", "미영"]; // 배열 형태의 데이터, 0번째 부터 시작(배열의 길이(length) 4)
console.log(friend[0]); // 0번째 배열에 있는 철수가 출력
console.log(friend.length); // 배열의 길이를 확인하고 싶을 때 배열이름.length 를 사용
var boxes = document.querySelectorAll("div");
var color = ["blue", "magenta", "green", "skyblue", "pink"];
console.log(boxes);
var i = 0;
for (i = 0; i < boxes.length; i++) {
boxes[i].style.backgroundColor = color[i]; // NodeList(5)
}
// for ...of 배열에 대한 반복
// es6에서 등장한 배열
// var value;
// for (value of boxes) {
// console.log(value);
// }
</script>
</boby>
</html>
Engineering is the closest thing to magic that exists in the world.