문제 1) 버튼 클릭시 alert창을 띄우고, 배경색상을 바꿔라
<!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>이벤트 처리기</title>
<style>
a:link,
a:visited {
color: black;
text-decoration: none;
}
ul {
list-style: none;
width: 500px;
margin: 10px auto;
padding: 0;
}
li {
display: inline-block;
width: 120px;
border: 1px solid #ccc;
padding: 10px 15px;
font-size: 16px;
text-align: center;
}
#result {
width: 500px;
height: 300px;
margin: 30px auto;
border: 2px solid #000;
border-radius: 15px;
transition: 1s;
}
p {
width: 80%;
padding: 10px;
line-height: 2em;
}
</style>
</head>
<body>
<ul>
<h3>alert창 띄우기</h3>
<li>
<a href="#" onclick="alert('Green 버튼을 클릭하였습니다.')">Green</a>
</li>
<li>
<a href="#" onclick="alert('Orance 버튼을 클릭하였습니다.')">Orance</a>
</li>
<li>
<a href="#" onclick="alert('Purple 버튼을 클릭하였습니다.')">Purple</a>
</li>
</ul>
<ul>
<h3>배경생 바꾸기</h3>
<li>
<a href="#" onclick="changeBg('green')">Green</a>
</li>
<li>
<a href="#" onclick="changeBg('orange')">Orange</a>
</li>
<li>
<a href="#" onclick="changeBg('purple')">Purple</a>
</li>
</ul>
<div id="result"></div>
<script>
function changeBg(color) {
var result = document.querySelector("#result"); // HTML요소 중 아이디 값이 result인 요소 가져옴
result.style.backgroundColor = color; //가져온 요소의 배경색을 매개변수로 전달받은 색상 값으로 변경함
}
</script>
</body>
</html>
문제 2) 상세설명 글 열기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트 이벤트</title>
<style>
button {
background-color: rgba(255, 255, 255, 0.7);
padding: 5px;
border: 1px solid #ccc;
font-size: 0.8em;
}
.over {
left: 30px;
bottom: 30px;
}
.detail {
width: 400px;
text-align: left;
line-height: 1.8;
display: none;
}
</style>
</head>
<body>
<div id="item">
<button class="over" id="open" onclick="showDetail()">
상세 설명 보기
</button>
<div id="desc" class="detail">
<h4>등심붓꽃</h4>
<p>
북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다.
길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고
있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한
개체들을 많이 만들어 냄으로써 번식한다.
</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<script>
function showDetail() {
document.querySelector("#desc").style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector("#open").style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() {
document.querySelector("#desc").style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector("#open").style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
</script>
</body>
</html>
댓글