<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<style>
div{
width: 100px;
height: 100px;
}
#redBox{
background-color: red;
}
#blueBox{
background-color: blue;
}
#greenBox{
background-color: green;
}
#grayBox{
background-color: gray;
}
</style>
<div id="redBox"></div>
<div id="blueBox"></div>
<div id="greenBox"></div>
<div id="grayBox"></div>
<button onclick="margin()">이동하기!</button>
<button onclick="radius()">둥글게!</button>
<script>
let div = document.querySelectorAll('div')
function margin() {
div[1].style.marginLeft = '100px'
div[2].style.marginLeft = '200px'
div[3].style.marginLeft = '300px'
}
function radius() {
div[0].style.borderBottomLeftRadius='50%'
div[0].style.borderTopRightRadius='50%'
div[1].style.borderBottomLeftRadius='50%'
div[1].style.borderTopRightRadius='50%'
div[2].style.borderBottomLeftRadius='50%'
div[2].style.borderTopRightRadius='50%'
div[3].style.borderBottomLeftRadius='50%'
div[3].style.borderTopRightRadius='50%'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<img src="https://cdn.nbnnews.co.kr/news/photo/202111/632351_631208_3045.jpg" width="300px">
<br>
<button onclick="ch()">이미지 변경!</button>
<script>
function ch() {
let img= document.getElementsByTagName('img')[0]
if(img.src == 'https://cdn.nbnnews.co.kr/news/photo/202111/632351_631208_3045.jpg'){
img.src = 'https://img.marieclairekorea.com/2021/09/mck_614d84fda7a59.jpg'
}else{
img.src = 'https://cdn.nbnnews.co.kr/news/photo/202111/632351_631208_3045.jpg'
}
}
</script>
</body>
</html>
