반응형
레이어드 팝업
픽셀말고 다른 거 배운댐
display:flex;
신기술ㄹㄹㄹ
선언은 위의 상위영역에 display:flex 주면 됨.
li 말고 ul에 줌
FLEX
<!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;}
ul,li{list-style: none;}
.gnb{
display:flex;
flex-direction: low;
}
</style>
</head>
<body>
<ul class="gnb">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
1234567이 옆으로 붙어짐
*{margin:0; padding:0;}
ul,li{list-style: none;}
.gnb{
width:600px;
height:300px;
background-color: teal;
display:flex;
flex-direction:low;
}
.gnb>li{
width:300px;
}
.gnb{
width:600px;
height:300px;
background-color: teal;
display:flex;
flex-direction:low;
flex-wrap:wrap; /*wrap, nowrap 차이 해당영역을 벗어나면 아래로 떨어뜨릴꺼냐 말꺼냐 설정가능. wrap-> 떨어뜨리겠다. nowrap -> 일자로 만들겠다. */
}
.gnb>li{
width:200px;
}
<!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;}
ul,li{list-style: none;}
.gnb{
width:600px;
height:300px;
background-color: teal;
display:flex;
flex-direction:low;
flex-wrap:wrap; /*wrap, nowrap 차이 해당영역을 벗어나면 아래로 떨어뜨릴꺼냐 말꺼냐 설정가능. wrap-> 떨어뜨리겠다. nowrap -> 일자로 만들겠다. */
justify-content: center; /*flex 박스안에 영역 정렬 */
}
.gnb>li{
width:200px;
}
.gnb>li:nth-child(1){background-color: red;}
.gnb>li:nth-child(2){background-color: orange;}
.gnb>li:nth-child(3){background-color: yellow;}
.gnb>li:nth-child(4){background-color: green;}
.gnb>li:nth-child(5){background-color: blue;}
.gnb>li:nth-child(6){background-color: navy;}
.gnb>li:nth-child(7){background-color: purple;}
</style>
</head>
<body>
<ul class="gnb">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
1자로 만들고 싶다
-> column
<!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;}
ul,li{list-style: none;}
.gnb{
width:300px;
height:900px;
background-color: teal;
display:flex;
flex-direction:column;
flex-wrap:nowrap; /*wrap, nowrap 차이 해당영역을 벗어나면 아래로 떨어뜨릴꺼냐 말꺼냐 설정가능. wrap-> 떨어뜨리겠다. nowrap -> 일자로 만들겠다. */
justify-content: center; /*flex 박스안에 영역 정렬 */
}
.gnb>li{
width:200px;
height:300px;
}
.gnb>li:nth-child(1){background-color: red;}
.gnb>li:nth-child(2){background-color: orange;}
.gnb>li:nth-child(3){background-color: yellow;}
.gnb>li:nth-child(4){background-color: green;}
.gnb>li:nth-child(5){background-color: blue;}
.gnb>li:nth-child(6){background-color: navy;}
.gnb>li:nth-child(7){background-color: purple;}
</style>
</head>
<body>
<ul class="gnb">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</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>
.w100{width:100%;}
.w1200{width:1200px; margin: 0 auto;}
body{background-color: rosybrown;}
#header_wrap{background-color: purple; height:100px;}
#visual{
height:500px;
margin-top:30px;
background-color: royalblue;
}
</style>
</head>
<body>
<div id="wrap" class="w100">
<div id="header_wrap" class="w100">
<div id="header" class="w1200">
HELLLLOOO
</div>
</div>
</div>
<div id="visual_wrap" class="w100">
<div id="visual" class="w1200">
</div>
</div>
</body>
</html>class w100/ w1200 으로 나눠서 하기
반응형
<!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">
<link rel="stylesheet" href="./반응형layout.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="./반응형mobile.css">
<title>Document</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>
<a href="./">
<img src="http://softeer.ai/images/common/logo.png" alt="logo" />
</a>
</h1>
<ul class="gnb">
<li><a href="#">Challenge</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">Class</a></li>
</ul>
<ul class="util">
<li><a href="#">Log in</a></li>
<li><a href="#">Join</a></li>
</ul>
<div id="side_area">
<input type="checkbox" id="side_flag" >
<label for="side_flag">
<span></span>
<span></span>
<span></span>
</label>
<div id="sidebar">
<ul>
<li class=""><a href="#">Challenge</a></li>
<li class=""><a href="#">Connect</a></li>
<li class=""><a href="#">careers</a></li>
<li class=""><a href="#">Class</a></li>
</ul>
</div>
</div>
</div>
<div id="main_wrap">
<div id="main_visual">
</div>
<div class="main_contents">
content start
</div>
</div>
<div id="footer">
aa
</div>
</div>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
a{
text-decoration:none;
}
img{
display:block;
line-height:0;
}
#wrap{
width:100%;
}
#header{
width:100%;
height:100px;
padding:35px 20px;
box-sizing: border-box;
border-bottom:1px solid #ededed;
}
*:after,*:before{
box-sizing: border-box;
}
/* header content */
#header > h1 { float:left; }
#header > h1 > a > img{ width:130px;}
#header > ul.gnb {display:inline-block; position:absolute; left:50%; transform:translateX(-50%); overflow:hidden;}
#header > ul.gnb > li {float:left;}
#header > ul.gnb > li > a {display:inline-block; width:120px;}
#header > ul.util { float:right; }
#header > ul.util > li { float:left; }
#header > ul.util > li:after{ content:"|"; }
#header > ul.util > li:last-child:after{ content:""}
#header > div#side_area{ float:right; display:none; }
#header > div#side_area > #side_flag{display:none;}
#header > div#side_area > #side_flag+label{
width:30px;
height:20px;
right: 30px;
display:block;
position:absolute;
cursor:pointer;
}
#header > div#side_area > #side_flag+label span{
position:absolute;
display:block;
width:100%;
height:3px;
background:#000;
z-index:5;
transition: all .35s; /* 움직임이0.35초안에 천천히 움직이게 */
}
#header > div#side_area > #side_flag+label span:nth-child(1){top:0px;}
#header > div#side_area > #side_flag+label span:nth-child(2){top:50%; transform:translateY(-50%)}
#header > div#side_area > #side_flag+label span:nth-child(3){bottom:0px;}
#header > div#side_area > #side_flag:checked+label span:nth-child(1){top:50%; transform:translateY(-50%) rotate(45deg);} /*45도 각도 */
#header > div#side_area > #side_flag:checked+label span:nth-child(2){opacity:0;}
#header > div#side_area > #side_flag:checked+label span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg);}
#header > div#side_area > #sidebar { /* "+" 인자접근자 + : 같은 영역에서 바로 아래에 있는 ex) #wrap+ul>li */
width:130px;
height:100%;
position:fixed;
top:0px;
right:-160px;
padding:75px 0 0 30px;
background:#fff;
z-index:2;
transition: all .35s;
}
#header > div#side_area > #sidebar > ul >li {margin-top:20px;}
#header > div#side_area > #side_flag:checked+label+#sidebar{
right:0px;
transition: all .35s;
}
#main_wrap{
width:100%;
float:left;
}
#main_visual{
width:inherit;
height:720px;
}
.main_contents{
width:1200px;
margin:0 auto;
padding: 140px 0 195px 0;
}
#footer{
clear:both;
width:100%;
height:100px;
}
/* Color set */
#header{}
#main_wrap{ background:#999; }
#main_visual{ background:#eee; }
.main_contents{ background:#ddd; }
#footer{ background:#666; }
@media screen and (max-width: 769px) {
#header{
height:50px;
padding:15px 20px;
position:fixed;
width:100%;
top:0px;
background:#fff;
}
#header > h1 > a > img{
width:80px;
}
#header > ul.gnb{
display:none !important;
}
#header > ul.util{
display:none;
}
#header > div#side_area{
display:block;
}
#main_visual{
height:300px;
}
.main_contents{
width:100%;
padding: 55px 0 100px 0;
}
#footer{
height:50px;
}
}
vw / vh 단위
vw - view 안에서 width
vh - view 에서 height
view 는 전체 브라우저 크기
1당 1%
90vh는 높이 기준으로 90%
100vw=100% 넓이 기준으로 100%
vw, vh 사용하면 축소했을 때 픽셀 그대로를 유지함
반응형에 큰 비쥬얼을 만들 때 요 단위들을 만들면 됨
레이아웃 팝업
<!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;}
#layer_popup_wrap{
width:100vw;
height:100vh;
background-color: black;
opacity:0.6;
position:fixed;
top:0;
display:none;
}
#layer_popup{
width:500px;
height:500px;
background-color: blanchedalmond;
position:relative; /*abolute도 상관없음 */
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.close{
width:80px;
height:30px;
background-color: blue;
color:brown;
line-height:27px;
border-radius: 15px;
padding: 7px 12px;
cursor: pointer;
display:inline-block;
text-align: center;
}
</style>
</head>
<body>
<button id="btn">레이어팝업</button>
<div id= "layer_popup_wrap" class ="" >
<div id="layer_popup">
이 부분에 내용이 나온다.
<span class="close">닫기</span>
</div>
</body>
<script type="text/javascript">
let layerBtn=document.querySelector('#btn');
//Element 객체 안에는 addEventListener라는 Method 존재함. Method에는 두가지 인자값 존재 (이벤트명(string), 콜백함수명)
layerBtn.addEventListener('click', layerFn) //layerFn-> 함수 명 layerBtn 을 클릭했을 때 옆 함수를 실행해라이~
function layerFn(){
let popup=document.querySelector('#layer_popup_wrap');
popup.style.display='block';
}
</script>
</body>
</html>
<script type="text/javascript">
let layerBtn=document.querySelector('#btn');
//Element 객체 안에는 addEventListener라는 Method 존재함. Method에는 두가지 인자값 존재 (이벤트명(string), 콜백함수명)
layerBtn.addEventListener('click', layerFn) //layerFn-> 함수 명 layerBtn 을 클릭했을 때 옆 함수를 실행해라이~
function layerFn(){
let popup=document.querySelector('#layer_popup_wrap');
if(popup.style.display=='none'){
popup.style.display='block';
}else{
popup.style.display=='none';
}
}
</script>
<script type="text/javascript">
let layerBtn=document.querySelector('#btn');
//Element 객체 안에는 addEventListener라는 Method 존재함. Method에는 두가지 인자값 존재 (이벤트명(string), 콜백함수명)
let closeBtn=document.querySelector('.close');
layerBtn.addEventListener('click', layerFn);//layerFn-> 함수 명 layerBtn 을 클릭했을 때 옆 함수를 실행해라이~
closeBtn.addEventListener('click', layerFn);
function layerFn(){
let popup=document.querySelector('#layer_popup_wrap');
//삼항연산자 if문을 한줄로 표현하는 법
let type=(popup.style.display=='none') ? 'block': 'none';
popup.style.display=type;
}
</script>
GNB SNB
<!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;}
ul,li{list-style:none;}
#wrap{width:100%}
#header{
width:1200px;
height:100px;
margin:0 auto;
}
.gnb{
display:flex;
flex-direction:row;
justify-content:space-between;
width:600px;
background-color: brown;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
이번엔는 li 안에다가 sub_menu를 만듬.
.gnb>li{
background-color:cadetblue;
width:30%;
}
width로 채워줌
snb 첨부터 안보이게 none 해주기
JS 위에 쓰면 실행이 안됨.
위에 쓰고싶을 때 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;}
ul,li{list-style:none;}
#wrap{width:100%}
#header{
width:1200px;
height:100px;
margin:0 auto;
}
.gnb{
display:flex;
flex-direction:row;
justify-content:space-between;
width:600px;
}
.gnb>li{
background-color:cadetblue;
width:30%;
}
.gnb>li>ul.snb{
display:none;
}
.gnb>li>ul.snb.on{
display:block;
}
</style>
<script type="text/javascript">
//window.addEventListener ('이벤트명을 스트링타입으로 Event:String', callback:function함수명)
window.addEventListener('DOMContentLoaded', init ) //페이지 load가 끝났을 때 / 윈도우가 모든페이지 로드가 끝나면 init 함수를 실행시켜라 ~~~악
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
//반복문 for x forEach 문을 쓸 예쩡 / 익명함수 배울 예쩡
//forEach -> 배열 반복 시... 많이 씀 ~
gnb.forEach(forFn); //array.forEach(callback함수가 첫 인자값으로 들어감. );
for(let i=0; i<gnb.length; i++){
console.log(i, gnb[i]);
}
function forFn(value, index){ // value -> index 두개의 값을 반환해줌
console.log(index,value);
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
익명함수 (함수 이름이 없음)
<script type="text/javascript">
//window.addEventListener ('이벤트명을 스트링타입으로 Event:String', callback:function함수명)
window.addEventListener('DOMContentLoaded', init ) //페이지 load가 끝났을 때 / 윈도우가 모든페이지 로드가 끝나면 init 함수를 실행시켜라 ~~~악
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
//반복문 for x forEach 문을 쓸 예쩡 / 익명함수 배울 예쩡
//forEach -> 배열 반복 시... 많이 씀 ~
gnb.forEach(function(ele){
console.log(ele)
});
//함수명 빠지고 바로 들어옴. a가 4번 찍힘
//function() <- 안에 인자값 받는 곳
}
function forFn(x){ // value -> index 두개의 값을 반환해줌
console.log(x); //
}
</script> <script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menuover);
});
}
function menuover(x){ // value -> index 두개의 값을 반환해줌
console.log('aaa');
}
</script>
gnb배열을 결과값으로 가져와서...................
다섯번째의 li를 추가해도 mouse 들어오면 aaa 입력됨.
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menuover);
});
}
function menuover(x){ // value -> index 두개의 값을 반환해줌
console.log('aaa');
}
</script>
<!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;}
ul,li{list-style:none;}
#wrap{width:100%}
#header{
width:1200px;
height:100px;
margin:0 auto;
}
.gnb{
display:flex;
flex-direction:row;
justify-content:space-between;
width:600px;
}
.gnb>li{
background-color:cadetblue;
width:30%;
}
.gnb>li>ul.snb{
display:none;
}
.gnb>li>ul.snb.on{
display:block;
}
</style>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
// gnb.forEach(function(ele){
// ele.addEventListener('mouseenter', menuover);
// });
// function menuover(x){ // value -> index 두개의 값을 반환해줌
// console.log('aaa');
// }
//현재 gnb는 배열임~
//gnb : [Element, Element, Element]
gnb.forEach(menuover); // gnb를 반복하겠다~ () 요런거 붙으면 뭔가 행동을 한다 ~~ mothod 임 //callback함수를 menuover라고 줌.
}
function menuover (ele, i){ // ele는 우리가 앞으로 받을 변수 ele, i 이런 내용으로 받겠다~ 인자값
//ele 첫번째인자값 i 첫번째 키값 -> forEach 두번째 실행될 때 ele, i에도 두번째 것들이 들어감
console.log(i, ele);
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu5
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
ㅇ
익명함수
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){console.log(ele);});
}
function menuover (ele, i){
console.log(i, ele);
}
</script>
한번 찍어보기 mouseenter 잘 되는지
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menuover);
});
}
function menuover (){
console.log('over');
}
</script>
function menuover (event){
console.log(event);
} function menuover (event){
console.log(event.currentTarget);
}
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menuover);
});
}
function menuover (event){
let snb=event.currentTarget.querySelector('.snb');
snb.classList.add('on');
}
</script>마우스 올리면 메뉴가 나옴.
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menuover);
ele.addEventListener('mouseleave', menuout);
});
}
function menuover (event){
let snb=event.currentTarget.querySelector('.snb');
snb.classList.add('on');
}
function menuout(event){
let snb=event.currentTarget.querySelector('.snb');
snb.classList.remove('on');
}
</script>
snb 전체 다 나오게 하는거
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menuover);
ele.addEventListener('mouseleave', menuout);
});
}
function menuover (event){
let snb=event.currentTarget.querySelector('.snb');
let snbAll=document.querySelectorAll('.snb'); // 전부 다 가져오는거 snb 다 띄우기
snbAll.forEach(function(ele){
ele.classList.add('on');
})
//snb.classList.add('on');
}
function menuout(event){
let snb=event.currentTarget.querySelector('.snb');
let snbAll=document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
ele.classList.remove('on');
})
//snb.classList.remove('on');
}
</script>
event.type
type이란?
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menu);
ele.addEventListener('mouseleave', menu);
});
}
function menu(event){
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
if(event.type=='mouseenter'){
ele.classList.add('on');
}else{
ele.classList.remove('on');
}
});
}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;}
ul,li{list-style:none;}
#wrap{width:100%}
#header{
width:1200px;
height:100px;
margin:0 auto;
}
.gnb{
display:flex;
flex-direction:row;
justify-content:space-between;
width:600px;
}
.gnb>li{
background-color:cadetblue;
width:30%;
}
.gnb>li>ul.snb{
display:none;
}
.gnb>li>ul.snb.on{
display:block;
}
</style>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', init )
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
gnb.forEach(function(ele){
ele.addEventListener('mouseenter', menu);
ele.addEventListener('mouseleave', menu);
});
}
function menu(event){
let snbAll = document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
if(event.type=='mouseenter'){
ele.classList.add('on');
}else{
ele.classList.remove('on');
}
});
}
function menuover (event){
let snb=event.currentTarget.querySelector('.snb');
let snbAll=document.querySelectorAll('.snb'); // 전부 다 가져오는거 snb 다 띄우기
snbAll.forEach(function(ele){
ele.classList.add('on');
})
//snb.classList.add('on');
}
function menuout(event){
let snb=event.currentTarget.querySelector('.snb');
let snbAll=document.querySelectorAll('.snb');
snbAll.forEach(function(ele){
ele.classList.remove('on');
})
//snb.classList.remove('on');
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
<li>menu5
<ul class="snb">
<li>sub_menu1</li>
<li>sub_menu2</li>
<li>sub_menu3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Return
<!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>
<script type = "text/javascript">
function Apple(){
a = 1;
return a;
b = 2;
c = 3;
return a+b+c; // 함수는 return을 만나면 함수가 종료됨 커서가 바로 내려감. 결과는 1 만 나옴.
}
num = Apple();
console.log(num);
document.querySelector('#wrap'); //Element 객체로 return 해주는거 ()괄호가 있으면 보통 리턴이 있음.
</script>
</head>
<body>
</body>
</html>
재귀함수
자기 자신을 호출하는 함수
<script type = "text/javascript">
function Apple(){
console.log('a');
Apple();
}
num = Apple();
</script>
무한반복됨..
<script type = "text/javascript">
let num=0;
function Apple(){
if(num==10){
console.log(num);
return num;
}
num++;
Apple();
}
Apple();
</script>
while 보다 재귀함수가 메모리에 더 좋다고 함.
<!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>
<script type = "text/javascript">
function Donut(num){
if(num<=2){
console.log(-1);
return -1;
} else if ( 3<=num && num<=4){
console.log(1);
return 1;
} else if( num%5==0){
console.log(num/5);
return num/5;
}else if (num>=5){
console.log(Math.floor(num/5)+1);
return Math.floor(num/5)+1;
}
}
Donut();
</script>
</head>
<body>
</body>
</html>
parseInt
도넛 박스에 3개짜리, 5개짜리 담는거 - 정담은 구글에
<!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>
<script type = "text/javascript">
/* function Donut(num){
if(num<=2){
console.log(-1);
} else if( num%5==0){
console.log(num/5);
}else {
console.log(Math.floor(num/5)+1);
}
}
Donut(num);
// 3개 넣는 박스 , 5개 넣는 박스
function Donut2(no){
if(no%3==0 && no%8!=0){
console.log(no/3);
} else if(no%5==0){
console.log(no/5);
} else if(no%8==0){
console.log(no/8*2);
}else{
console.log(-1)
}
}
Donut2(18);
function Donut3(nom){
if(nom%5==3){
console.log(Math.floor(nom/5+1));
} else if (nom%3==0){
console.log(nom/3);
} else if (nom%5==0){
console.log(nom/5);
} else{
console.log(-1);
}
}
Donut3(21);
function Donut4(nomb){
if(nomb%5==0){
console.log(nomb/5);
}else if(nomb%5==3){
console.log(Math.floor(nomb/5+1));
}else if(nomb%3==0){
console.log(nomb/3);
}else{
console.log(-1)
}
}
Donut4();
function Donut2(no){
if(no%5==0){
console.log(no/5);
} else if(no%5==3){
console.log(Math.floor(no/5+1));
}else if(no%8==0){
console.log(no/8*2);
}else if(no%3==0 && no%8!=0){
console.log(no/3);
}else{
console.log(-1)
}
}
Donut2(21);*/
</script>
</head>
<body>
</body>
</html>
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [22일차] 20210413 fiverr slide 슬라이드 배열? 로 바꾸기 업그레이드 시키기 (0) | 2021.04.13 |
|---|---|
| [21일차 연습] (0) | 2021.04.13 |
| [20일차]20210409 fiverr 웹사이트 만들기 마지막 (0) | 2021.04.09 |
| [19일차] 20210408 fiverr웹사이트 만들기 (inspired 만 남음) (0) | 2021.04.08 |
| [18일차]20210407 fiverr 웹사이트 만들기 (scroll스크롤 이벤트, font 폰트 바꾸기 ) (0) | 2021.04.07 |
