Stack/JavaScript
[JS] click 실습
7ingout
2022. 4. 27. 17:37
1) 4로 나눠지는 숫자를 입력하세용 (19ex.html)
<!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>Document</title>
</head>
<body>
<script>
let input = prompt('4로 나눠지는 숫자를 입력하세요.');
if(input % 4 == 0 ) {
alert('4로 나눠집니당~')
console.log(input);
}
else {
alert('안됩니당')
console.log(input);
}
</script>
</body>
</html>
2) 19_2_t_ex.html
<!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>Document</title>
<style>
* { margin:0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
body, html {
width: 100%;
height: 100%;
font-family: "맑은 고딕";
font-size: 14px;
line-height: 1.6;
}
#sitemap-view {
width: 20px;
height: 20px;
position: absolute;
top: 80px;
right: 20px;
transition: 0.5s;
}
#sitemap-view.on {
transform: rotate(360deg);
}
#sitemap-view.on span:nth-child(1) {
transform: rotate(45deg) translate(4px, -7px);
}
#sitemap-view.on span:nth-child(2) {
opacity: 0;
}
#sitemap-view.on span:nth-child(3) {
transform: rotate(-45deg) translate(-4px, -7px);
}
#sitemap-view span {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #333;
width: 3px;
transition: 0.5s;
}
#sitemap-view span:nth-child(2) {
background: #9c2033;
left: 8px;
height: 10px;
top: 5px;
}
#sitemap-view span:nth-child(3) {
left: 16px;
}
#sitemap {
position: absolute;
left: 0;
right: 60px;
height: 100%;
opacity: 0;
transition: 0.5s;
}
#sitemap.on {
opacity: 1;
}
#sitemap > ul {
width: 100%;
display: flex;
height: 100%;
}
#sitemap > ul > li {
width: 20%;
border-right: 1px solid #ccc;
padding-top: 60px;
padding-left: 40px;
position: relative;
overflow: hidden;
}
#sitemap > ul > li h2,#sitemap > ul > li ul {
margin-left: -100%;
transition: 0.5s;
}
#sitemap.on > ul > li h2,#sitemap.on > ul > li ul {
margin-left: 0;
}
.bg {
width: 100%;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: #9c2033;
transition: 0.5s;
}
.on .bg{
width: 0;
}
</style>
</head>
<body>
<div id="sitemap-view">
<span></span>
<span></span>
<span></span>
</div>
<div id="sitemap">
<ul>
<li>
<div class="bg"></div>
<h2>회사소개</h2>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>사업분야</h2>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>투자정보</h2>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>인재경영</h2>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>미디어센터</h2>
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
</ul>
</div>
<script>
let viewdiv = document.querySelector('#sitemap-view');
let sitemap = document.querySelector('#sitemap');
viewdiv.addEventListener('click', function(){
// toggle은 on클래스가 있으면 제거 없으면 붙여줌
viewdiv.classList.toggle('on');
sitemap.classList.toggle('on');
// document.querySelector('#sitemap').classList.toggle('on');
});
</script>
</body>
</html>