<!DOCTYPE html>
<html lang="ko">
<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>
#item {
position:relative; /*문서의 흐름에 맞게 배치 + 위칫값 지정*/
width:500px;
height:auto;
padding:15px 20px;
margin:auto;
}
button {
background-color:rgba(255,255,255,0);
padding:5px;
border:1px solid #ccc;
font-size:0.8em;
}
button:focus {
background-color:red;
}
.over {
position:absolute; /*relative값을 사용한 상위요소를 기준으로 위치를 지정해 배치*/
left:30px;
bottom:30px;
background-color:white;
}
.detail {
width:400px;
text-align:left;
line-height:1.8;
display:none; /*해당 요소를 화면에 표시하지 않음*/
}
</style>
</head>
<body>
<div id="item">
<img src="images/flower.jpg" alt="">
<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>
'JavaScript' 카테고리의 다른 글
| 15장 마무리 문제 1 (0) | 2023.04.08 |
|---|---|
| 15장 - DOM을 이용한 이벤트 처리기 (0) | 2023.04.08 |
| 15장 - 이벤트와 이벤트 처리기 (0) | 2023.04.07 |
| 15장 - 익명 함수/ 즉시 실행 함수/ 화살표 함수 (0) | 2023.04.07 |
| 15장 실습 (0) | 2023.04.07 |
