disply flex 를 이용한 lay out 정렬
space_
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.gnb{
width: 300px;
height: 900px;
display: flex;
flex-direction: column; /*row 는 가로방향 column 은 세로 방향*/
flex-wrap: nowrap; /*gnb width 600px; 랩을 쓰면 영역이 넘어가면 떨어뜨리겠다 노랩을 쓰면 안떨러뜨리겠다*/
justify-content: center ; /*flex 박스안에 영역 정렬*/
}
.gnb>li{
width: 200px;
height: 300px;
}
.gnb>li:nth-child(1){background: red;}
.gnb>li:nth-child(2){background: violet;}
.gnb>li:nth-child(3){background: yellow;}
.gnb>li:nth-child(4){background: blanchedalmond;}
.gnb>li:nth-child(5){background: black;}
.gnb>li:nth-child(6){background: brown;}
.gnb>li:nth-child(7){background: blueviolet;}
</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>class 를 이용한 빠르게 레이아웃 틀 짜기
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.w100{
width: 100%;
}
.w1200{
width: 1200px;
margin: 0 auto;
}
body{
background: #ffff;
}
#header_wrap{
background: blueviolet;
height: 100px;
}
#visual_wrap{
height: 500px;
margin-top: 50px;
background: burlywood;
}
</style>
</head>
<body>
<div id="wrap" class="w100">
<div id="header_wrap" class="w100">
<div id="header" class="w1200">
adfsdf
</div>
</div>
</div>
<div id="visual_wrap" class="w100">
<div id="visual" class="w1200">
</div>
</div>*vw 와 vh의 단위
vw : view width
vh : view height
view 는 브라우저 전체 크기
1당 1% 로 계산
90vh 는 높이 기준으로 =90%
100vw 는 넓이기준으로 =100%
축소 확대를 하더라도 크기의 변화가 없다.
반응형을 만들때 활용하기 좋다.
메인 비주얼에 활용하기 좋다.
*layout popup
* {margin: 0; padding: 0; }
ul,li {list-style: none;}
body {width: 100%;height: 100%;}
#layer_popup_wrap {
width: 100vw;
height: 100vh;
background-color: black;
opacity: 0.6;
position: fixed;
top: 0;
display: none;
}
#layer_popup {
position: relative;
width: 500px;
height: 500px;
background: #ffffff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.close {
background: black;
color: #fff;
width: 200px;
height: 30px;
line-height: 22px;
border-radius: 15px;
padding: 7px 12px;
display: inline-block;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn">레이러 팝업</button>
<!-- 레이업 팝업 -->
<div id="layer_popup_wrap">
<div id="layer_popup">
이 부분에 내용이 나올겁니다.
<span class="close">닫기버튼</span>
</div>
</div>
<!-- 레이업 팝업 -->
<script type="text/javascript">
let layerBtn = document.querySelector('#btn');
let closeBtn = document.querySelector('.close');
// Evenent.addEventListener(이벤트명:string,콜백함수 :function()) 매서드가 존재한다.
layerBtn.addEventListener('click', layerFn);
closeBtn.addEventListener('click', layerFn)
function layerFn() {
let popup = document.querySelector('#layer_popup_wrap');
popup.style.display = 'block';
if (popup.style.display == 'none') {
popup.style.display == 'block';
} else {
popup.style.display == 'none';
}
}
</script>
</body>
**
Evenent.addEventListener(이벤트명:string,콜백함수 :function())
이걸 활용하면 굳이 html 에서onclick 을 쓰지않아도 script 안에서 활용이 가능하다.
*if문 줄여 쓰기
<script type="text/javascript">
let layerBtn = document.querySelector('#btn');
let closeBtn = document.querySelector('.close');
// Ekenent.addEventListener(이벤트명:string,콜백함수 :function()) 매서드가 존재한다.
layerBtn.addEventListener('click', layerFn);
closeBtn.addEventListener('click', layerFn)
function layerFn() {
let popup = document.querySelector('#layer_popup_wrap');
let type= (popup.style.display == 'none') ? 'block' : 'none';
popup.style.display=type;
}
</script>script 는 html 값을 먼저 불러오기 때문에 html 에 직접 style을 알려줘야 한번에 기능을 활용할수있다.
html에 값을 안 알려주면 두번 눌러야 실행이 된다.
<div id="layer_popup_wrap" style="display:none;">*메뉴 네비게이션 바 간편하게 만들기
기존에는 다른 영역에 따로만들어서 어렵게 만들었는데
그 해당 영역안에 만들어 코드를 간편하게 만든다.
*script 반복문을 for 말고 forEach 에 익명함수 를 사용하기
forEach 안에 value,index 값을 가져오는데 value 는 엘리먼트 index는 배열위치라고 생각하면된다.
<script type="text/javascript">
// window.addEventListener(event:string)
window.addEventListener('DOMContentLoaded',init);
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
// 반복문 for X forEach (배열을 반복할때 사용) //익명함수를
//익명함수 = 함수이름이 없는 함수가 익명함수다.
gnb.forEach(function(ele){
ele.addEventListener('mouseenter',menuover);
ele.addEventListener('mouseleave',menuout);
});
}
//['ABC','EEE','TTT','CCC'] forFn(vlaue 엘리먼트,index 배열순서)
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>*마우스 이벤트 및
<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{width: 30%; }
.gnb>li>ul.snb{display: none;}
.gnb>li>ul.on{display: block;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb on">
<li>menu-1-1</li>
<li>menu-1-3</li>
<li>menu-1-2</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>menu-2-1</li>
<li>menu-2-3</li>
<li>menu-2-2</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>menu-3-1</li>
<li>menu-3-3</li>
<li>menu-3-2</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>menu-4-1</li>
<li>menu-4-3</li>
<li>menu-4-2</li>
</ul>
</li>
<li>menu5
<ul class="snb">
<li>menu-4-1</li>
<li>menu-4-3</li>
<li>menu-4-2</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
// window.addEventListener(event:string)
window.addEventListener('DOMContentLoaded',init);
function init(){
let gnb=document.querySelectorAll('.gnb>li');
console.log(gnb);
// 반복문 for X forEach (배열을 반복할때 사용) //익명함수를
//익명함수 = 함수이름이 없는 함수가 익명함수다.
gnb.forEach(function(ele){
ele.addEventListener('mouseenter',menuover);
}); //Array.forEach(calback:funcrion);
}
//['ABC','EEE','TTT','CCC'] forFn(vlaue 엘리먼트,index 배열순서)
function menuover(){
console.log('aaa');
}
</script>
</body> function menuover(event){
let snb=event.currentTarget.querySelector('.snb');
let snbAll=document.querySelectorAll('.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 type="text/javascript">
// window.addEventListener(event:string)
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);
});
}
//['ABC','EEE','TTT','CCC'] forFn(vlaue 엘리먼트,index 배열순서)
function menuover(event){
let snb=event.currentTarget.querySelector('.snb');
let snbAll=document.querySelectorAll('.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');
}
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 Apple(){
a=1;
return a;
b=2;
c=3;
return b+c;
}
num=Apple();
console.log(num);*return 값 호출하기
function Apple(x){
return 2*x;
}
num=Apple(2);
console.log(num);*재귀함수
let num = 0;
function Apple(){
if(num==10){
console.log(num);
return num;
}
num++;
Apple()
}
Apple();*알고리즘 만들기
function Apple(x){
if(x%5==0){
return x/5;
}else if(x%5!=0){
return ((x-(x%5))/5)+1
}
}
box= Apple(7);
console.log(box);
function banana(y) {
if (y % 5 == 0) {
return y / 5;
} else if (y % 5 == 3) {
return ((y - (y % 5)) / 5) + 1;
} else if (y % 5 != 0) {
if (y % 3 == 0) {
return y / 3;
} else {
return -1
}
}
}
box2 = banana(17)
console.log(box2);