// 파일명: l_page.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>
<script src="jquery-3.6.3.js" ></script>
<script src="jquery-ui.js" ></script>
<link href="l_page.css" rel="stylesheet" type="text/css">
<script src="l_page.js"></script>
</head>
<body>
<div id="wrap">
<div class="page" id="page_1">
<h1 class="button" id="page_2_go">2</h1>
</div>
<div class="page" id="page_2">
<h1 class="button" id="page_1_top">1</h1>
<h1 class="button" id="page_3_go">3</h1>
</div>
<div id="width_page_wrap">
<div class="page" id="page_3">
<h1 class="button" id="page_2_top">2</h1>
<h1 class="button" id="page_4_go">4</h1>
</div>
<div class="page" id="page_4">
<h1 class="button" id="page_3_left">3</h1>
<h1 class="button" id="page_5_go">5</h1>
</div>
<div class="page" id="page_5">
<h1 class="button" id="page_4_left">4</h1>
<h1 class="button" id="page_main">1</h1>
</div>
</div>
</div>
</body>
</html>// 파일명: l_page.css
*{
margin: 0;
padding: 0;
}
#wrap{
background: navy;
position: fixed;
top: 0;
left: 0;
}
.page{
position: relative;
border: 10px solid black;
box-sizing: border-box;
}
.button{
width: 100px;
height: 100px;
background: black;
text-align: center;
line-height: 100px;
font-size: 90px;
font-weight: 900;
position: absolute;
color: white;
}
#width_page_wrap{
position: relative;
}
#width_page_wrap>.page{
float: left;
}
/* button 영역 */
/* 가로 중앙 button */
#page_2_go, #page_1_top, #page_3_go, #page_2_top{
left: 50%;
margin-left: -50px;
}
/* 세로 중앙 button */
#page_4_go,#page_3_left,#page_5_go,#page_4_left,#page_main{
top: 50%;
margin-top: -50px;
}
/* top:0 위치 */
#page_1_top,#page_2_top{
top:0
}
/* bottom:0 위치 */
#page_2_go, #page_3_go{
bottom:0
}
/* left:0 위치 */
#page_3_left,#page_4_left{
left:0
}
/* right:0 위치 */
#page_4_go,#page_5_go,#page_main{
right: 0;
}// 파일명: l_page.js
$(document).ready(function(){
let ww=$(window).width();
let wh=$(window).height();
$("#wrap").css({
width:ww*3,
height:wh*3
});
$(".page").css({
width:ww,
height:wh
});
$("#width_page_wrap").css({
width:ww*3,
height:wh
});
$("#page_2_go, #page_2_top").click(function(){
$("#wrap").animate({
top:-wh
});
});
$("#page_3_go").click(function(){
$("#wrap").animate({
top:-wh*2
});
});
// 동일한 함수를 수행하므로 묶어서 표현 가능
$("#page_4_go, #page_4_left").click(function(){
$("#wrap").animate({
left:-ww
});
});
$("#page_5_go").click(function(){
$("#wrap").animate({
left:-ww*2
});
});
$("#page_1_top").click(function(){
$("#wrap").animate({
top:0
});
});
// $("#page_2_top").click(function(){
// $("#wrap").animate({
// top:-wh
// });
// });
$("#page_3_left").click(function(){
$("#wrap").animate({
left:0
});
});
// $("#page_4_left").click(function(){
// $("#wrap").animate({
// left:-ww
// });
// });
$("#page_main").click(function(){
$("#wrap").animate({
top:0,
left:0
});
});
})// 파일명: visualEffect.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>
.out_box{
width: 300px;
height: 700px;
border: 5px solid black;
float: left;
margin: 30px;
}
button{
width: 100%;
height: 50px;
text-align: center;
font-size: 20px;
line-height: 50px;
}
.in_box{
width: 100%;
height: 650px;
background-color: rgb(255, 234, 234);
/* display: none; */
/* => 태그 인식 되지 않음
=> 영역 인식 안함 */
}
</style>
<script src="jquery-3.6.3.js" ></script>
<script src="jquery-ui.js" ></script>
<script>
$(document).ready(function(){
// 1. 크기값 변화
// -show();
// -hide();
// -toggle(); 클릭시 show, hide 번갈아가면서 실행
$("#show_hide").click(function(){
// $("#sh_box").show(1000);
// $("#sh_box").hide(1000);
$("#sh_box").toggle(1000);
});
// 2. 슬라이드
// -slideDown();
// -slideUp();
// -slideToggle();
$("#slide_ud").click(function(){
// $("#sl_box").slideDown(1000);
// $("#sl_box").slideUp(1000);
$("#sl_box").slideToggle(1000);
});
// 3. 투명도
// -fadeIn();
// -fadeOut();
// -fadeToggle();
$("#fade_io").click(function(){
// $("#fa_box").fadeIn(1000);
// $("#fa_box").fadeOut(1000);
$("#fa_box").fadeToggle(1000);
});
});
</script>
</head>
<body>
<div class="out_box">
<button id="show_hide">show+hide</button>
<div class="in_box" id="sh_box"></div>
</div>
<div class="out_box">
<button id="slide_ud">slide+up+down</button>
<div class="in_box" id="sl_box"></div>
</div>
<div class="out_box">
<button id="fade_io">fade_in_out</button>
<div class="in_box" id="fa_box"></div>
</div>
</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>메뉴</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
#menu_wrap {
width: 1000px;
height: 100px;
border: 10px solid rgb(255, 166, 166);
margin: 50px auto;
/* overflow: hidden; */
/* 여기 넣으면 하위 메뉴가 안보임 */
}
#top_menu {
width: 100%;
height: 100px;
}
.top_m {
width: 20%;
height: 100px;
float: left;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
line-height: 100px;
}
.bottom_wrap {
width: 100%;
height: 150px;
background: rgb(218, 255, 218);
display: none;
}
.bottom_menu {
width: 100%;
height: 50px;
border-bottom: 1px dotted blue;
box-sizing: border-box;
line-height: 50px;
}
.on {
background: rgb(255, 244, 227)
}
</style>
<script src="jquery-3.6.3.js" ></script>
<script src="jquery-ui.js" ></script>
<script>
$(document).ready(function(){
// 1.mouseenter
// 2.mouseleave
// 3.hover=mouseenter+mouseleave
// $(선택자).이벤트(function(){});
// $(선택자).hover(function(){
// mouseenter 영역
// }, function(){
// mouseleave 영역
// });
$(".top_m").hover(function(){
// 마우스를 올린 영역을 인식
// => 이벤트 실행 영역 인식
// => this
$(".bottom_wrap", this).slideDown(100);
}, function() {
$(".bottom_wrap", this).slideUp(100);
});
$(".bottom_menu").hover(function(){
// 상위 하위 동일한 bottom_menu이므로 생략하고 this만 넣은것
$(this).addClass("on", 500);
}, function(){
$(this).removeClass("on", 500);
});
});
</script>
</head>
<body>
<div id="menu_wrap">
<ul id="top_menu">
<li class="top_m">상위메뉴1
<ul class="bottom_wrap">
<li class="bottom_menu">하위메뉴1</li>
<li class="bottom_menu">하위메뉴2</li>
<li class="bottom_menu">하위메뉴3</li>
</ul>
</li>
<li class="top_m">상위메뉴2
<ul class="bottom_wrap">
<li class="bottom_menu">하위메뉴1</li>
<li class="bottom_menu">하위메뉴2</li>
<li class="bottom_menu">하위메뉴3</li>
</ul>
</li>
<li class="top_m">상위메뉴3
<ul class="bottom_wrap">
<li class="bottom_menu">하위메뉴1</li>
<li class="bottom_menu">하위메뉴2</li>
<li class="bottom_menu">하위메뉴3</li>
</ul>
</li>
<li class="top_m">상위메뉴4
<ul class="bottom_wrap">
<li class="bottom_menu">하위메뉴1</li>
<li class="bottom_menu">하위메뉴2</li>
<li class="bottom_menu">하위메뉴3</li>
</ul>
</li>
<li class="top_m">상위메뉴5
<ul class="bottom_wrap">
<li class="bottom_menu">하위메뉴1</li>
<li class="bottom_menu">하위메뉴2</li>
<li class="bottom_menu">하위메뉴3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>// 파일명: slideGallery1.html
<!DOCTYPE html>
<html lang="ko">
<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>화살표갤러리1</title>
<style>
*{
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#maskWrap{
width: 800px;
height: 600px;
/* 넘치는값 잘림 */
overflow: hidden;
border: 10px salmon;
margin: 0 auto;
/* 자식인 outBox가 움직이므로 position 필수 */
position: relative;
}
#outBox{
/* => 가로 inBox의 크기값*개수 */
width: 4000px;
height: 600px;
position: absolute;
top: 0;
left: 0;
}
.inBox{
width: 800px;
height: 600px;
text-align: center;
font-size: 100px;
line-height: 600px;
/* 가로 움직임 */
float: left;
}
.button{
width: 100px;
height: 100px;
background: white;
text-align: center;
line-height: 100px;
font-size: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
#leftButton{
left:0;
}
#rightButton{
right:0;
}
</style>
<script src="jquery-3.6.3.js" ></script>
<script src="jquery-ui.js" ></script>
<script>
$(document).ready(function(){
// 1. 위치 선택자
// first()=>첫번째
$(".inBox").first().css({
color:"red"
});
// last()=>마지막
$(".inBox").last().css({
color:"red"
});
// eq()=>동일한 index값 찾음
$(".inBox").eq(1).css({
color:"blue"
});
// 2. 객체 이동
// a prependTo b 이동
// => a를 선택 b영역 안에서 앞으로 이동
$(".inBox").last().prependTo("#outBox");
// a appendTo b 이동
// => a를 선택 b 영역 안에서 뒤로 이동
$(".inBox").first().appendTo("#outBox");
// 1. 배열 활용
// 배경색 지정
// 함수의 리턴값
let bgColor=["yellow","green","pink","salmon","gray"]
$(".inBox").css({
background:function(index){
return bgColor[index]
}
});
// leftButton을 클릭할때마다
// 1. outBox가 -800값만큼 왼쪽으로 이동
// 한바퀴 돌고 끝
// let cnt = 0;
$("#leftButton").click(function(){
// cnt++;
// if(cnt > 4){
// cnt = 4;
// }
// $("#outBox").animate({
// left: -800*cnt
// },1000);
// 무한반복
// =>outBox를 -800 이동 한 후
// =>이동한 첫번째 박스를 선택 outBox 뒤로 보냄
// =>첫번째 박스가 이동하면서 생긴 공백으로 다시 outBox를 0,0 지점으로 이동시킴
// 이동시키지 않으면 1이 5뒤로 가면서 2가 1자리에 오게되므로(1이 빠진 자리가 비어있지 않고 오른쪽에서 땡겨와서 채워짐) 화면은 3을 띄우게됨(outBox가 -800위치이므로)
// $(선택자).animate({이동 속성값}, 시간값, 속도값, 콜백함수);
// 콜백함수 => 이동 속성값으로 기존 animate가 끝난 후 추가 실행문
$("#outBox").animate({
left: -800
},1000,function(){
$(".inBox").first().appendTo("#outBox");
$("#outBox").css({
left:0
})
});
});
// rightButton을 클릭할때마다
// 2. outBox가 leftButton을 클릭했을때 이동의 반대로 움직임
// 한바퀴 돌고 끝
// leftButton을 클릭한 이후 클릭
// leftButton로 증가한 cnt의 값을 감소시켜 반대방향
$("#rightButton").click(function(){
// cnt--;
// if(cnt <= 0){
// cnt = 0;
// }
// $("#outBox").animate({
// left: -800*cnt
// },1000);
// left는 움직이는게 먼저. 앞에있는걸 뒤로 보내는게 나중
// right는 뒤에 있는걸 앞으로 보내는게 먼저. 그리고 움직임
$(".inBox").last().prependTo("#outBox");
$("#outBox").css({
// outBox는 왼쪽으로 이동해야함. 이걸 주석 처리하면 제일 뒤에서 제일 앞으로 이동한 작은 박스가 바로 보임
// 이걸 방지 하기 위해 왼쪽에 작은 박스 하나가 들어가는 공간을 만들 필요가 있다. 그래서 왼쪽으로 800만큼 이동시키는것
// 클릭 할때마다 왼쪽으로 갈 필요는 없고 위치가 left: -800으로 고정되면 제일 뒤에 있던 작은 박스가 하나씩 오니까 그것만 담아 두는 모양이 됨
left:-800
}).animate({
// outBox를 제일 왼쪽으로 이동시켜야 제일 뒤에서 제일 앞으로 온 작은 박스가 보이게 됨
left: 0
},1000);
});
});
</script>
</head>
<body>
// outBox의 크기를 자르는 영역, inBox의 크기와 동일
<div id="maskWrap">
// 실제 움직이는 영역,
// 0,0 왼쪽 상단 기준으로 inBox의 크기값 만큼씩 이동
// inBox의 크기값은 세로 가로 움직임에 따라 크기 설정
<ul id="outBox">
<!-- 자동 배열처리 => index값 사용 가능 -->
<li class="inBox">1</li>
<li class="inBox">2</li>
<li class="inBox">3</li>
<li class="inBox">4</li>
<li class="inBox">5</li>
</ul>
<h1 class="button" id="leftButton">◀</h1>
<h1 class="button" id="rightButton">▶</h1>
</div>
</body>
</html>// 파일명: scroll.html
<!DOCTYPE html>
<html lang="ko">
<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>스크롤</title>
<link href="scroll.css" rel="stylesheet" type="text/css">
<script src="jquery-3.6.3.js" ></script>
<script src="jquery-ui.js" ></script>
<script src="scroll.js"></script>
<script>
</script>
</head>
<body>
<div id="wrap">
<div id="top">
<ul id="mainMenu">
<li class="menu" id="menu1">메뉴1</li>
<li class="menu" id="menu2">메뉴2</li>
<li class="menu" id="menu3">메뉴3</li>
<li class="menu" id="menu4">메뉴4</li>
<li class="menu" id="menu5">메뉴5</li>
</ul>
</div>
<div class="page">
<div class="box">1</div>
</div>
<div class="page">
<div class="box">2</div>
</div>
<div class="page">
<div class="box">3</div>
</div>
<div class="page">
<div class="box">4</div>
</div>
<div class="page">
<div class="box">5</div>
</div>
<h1 id="quick"><img src="img/down.png" style="width: 100px; height: 100px;"></h1>
</div>
/*
1. body 구조
=> page 5개
=> 각 page 안에 내용 박스
=> 메인 메뉴
=> 퀵메뉴
2. page구조
=> 각 page 안에 내용 박스는 가로 세로 중앙정렬
3. 메인메뉴
=> 5개의 메인메뉴
=> 각 버튼을 클릭하면 각 페이지로 이동
4. 퀵메뉴
=> 버튼을 클릭할때마다 각 페이지로 이동
=> 가장 마지막 페이지에서 제일 위로 이동
=> 가장 마지막 페이지에서 화살표 방향이 바뀜(이미지 교체함)
5. 메인메뉴, 퀵메뉴 항상 보이는 고정메뉴
*/
</body>
</html>// 파일명: scroll.css
*{
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
#wrap{
width: 100%;
height: 8000px;
}
#top{
width: 100%;
height: 100px;
background-color: beige;
position: fixed;
/* z-index값이 크면 레이어들 중 위로 올라온다.
레이어가 많아지면 999로 안올라올수도.. 예측 불가
그럴때는 body에서 병렬구조인 레이어들은 나중에 위치한 레이어가 위로 올라오는걸 이용
body상에서 제일 마지막에 위치 시켜주고 position에서 top 0 left 0 으로 주면 됨 */
z-index: 999;
}
#mainMenu{
width: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
}
.menu{
width: 100px;
height: 100px;
float: left;
/* border: 1px solid #cccccc; */
font-size: 20px;
text-align: center;
/* 세로 정렬!! 높이값과 동일하게 주면 가운데 정렬된다 */
line-height: 100px;
}
.page{
// 정확히 알수 없는값(ex:윈도우 크기)은 js에서 css 작업
background: navy;
position: relative;
}
.box{
background-color: white;
position: absolute;
}
#quick{
position: fixed;
bottom: 10px;
right: 10px;
color: aliceblue;
}
.on{
background: yellowgreen;
}// 파일명: scroll.js
$(document).ready(function(){
// 스크롤을 제어 할때
// html, body를 선택해서 스크롤의 위치값 조절
// =>scrollTop, scrollLeft
// =>animate 속성위치
let a = 0;
$("#wrap").click(function(){
a++;
$("html, body").animate({
// 스크롤은 위에서 부터 떨어지니까 +값.. position이랑 헷갈리지 말것
scrollTop:1000*a
});
});
// 각 객체의 index값을 활용하기
// index() 명령사용
// #wrap>div를 클릭할때 마다 각 div의 인덱스 값 확인
$("#wrap>div").click(function(){
// 내가 클릭한 div의 index값
let divIndex=$(this).index();
document.write(divIndex);
});
// js에서 window크기는 스크롤 포함, css에서 100%는 스크롤 제외.. 오차범위 생긴다!
// 부모는 window크기로 맞추고 자식은 css에서 100% 맞추면 해결..!
let ww=$(window).width();
let wh=$(window).height();
$("#wrap").css({
width:ww,
height:wh*5
});
$(".page").css({
width:ww,
height:wh
});
$(".box").css({
// 정확히 알수 없는값(ex:윈도우 크기)은 js에서 css 작업
width:ww*0.9,
height:wh*0.9,
top:'50%',
left:'50%',
marginTop:-wh*0.9/2,
marginLeft:-ww*0.9/2
});
// 1. 각 메뉴를 클릭하면 각자 스크롤 이동 값이 지정
// $(".menu:nth-child(1)").click(function(){
// $("html, body").animate({
// scrollTop:0
// });
// });
// 2. 클릭한 메뉴의 index값 활용
// $(".menu").click(function(){
// let menuIndex=$(this).index();
// $("html, body").animate({
// scrollTop:wh*menuIndex
// });
// });
// 메뉴 버튼 눌러서 스크롤이 중간에 있을때도 퀵메뉴 눌러서 스크롤 아래로 이동 가능해야한다
// 전역 변수 활용!
let allClick = 0;
$(".menu").click(function(){
allClick=$(this).index();
// $("html, body").animate({
// scrollTop:wh*allClick
// });
// if(allClick >= 4) {
// $('img').attr({
// src:'img/up.png'
// });
// allClick = 0;
// } else {
// $('img').attr({
// src:'img/down.png'
// });
// }
// this를 쓰면 메뉴를 클릭하고 다른 메뉴를 클릭할때 이전 메뉴를 선택할 수 없으니 배경색을 다시 되돌릴 수 없음
// $(this).addClass("on",300);
// 이전에 어떤 메뉴를 선택했는지 모르니 메뉴 전체에서 .on을 지우고 클릭한 메뉴만 배경색 바꿔줌
// $(".menu").removeClass("on",200);
// $(".menu").eq(allClick).addClass("on",200);
scrollMove();
});
$("#quick").click(function(){
allClick++;
// $("html, body").animate({
// scrollTop:wh*allClick
// });
// // allClilck은 전역변수이므로 메뉴를 누르면 index값을 가지고있고 그 후에 퀵메뉴를 누르면 index값에 +1을 하는것
// if(allClick >= 4) {
// $('img').attr({
// src:'img/up.png'
// });
// allClick = -1;
// } else {
// $('img').attr({
// src:'img/down.png'
// });
// }
scrollMove();
});
// .menu를 클릭했을 때의 이벤트 내용과
// #quick을 클릭했을 때의 이벤트 내용이 동일함
// 동일한 실행문을 하나의 그룹화 할 수 있는 것이 함수
// .menu클릭시, #quick클릭시 함수만 호출하면 됨
function scrollMove() {
$("html, body").animate({
scrollTop:wh*allClick
});
if(allClick >= 4) {
$('img').attr({
src:'img/up.png'
});
allClick = -1;
} else {
$('img').attr({
src:'img/down.png'
});
}
// 여기에 넣어주면 퀵메뉴로 스크롤 움직일때도 어떤 메뉴 보고 있는지 색 변화로 알수있음
$(".menu").removeClass("on",200);
$(".menu").eq(allClick).addClass("on",200);
}
});
keep going