큰 이미지 밑에 있는 작은 이미지를 클릭하면 큰 이미지로 변경 되는 코드를 만들었고 상세 설명 보기를 누르면 상세 설명 보기를 누르면 설명 페이지가 펼쳐지고 상세 설명 닫기를 누르면 상세 페이지가 닫아지는 코드를 작성하였다.
1. html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-pic">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
<div id="small-pic">
<img src="images/coffee-pink.jpg" class="small">
<img src="images/coffee-blue.jpg" class="small">
<img src="images/coffee-gray.jpg" class="small">
</div>
</div>
<div id="desc">
<ul>
<li>상품명 : 에디오피아 게뎁</li>
<li class="bluetext">판매가 : 9,000원</li>
<li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2019.06.17</li>
<button>장바구니 담기</button>
</ul>
<a href="#" id="view">상세 설명 보기</a>
</div>
<hr>
<div id="detail">
<h2>상품 상세 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>Information</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>Flavor Note</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
<script src="js/product-result.js"></script>
</body>
</html>2. 자바스크립트 전체 코드
var 큰그림 = document.querySelector('#cup');
var 작은그림 = document.querySelectorAll('.small');
var 오픈 = false;
for(var i =0; i<작은그림.length; i++){
작은그림[i].addEventListener('click', function(){
큰그림.setAttribute('src', this.src);
})
}
var 뷰 = document.querySelector('#view');
뷰.addEventListener('click', function(){
if(오픈 == false){
document.querySelector('#detail').style.display = 'none';
뷰.textContent = "상세 설명 보기";
오픈 = true;
}
else{
document.querySelector('#detail').style.display = 'block';
뷰.textContent = "상세 설명 닫기";
오픈 = false;
}
});변수 선언에 html 코드를 불러왔고 오프 변수에는 false를 저장하였다.
for문에서는 이미지에 접근하여 작은 이미지를 클릭하면 큰 이미지에 적용 되는 코드를 만들어 주었다.
뷰 변수를 선언하였고 if문으로 상세설명 보기/닫기를 만들었다. 처음 만들어준 변수 오픈이 만약 false면 true로 바뀌주고 textContent도 바꿔주었다. 그리고 가장 중요한 false에서는 display 'none' 으로 되어있는것을 display 'block' 으로 바꿔주면 상세 설명 페이지를 보여준다.
