1) ex06.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;}
#wrap {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
#wrap > div {
position: relative;
transition: 0.5s;
overflow: hidden;
}
#wdiv {
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: 100%;
background: pink;
transition: 0.5s;
}
#wdiv.on {
left: 0;
opacity: 0;
}
#wrap > div:not(:last-child) {
width: 100%;
border-right: 1px solid #ccc;
overflow: hidden;
position: relative;
}
/* #wrap > div:not(:last-child)::after {
content: "";
display: block;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
background: tomato;
}
#wrap > div:not(:last-child)::after.abc {
/* width: 100%; */
/* left: 0;
background: pink;
} */
ul {
width: 100%;
height: 100%;
position: absolute;
top: 80px;
left: 30px;
transition: 0.5s;
}
ul.ch {
left: -130px;
opacity: 0;
}
#xdiv {
width: 20%;
top: 80px;
left: 30px;
}
#x {
border: none;
background: #fff;
font-size: 30px;
transition: 0.5s;
}
#x.rot {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="wrap">
<div>
<ul id="ull">
<h2>회사소개</h2>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
<div id="wdiv"></div>
</div>
<div>
<ul id="ull">
<h2>사업분야</h2>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
<div id="wdiv"></div>
</div>
<div>
<ul id="ull">
<h2>투자정보</h2>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
<div id="wdiv"></div>
</div>
<div>
<ul id="ull">
<h2>인재경영</h2>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
<div id="wdiv"></div>
</div>
<div>
<ul id="ull">
<h2>미디어센터</h2>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
<div id="wdiv"></div>
</div>
<div id="xdiv">
<button id="x" onclick="move()">X</button>
</div>
</div>
<script>
function move(){
document.querySelectorAll('ul')[0].classList.toggle('ch');
document.querySelectorAll('ul')[1].classList.toggle('ch');
document.querySelectorAll('ul')[2].classList.toggle('ch');
document.querySelectorAll('ul')[3].classList.toggle('ch');
document.querySelectorAll('ul')[4].classList.toggle('ch');
document.querySelectorAll('#wdiv')[0].classList.toggle('on');
document.querySelectorAll('#wdiv')[1].classList.toggle('on');
document.querySelectorAll('#wdiv')[2].classList.toggle('on');
document.querySelectorAll('#wdiv')[3].classList.toggle('on');
document.querySelectorAll('#wdiv')[4].classList.toggle('on');
document.querySelector('#x').classList.toggle('rot');
}
</script>
</body>
</html>2) ex06_teach.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 {
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(3) {
transform: rotate(-45deg) translate(-4px, -7px);
}
#sitemap-view.on span:nth-child(2) {
opacity: 0;
}
#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');
});
</script>
</body>
</html>3) 20switch.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까지 숫자를 입력해주세요.'); //prompt는 string으로 입력된다!
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;
default:
console.log('숫자가 아닙니다.')
}
//날짜
let today = new Date();
let year = today.getFullYear();
let month = today.getMonth()+1; //달은 +1을 해준다.
let date = today.getDate();
let day = today.getDay(); //요일은 숫자로 나타난다. ex) 0:일요일, 4:목요일
//switch문
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 (day === 0){
day = '일요일';
}else if (day === 1){
day = '월요일';
}else if (day === 2){
day = '화요일';
}else if (day === 3){
day = '수요일';
}else if (day === 4){
day = '목요일';
}else if (day === 5){
day = '금요일';
}else if (day === 6){
day = '토요일';
}
//방법1 (방법2보다 방법1이 더 편하다)
console.log(`년도는 ${year}이고
달은 ${month}이고
일은 ${date}이고
요일은 ${day}이다.`)
//방법2
console.log('년도는'+year+'이고 달은'+month+'이고 일은'+date+'이고 요일은'+day+'이다.')
</script>
</body>
</html>4) ex07_teach.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 > div {
width: 70%;
margin: 100px auto;
background: #eee;
border-radius: 10px;
text-align: center;
padding: 80px;
line-height: 1.6;
}
h2 {
padding: 30px;
border-bottom: 1px solid #ccc;
margin-bottom: 30px;
}
#moneyView {
line-height: 50px;
font-weight: bold;
}
button {
border: 0;
outline: 0;
background: blueviolet;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<div>
<h2>화면</h2>
<ul>
<li>A음료수 : 500원</li>
<li>B음료수 : 700원</li>
<li>C음료수 : 1000원</li>
</ul>
<div id="moneyView">현재금액: 0원</div>
<p><button id="btn100">100</button>
<button id="btn500">500</button>
<button id="btn1000">1000</button></p>
</div>
<script>
//버튼을 변수에 담기
let btn100 = document.querySelector('#btn100');
let btn500 = document.querySelector('#btn500');
let btn1000 = document.querySelector('#btn1000');
let moneyView = document.querySelector('#moneyView');
let money = 0;
//버튼을 클릭하면 1.money가 증가
//2.잔액을 표시
//3.살 수 있는 음료수는 경고창에 표시
btn100.addEventListener('click', function(){
money += 100;
console.log(money);
moneyView.innerHTML = `현재금액: ${money}원`;
comparison();
});
btn500.addEventListener('click', function(){
money += 500;
console.log(money);
moneyView.innerHTML = `현재금액: ${money}원`;
comparison();
});
btn1000.addEventListener('click', function(){
money += 1000;
console.log(money);
moneyView.innerHTML = `현재금액: ${money}원`;
comparison();
});
function comparison(){
if (money >= 1000){
alert('A,B,C음료수 선택 가능!');
}else if (money >= 700){
alert('A,B음료수 선택 가능!');
}else if (money >= 500){
alert('A음료수 선택 가능!');
}else {
alert('선택가능한 음료수가 없음!')
}
}
</script>
</body>
</html>5) ex08.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>
#wrap {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
#wrap > div {
text-align: center;
}
#box {
width: 120px;
height: 120px;
border: 3px solid #111;
margin-left: 80px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<div id="box"></div>
<p><input type="text" id="col"><button id="btn">선택</button></p>
</div>
</div>
<script>
let col = document.querySelector('#col'); //input 변수
let btn = document.querySelector('#btn'); //button 변수
let box = document.querySelector('#box'); //div #box 변수
//button클릭하면
//input의 값을 받아옴
//그값이 red면 div의 배경색을 red로 변경
btn.addEventListener('click', function(){
if (col.value === 'red'){ //input은 value값으로 받아와야한다!!
box.style.background = 'red';
}
if (col.value === 'blue'){
box.style.background = 'blue';
}
if (col.value === 'green'){
box.style.background = 'green';
}
});
</script>
</body>
</html>6) ex08_teach.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;}
#wrap {
width: 60%;
height: 100vh;
margin: 50px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#color {
width: 300px;
height: 300px;
border: 3px solid #333;
margin-bottom: 20px;
}
input {
width: 160px;
height: 30px;
border: 1px solid #ccc;
outline: none;
}
button {
width: 70px;
height: 30px;
background: violet;
color: #fff;
border: none;
outline: none;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="color"></div>
<div>
<input type="text" id="input"><button>선택</button>
</div>
</div>
<script>
//button을 클릭하면
//input의 값을 받아옴
//input의 값이 red, green, blue일때만 color아이디를 가진
//div의 배경색을 해당하는 값으로 변경
//다른 색일때는 하얀색 배경색으로 지정
document.querySelector('button').addEventListener('click', function(){
let inputColor = document.querySelector('input').value;
//if문
// if(inputColor === 'red' || inputColor === 'green' || inputColor === 'blue'){
// document.querySelector('#color').style.background = inputColor;
// }else {
// document.querySelector('#color').style.background = '#fff';
// }
//switch문
// switch(inputColor){
// case 'red':
// document.querySelector('#color').style.background = inputColor;
// break;
// case 'green':
// document.querySelector('#color').style.background = inputColor;
// break;
// case 'blue':
// document.querySelector('#color').style.background = inputColor;
// break;
// default:
// document.querySelector('#color').style.background = '#fff';
// }
//삼항조건식
(inputColor === 'red' || inputColor === 'green' || inputColor === 'blue') ?
document.querySelector('#color').style.background = inputColor :
document.querySelector('#color').style.background = '#fff';
document.querySelector('input').value = "";
});
</script>
</body>
</html>'노력이 좋아서' 카테고리의 다른 글
| <step31>'js_메소드, 객체' (0) | 2022.05.02 |
|---|---|
| <step30>'js_while' (0) | 2022.04.29 |
| <step28>'js_조건문(if)' (0) | 2022.04.27 |
| <step27>'js_변수선언, 함수선언' (1) | 2022.04.26 |
| <step26>'js_기초' (0) | 2022.04.25 |