<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = changeStyle; //괄호 없이!! 함수를 바로 넣어서 실행시키겠다
```
function changeStyle(){
//1. css 속성을 그대로 사용하는 경우( 하이픈 없이 단어 하나로 구성된 속성들)
// .(마침표)표기법 사용
var h1 = document.querySelector("#heading");
h1.style.color = "red";
h1.style.width = "400px";
h1.style.height = "100px";
h1.style.background = "pink";
h1.style.border = "1px solid black";
// 2. css 속성을 변경해서 사용하는 경우 ( 하이픈으로 이어진 두 단어 이상으로 구성된 속성들)
// 하이픈(-)을 제거하고, camel case 형식으로 변경
// .(마침표) 표기법 사용
var box = document.querySelector("#box");
box.style.fontFamily = "궁서";
//글씨 크기 20px, 글씨 굵기 : 두껍게
box.style.fontSize = "20px";
box.style.fontWeight = "bold";
//3. css 속성을 그대로 사용해야 한다면!
// [](대괄호) 표기법 사용
var pLise = document.querySelectorAll("p");
pLise[2].style["color"] = "red";
pLise[2].style["background-color"] = "yellow";
}
```
</script>
</head>
<body>
<h1 id="heading">DOM</h1>
<div id="box">
<P>Document</P>
<p>Object</p>
<p>Model</p>
</div>
</body>
</html>
