기초공사 (html,css,javascript)
05_toggle클릭할때마다 본문
//마무리문제
<style>
.........
.hidden {
display:none;
}
</style>
<body>
<div id="container">
<h1>Do it! HTML+CSS+자바스크립트 웹 표준의 정석</h1>
<div id="top">
<img src="images/book.png" width="250" alt="책 표지">
<ul>
<li><b>저자</b> 고경희</li>
<li><b>발행일</b> 2021-01-22</li>
<li><b>쪽수</b> 648쪽</li>
<li><b>ISBN</b> 979-11-6303-221-2, 13000</li>
<li><button id="view">상세 설명 보기 / 닫기</button></li>
</ul>
</div>
<div id="detail" class="hidden">
<h2>-------------------------- <br>
웹 분야 1위! 그만한 이유가 있다! <br>
키보드를 잡고 실습하다 보면 <br>
웹 개발의 3대 기술이 끝난다! <br>
--------------------------
</h2>
<p>웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 쉽게 실습할 수 있고, 중요한 문법만 다시 공부하고 싶은 중∙고급자에게도 도움이 된다.</p>
<p>친절한 설명은 기본! 핵심만 쏙쏙 뽑아서 실무에 바로 사용할 수 있는 예제도 풍성하게 담겨 있다. 또한 최신 웹 표준 기술인 HTML5, CSS3, 자바스크립트(ES6)를 기준으로 설명하며 책의 모든 내용을 압축한 최종 프로젝트 〈웹 사이트 만들기〉 PDF 전자책을 무료로 추가 제공한다. 수많은 독자가 입을 모아 ‘웹 분야의 교과서’라고 부르는 이유를 지금 확인해 보자! </p>
</div>
</div>
<script src="js/quiz1.js"></script>
</body>
</html>const content = document.querySelector("#detail"); //숨겨있는내용
const btn = document.querySelector("#view"); //button
console.log(content);
//버튼을 클릭할때마다 toggle함수 실행. .hidden
btn.onclick = () => {
content.classList.toggle("hidden");
}
/* toggle풀어씀
btn.onclick = () => {
if(!content.classList.contains("hidden")){
content.classList.add("hidden");
} else{
content.classList.remove("hidden");
}
}
*/
'javascript > js_study' 카테고리의 다른 글
| 07_DOM활용하기(노드추가, 연결, 삭제) (0) | 2023.06.06 |
|---|---|
| 05_toggle_간단한예제 (0) | 2023.05.28 |
| 05_form_ 폼요소 가져와서 적용하기 (0) | 2023.05.28 |
| 05_selectedIndex (0) | 2023.05.26 |
| 04_타이머함수 (0) | 2023.05.21 |
'javascript/js_study' Related Articles
more
