<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: dodgerblue;
}
.output{
width: 1000px;
height: 400px;
text-align: center;
line-height: 400px;
background-color: rgba(255,255,255,0.6);
color: black;
margin: 50px auto;
font-size: 100px;
}
ul{
text-align: center;
}
li{
padding: 10px 20px;
background-color: #ccc;
display: inline-block;
margin: 0 20px;
}
.btn1{
color: dodgerblue;
}
.btn2{
color: tomato;
}
.btn3{
color: lawngreen;
}
.btn4{
color: turquoise;
}
.btn5{
color: orange;
}
</style>
</head>
<body>
<div id="container">
<div class="output">
Select Color
</div>
<ul>
<li class="btn1">dodgerblue</li>
<li class="btn2">tomato</li>
<li class="btn3">lawngreen</li>
<li class="btn4">turquoise</li>
<li class="btn5">orange</li>
</ul>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
// $(sel).attr(att); 해당 선택자의 특정 어트리뷰트(속성)의 value(값)을 가져옴
// $(sel).attr(att,val); 해당 선택자의 특정 어트리뷰트(속성)의 value(값)을 지정
$("ul li").on("click", function(){
var selColor = $(this).text();
//var selColor = $(this).attr("data-color"); //위에서 data-color를 선언해야 함
console.log(selColor);
$("#container").css("backgroundColor", selColor);
$(this).css({
"backgroundColor" : rgba(255, 255, 255 ,0.8),
"color" : selColor
}).siblings().css({
"backgroundColor" : rgba(255, 255, 255 ,0.4),
"color" : "#000"
});
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.