event.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>
div {
width: 500px;
height: 500px;
background: pink;
}
#a{
width: 50px;
height: 50px;
background: tomato;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
/* transition: 0.5s; */
}
</style>
</head>
<body>
<!-- (1)
<button id="btn" onclick="eventOn()">클릭하세요.</button>
<script>
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
</script> -->
<!-- (2)
<button id="btn">클릭하세요.</button>
<script>
document.querySelector('#btn').onclick = eventOn;
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
</script> -->
<!-- (3)
<button id="btn">클릭하세요.</button>
<script>
document.querySelector('#btn').addEventListener('click', eventOn);
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
</script> -->
<!-- (4) 마우스 올렸을 때
<button id="btn">클릭하세요.</button>
<script>
document.querySelector('#btn').addEventListener('mouseenter', eventOn);
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
</script> -->
<!-- (5) 마우스 올렸을 떄, 마우스 움직였을 때
<div id="box"></div>
<button id="btn">클릭하세요.</button>
<script>
document.querySelector('#btn').addEventListener('mouseenter', eventOn);
document.querySelector('div').addEventListener('mousemove', function(e){
// console.log('마우스를 움직였습니다.');
console.log(`x좌표는 ${e.pageX} 이고, y좌표는 ${e.pageY}이다.`)
})
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
</script> -->
<!-- (6) 따라다니는 동그라미 커서 만들기, 단위(px) 있어야됨
<div id="box"></div>
<div id="a"></div>
<button id="btn">클릭하세요.</button>
<script>
document.querySelector('#btn').addEventListener('mouseenter', eventOn);
document.querySelector('#box').addEventListener('mousemove', function(e){
document.querySelector('#a').style.left = `${e.pageX}px`;
document.querySelector('#a').style.top = `${e.pageY}px`;
console.log(`x좌표는 ${e.pageX} 이고, y좌표는 ${e.pageY}이다.`)
})
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
</script> -->
<!-- (7) 창 크기 조절 window -->
<div id="box"></div>
<div id="a"></div>
<button id="btn">클릭하세요.</button>
<script>
document.querySelector('#btn').addEventListener('mouseenter', eventOn);
document.querySelector('#box').addEventListener('mousemove', function(e){
document.querySelector('#a').style.left = `${e.pageX}px`;
document.querySelector('#a').style.top = `${e.pageY}px`;
console.log(`x좌표는 ${e.pageX} 이고, y좌표는 ${e.pageY}이다.`)
})
function eventOn() {
console.log('이벤트가 발생했습니다.');
}
// window.addEventListener('resize', function() {
// console.log('창 크기 조절 됨');
window.addEventListener('resize', function(e) {
console.log(e);
// console.log(e.target.innerWidth);
// console.log(e.target.innerHeight);
// document.querySelector('#box').style.window = `${e.target.innerWidth}px`;
// document.querySelector('#box').style.window = `${e.target.innerHeight}px`;
let wwid = window.innerWidth;
let whei = window.innerHeight;
document.querySelector('#box').style.window = `${wwid}px`;
document.querySelector('#box').style.window = `${whei}px`;
console.log(`Width는 ${wwid}, Height는 ${whei} 이다.`)
} )
</script>
</body>
</html>
menu.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 span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: #333;
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-view.on {
transform: rotate(360deg);
}
#sitemap-view.on span:nth-child(2) {
opacity: 0;
}
#sitemap-view.on span:nth-child(1) {
transform: rotate(45deg) translate(4px, -7px);
}
#sitemap-view.on span:nth-child(3) {
transform: rotate(-45deg) translate(-4px, -7px);
}
/* ▼▼ javascript 주기 전에 hover 로 먼저 확인하기 ▼▼ */
/* #sitemap-view:hover {
transform: rotate(360deg);
}
#sitemap-view:hover span:nth-child(2) {
opacity: 0;
}
#sitemap-view:hover span:nth-child(1) {
transform: rotate(45deg) translate(4px, -7px);
}
#sitemap-view:hover span:nth-child(3) {
transform: rotate(-45deg) translate(-4px, -7px);
} */
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#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;
overflow: hidden;
/* .bg 각각 100% 만들어주기 ↓ */
position: relative;
}
.bg {
width: 100%;
height: 100%;
position: absolute;
right: 0;
top: 0;
/* ▼▼ 크기가 줄어들며 오른쪽으로 사라짐 */
background: #9c2033;
transition: 0.5s;
}
.on .bg {
width: 0;
}
/* ▼▼ 왼쪽에서 나타남 */
#sitemap > ul > li h2, #sitemap > ul > li ul {
margin-left: -100%;
transition: 0.5s;
}
/* ▼▼ on클래스가 붙으면 margin 을 빼주기 */
#sitemap.on > ul > li h2, #sitemap.on > ul > li ul {
margin-left: 0;
}
</style>
</head>
<body>
<div id="sitemap-view">
<span></span>
<span></span>
<span></span>
</div>
<!-- ▼▼ 이벤트 주기 전에 sitemap 에 on클래스 붙여서 먼저 확인하기 -->
<div id="sitemap">
<ul>
<li>
<div class="bg"></div>
<h2>회사소개</h2>
<ul>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>사업분야</h2>
<ul>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>투자정보</h2>
<ul>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>인재경영</h2>
<ul>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
<li>
<div class="bg"></div>
<h2>미디어센터</h2>
<ul>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
<li>서브메뉴</li>
</ul>
</li>
</ul>
</div>
<script>
let viewdiv = document.querySelector('#sitemap-view');
// ▼▼ 클릭할 때 실행시켜줘, 뭘 실행할건지는 {} 안에
viewdiv.addEventListener('click', function(){
// ▼▼ toggle 은 on클래스가 있으면 제거, 없으면 붙여줌
viewdiv.classList.toggle('on');
document.querySelector('#sitemap').classList.toggle('on');
});
</script>
</body>
</html>
switch.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 num = prompt('1~5까지 숫자를 입력해주세요.');
switch(num) {
case '1':
console.log('1입니다.');
break;
case '2':
console.log('2입니다.');
break;
case '3':
console.log('3입니다.');
break;
case '4':
console.log('4입니다.');
break;
case '5':
console.log('5입니다.');
break;
default:
console.log('1~5 숫자가 아닙니다.');
}
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// today 는 시간날짜 다 가지고 있는 객체, 뒤get - 객체가 가지고 있는 매서드
// 정보를 받아와 각각의 변수에 담아줌, getDate → to
// ●● month 는 항상 +1 해주기
// ●● day 요일은 숫자로 나타냄, 0~6
let today = new Date();
let year = today.getFullYear();
let month = today.getMonth()+1;
let date = today.getDate();
let day = today.getDay();
// switch문, if문 둘 다 조건문이고 바꿔 사용가능
switch(day) {
case 0:
day = '일요일';
break;
case 1:
day = '월요일';
break;
case 2:
day = '화요일';
break;
case 3:
day = '수요일';
break;
case 4:
day = '목요일';
break;
case 5:
day = '금요일';
break;
case 6:
day = '토요일';
break;
}
// if문
// if
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
console.log(`년도는 ${year}이고
달은 ${month}이고
일은 ${date}이고
요일은 ${day}이다.`)
// ▼▼ 예전 방법
console.log('년도는 ' +year+
'이고 달은 ' +month+
'이고 일은 ' +date+
'이고 요일은 ' +day+ '이다.')
</script>
</body>
</html>
