<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML태그에 접근하기</title>
<style>
div{
border:1px solid black;
background-color: black;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h3> 문제 1. 색상 선택후 변경 버튼을 클릭하면 색상이 변경되도록 만들어 보시오</h3>
<div id="div1"> </div>
<input type="color" id="selectColor">
<button onclick="colorChange();">변경</button>
<script>
function colorChange(){
// var color = document.getElementById("selectColor").value;
// document.getElementById("div1").style.backgroundColor = color;
var color = document.getElementById("selectColor");
var div = document.getElementById("div1");
console.log(selectColor);
console.log(selectColor.value);
div.style.backgroundColor = selectColor.value;
}
</script>
<hr><hr><br>
<h3> 문제 2. 버튼에 따른 크기 조절이 가능하게 만들어 보시오 </h3>
<div id="div2"> </div>
<button onclick="halfSize();">50x50</button> <button onclick="defaultSize();">원본(100x100)</button> <button onclick="doubleSize();">200x200</button>
<script>
function halfSize(){
div2.style.width="50px";
div2.style.height="50px";
}
function defaultSize(){
div2.style.width="100px";
div2.style.height="100px";
}
function doubleSize(){
div2.style.width="200px";
div2.style.height="200px";
}
</script>
</body>
</html>