■ 2월 10일 - 1일차
■ 스크롤 이동 이벤트
스크롤이 어느정도 움직이면 버튼이 나오고
버튼을 클릭하면 스크롤의 최상위로 이동
○ 기본베이스 설정하기
<style>
.contents{
width: 600px;
height: 150vh;
margin: 0 auto;
border: 1px solid #000;
}
#contents1{
background-color: red;
}
#contents2{
background-color: blue;
}
#contents3{
background-color: darkcyan;
}
.button{
position: fixed;
bottom: 20px;
right: 20px;
width: 70px;
height: 40px;
background-color: #000;
font-size: 20px;
color: #fff;
text-align: center;
align-content: center;
border-radius: 12px;
cursor: pointer;
opacity: 0; /* 특정시점에 나타나기 */
}
.button-visible{
opacity: 1; /* 클래스 추가하면 보이게 */
}
</style>
<body>
<div class="wrap">
<div class="contents" id="contents1"></div>
<div class="contents" id="contents2"></div>
<div class="contents" id="contents3"></div>
<div class="button" id="button-top">TOP</div>
</div>
<script>
</script>
</body>
○ 스크롤
객체.offsetHeight // 요소의 실제 가시적 높이
객체.scrollHeight // 콘텐츠의 전체 높이.scrollTop // 스크롤되어 올라간 위치를 측정
- 스크롤을 할때 이벤트 발생
let btt = document.getElementById("button-top");
let dcemt = document.documentElement; //문서 자체를 가져온다.
let dh = dcemt.scrollHeight; //문서 높이
window.addEventListener("scroll",function(){
let sct = document.querySelector("html").scrollTop; //html scroll상단 위치 반환
let sct1 = dcemt.scrollTop; //변수에서 가져오기
console.log(sct+" , "+sct1);
});
- 스크롤의 위치에 따라 버튼 나오게 하기
let btt = document.getElementById("button-top");
let dcemt = document.documentElement; //문서 자체를 가져온다.
let dh = dcemt.scrollHeight; //문서 높이
let sct; //전역변수 사용
window.addEventListener("scroll",function(){ //버튼 나오게 하기
sct = dcemt.scrollTop;
console.log(sct + " " + dh/4 + " " + dh);
if (sct > dh/4){ //스크롤 한 값이 전체 문서 높이의 1/4 보다 크다면
btt.classList.add("button-visible");
}
else{
btt.classList.remove("button-visible");
}
});
- 버튼 클릭시 스크롤 0으로 되돌리기
let btt = document.getElementById("button-top");
let dcemt = document.documentElement; //문서 자체를 가져온다.
let dh = dcemt.scrollHeight; //문서 높이
let sct; //전역변수 사용
window.addEventListener("scroll",function(){ //버튼 나오게 하기
sct = dcemt.scrollTop;
if (sct > dh/4){ //스크롤 한 값이 전체 문서 높이의 1/4 보다 크다면
btt.classList.add("button-visible");
}
else{
btt.classList.remove("button-visible");
}
});
btt.addEventListener("click",function(){
dcemt.scrollTop = 0;
});
//반복하기
setInterval(function(){},시간);
// 1000 1s , 1 1ms
//반복 지우기
clearInterval(반복하는 객체이름);
// 스크롤 이동
window.scollBy(x,y);
// x 좌우
// y 위아래
- 버튼 클릭시 위로 자연스럽게 올라가기
let btt = document.getElementById("button-top");
let dcemt = document.documentElement; //문서 자체를 가져온다.
let dh = dcemt.scrollHeight; //문서 높이
let sct; //전역변수 사용
window.addEventListener("scroll",function(){ //버튼 나오게 하기
sct = dcemt.scrollTop;
console.log(sct + " " + dh/4 + " " + dh);
if (sct > dh/4){ //스크롤 한 값이 전체 문서 높이의 1/4 보다 크다면
btt.classList.add("button-visible");
}
else{
btt.classList.remove("button-visible");
}
});
btt.addEventListener("click",function(){
scrtotop();
});
function scrtotop(){ //새로운 함수 만들기
let ssi = setInterval(function(){
if(sct >0){
dcemt.scrollTop -=10;
}
else{
clearInterval(ssi);
}
},10);
}
○ 콘텐츠 클릭시 콘텐츠 위치로 스크롤 이동하기
- 바로 이동
<style>
.contents{
width: 600px;
height: 150vh;
margin: 0 auto;
border: 1px solid #000;
}
#contents1{
background-color: red;
}
#contents2{
background-color: blue;
}
#contents3{
background-color: darkcyan;
}
#button-box{
display: flex;
position: fixed;
gap: 20px;
top: 20px;
right: 20px;
}
.button{
width: 40px;
height: 30px;
font-size: 14px;
background-color: #000;
color: #fff;
text-align: center;
align-content: center;
border-radius: 12px;
cursor: pointer;
}
</style>
<body>
<div class="wrap">
<div class="contents" id="contents1"></div>
<div class="contents" id="contents2"></div>
<div class="contents" id="contents3"></div>
<div id = "button-box">
<div class="button" id="button-1">1번</div>
<div class="button" id="button-2">2번</div>
<div class="button" id="button-3">3번</div>
</div>
</div>
<script>
let conar = [];
let cont = document.getElementsByClassName("contents");
console.log(cont[1].offsetTop); // 현재위치의 top
for (let i = 0; i<cont.length; i++){
conar.push(cont[i].offsetTop); //배열에 각 위치 저장
}
let bt = document.getElementsByClassName("button");
for (let i = 0; i<bt.length; i++){
bt[i].addEventListener("click",function(){
document.documentElement.scrollTop=conar[i]; //클릭시 좌표 이동
});
}
</script>
</body>
- 자연스럽게 이동
window.scroll({top:conar[i],behavior:"smooth"});
//부드럽게 이동<style>
.contents{
width: 600px;
height: 150vh;
margin: 0 auto;
border: 1px solid #000;
}
#contents1{
background-color: red;
}
#contents2{
background-color: blue;
}
#contents3{
background-color: darkcyan;
}
#button-box{
display: flex;
position: fixed;
gap: 20px;
top: 20px;
right: 20px;
}
.button{
width: 40px;
height: 30px;
font-size: 14px;
background-color: #000;
color: #fff;
text-align: center;
align-content: center;
border-radius: 12px;
cursor: pointer;
}
</style>
<body>
<div class="wrap">
<div class="contents" id="contents1"></div>
<div class="contents" id="contents2"></div>
<div class="contents" id="contents3"></div>
<div id = "button-box">
<div class="button" id="button-1">1번</div>
<div class="button" id="button-2">2번</div>
<div class="button" id="button-3">3번</div>
</div>
</div>
<script>
let conar = [];
let cont = document.getElementsByClassName("contents");
console.log(cont[1].offsetTop); // 현재위치의 top
for (let i = 0; i<cont.length; i++){
conar.push(cont[i].offsetTop);
}
console.log(conar);
let bt = document.getElementsByClassName("button");
for (let i = 0; i<bt.length; i++){
bt[i].addEventListener("click",function(){
window.scroll({top:conar[i],behavior:"smooth"});
});
}
</script>
■ 마우스 올렸을때 이미지 변경
○ 바로 변경
이미지에 마우스를 올리면 마우스를 올린이미지의 src를 저장하여
메인 이미지에 src 속성을 변경해주는 형태임
<style>
.contents{
width: 300px;
margin: 0 auto;
}
.main-img{
height: 300px;
}
.main-img > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.img-box{
width: 100%;
display: flex;
height: 100px;
}
.img-box > img{
width: calc(100% / 3);
height: 100%;
object-fit: cover;
}
</style>
<body>
<div class="contents">
<div class="main-img">
<img src="img/img1.jpg" alt="">
</div>
<div class="img-box">
<img src="img/img1.jpg" alt="">
<img src="img/img2.jpg" alt="">
<img src="img/img3.jpg" alt="">
</div>
</div>
<script>
let imgs = document.querySelectorAll(".img-box img");
let main_img = document.querySelector(".main-img img");
console.log(imgs[0].getAttribute("src"));
for(let i of imgs){
i.addEventListener("mouseenter",function(){
main_img.src = i.getAttribute("src");
});
}
</script>
■ 2월 11일 - 2일차
■ JavaScript Animation
○ Animation 설정방법
element.animate(keyframes, options)
요소.animate(속성,옵션)
○ 적용
<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con1 = document.getElementById("cont1");
let con2 = document.getElementById("cont2");
let con3 = document.getElementById("cont3");
con1.addEventListener("click",function(){
con1.animate({width:"200px"},2000);
con2.animate({"width":"200px"},2000);
con3.animate({width:"200px",height:"100px"},2000);
});
</script>
</body>
○ 옵션 및 키프레임 설정
// 키프레임
[{최초},{끝}]
// 옵션
{옵션1,옵션2}<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con1 = document.getElementById("cont1");
let con2 = document.getElementById("cont2");
let con3 = document.getElementById("cont3");
con1.addEventListener("click",function(){
con1.animate({width:"200px"},2000);
con2.animate([{width:"200px"},{width:"100px"}],2000);
// [{최초},{끝}] 기본 스타일은 종료 후
con3.animate({width:"200px"},{duration:2000,iterations:Infinity});
//{옵션1,옵션2}
});
</script>
</body>
○ 애니메이션 변수 관리 및 정지
에니메이션요소.cancel()<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con1 = document.getElementById("cont1");
let con2 = document.getElementById("cont2");
let anikey = [{width:"200px"},{width:"100px"}];
let aniop = {duration:2000,iterations:3};
let anican;
con1.addEventListener("click",function(){
anican = con1.animate(anikey,aniop);
});
con2.addEventListener("click",function(){
anican.cancel();
});
</script>
</body>
○ 클래스 전체 지정
<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con = document.getElementsByClassName("con");
let anikey = [{width:"200px"},{width:"100px"}];
let aniop = {duration:2000,iterations:3};
for(let i of con){
i.addEventListener("click",function(){
this.animate(anikey,aniop);
//i.animate();
});
}
</script>
</body>
■ 이미지가 자동으로 변경되기
○ 이미지 넘기기
모든 이미지의 display를 none으로 놓고 첫번째 이미지만 block으로 넣어준다.
imgage가 들어있는 박스를 클래스로 잡아주고
index번호는 증가시켜서 % 박스 개수를 넣어주면
index번호는 박스의 개수를 넘어가지 못하고 반복함
함수로 만들어서 setInterval로 반복시켜주면 된다.
<style>
.slider {
max-width: 600px;
height: 400px;
border: 1px solid #000;
}
.slides {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
</style>
<body>
<div class="slider">
<img src="https://picsum.photos/id/100/600/400" class="slides">
<img src="https://picsum.photos/id/110/600/400" class="slides">
<img src="https://picsum.photos/id/120/600/400" class="slides">
</div>
<script>
let cs = 0;
const slides = document.getElementsByClassName("slides");
function shows(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
// 초기 슬라이드 보여주기
shows(cs);
function nexts() {
cs = (cs + 1) % slides.length;
shows(cs);
}
// 행동에는 함수 이름을 작성 동작으로 넣으려면 function 안에
// 일정 시간마다 슬라이드 자동 전환 (3초 간격)
setInterval(nexts, 3000);
</script>
</body>
○ 자동으로 넘어가는 이미지에 버튼 클릭시에도 작동
버튼을 할 박스 또는 이미지를 만들어두고
클릭시 이벤트 실행
이전으로 돌아갈때 0-1 % 4 하면 -1이됨 이것을 제한하고자 +4를해줌
0-1+4 == 3 % 4 == 3
3-1+4 == 6 % 4 == 2
<style>
.slider {
max-width: 600px;
height: 400px;
}
.slides {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.button-box{
margin-top: 10px;
max-width: 600px;
height: 50px;
display: flex;
justify-content: space-between;
}
.button{
width: 80px;
height: 30px;
background-color: #666;
text-align: center;
align-content: center;
cursor: pointer;
}
</style>
<body>
<div class="slider">
<img src="https://picsum.photos/id/100/600/400" class="slides">
<img src="https://picsum.photos/id/110/600/400" class="slides">
<img src="https://picsum.photos/id/120/600/400" class="slides">
<img src="https://picsum.photos/id/130/600/400" class="slides">
</div>
<div class="button-box">
<div class="button" id="b-left">왼쪽</div>
<div class="button" id="b-right">오른쪽</div>
</div>
<script>
let cs = 0;
const slides = document.getElementsByClassName("slides");
function shows(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
// 초기 슬라이드 보여주기
shows(cs);
function nexts() {
cs = (cs + 1) % slides.length;
shows(cs);
}
// 이전으로 돌아가기
function prevs(){
cs = (cs - 1 + slides.length) % slides.length;
shows(cs);
}
// 일정 시간마다 슬라이드 자동 전환 (3초 간격)
setInterval(nexts, 3000);
let btl = document.getElementById("b-left");
let btr = document.getElementById("b-right");
// 버튼 클릭시 이벤트
btl.addEventListener("click",function(){
prevs();
});
btr.addEventListener("click",function(){
nexts();
});
</script>
</body>
■ JQuery 적용
○ JQuery란?
자바 스크립트 라이브러리로 크로스 브라우징 기능을 가지고 있음
크로스 브라우징은 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 해줌.
자바 스크립트는 코드가 너무 길어지고 복잡해지는 단점이 있지만
JQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현가능
○ JQuery 적용
- JQuery 사이트에서 주소를 복사해서 가져와서 사용
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
- JS파일 만들어서 JQuery 적용 해도 됨
내용 전체 복사
- JQuery 사용
body에서 아래쪽에 사용 클래스 및 아이디로 된 태그들이 생성전에 실행됨.
body밖에 사용해도 문제는 없음(아래쪽이면)
<body>
<div class="wrap"></div>
<script src="script.js"></script> <!--js파일을 만들어서 적용하기 -->
</body>
<body>
<div class="wrap"></div>
<script> <!--HTML상에 직접 사용하기 -->
$()
</script>
</body>
■ JQuery 사용
○ 기본 불러오기
- document(문서가) ready(준비된후) / 간략하게 앞에를 삭제해도 됨
- function(){} 작성이 안되면 하나의 동작 밖에 사용 못함.
- $는 JQuery를 사용하고 있다는 것을 의미함
$(document).ready(function(){
console.log("일반적 사용");
});
$(function(){
console.log("간략화");
console.log("두개이상");
});
○ JQuery 기본문법
$(function(){
$(선택자).동작함수1().동작함수2();
});- $ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자임
- 선택자를 이용하여 원하는 HTML 요소를 선택하고
- 동작 함수를 정의하여 선택된 요소에 동작을 설정
○ JQuery 객체
JQuery를 사용하기 위해서는 먼저 JQuery 객체를 생성해야함
객체는 여러 메소드를 가지고 있음
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<script src="script.js"></script>
</body>
$(function(){
let ab = $("div");
console.log(ab);
});
· $("div") : div로 된 요소를 선택
· box라는 div 요소가 모두 선택되어 변수 ab에 저장
- 아이디 선택
$(function(){
let ab = $("#box3");
console.log(ab);
});
- Javascript문법
let jsab = document.getElementById('box3'); //id선택
let jsc = document.querySelectorAll(".box"); //모든 box class 선택
■ JQuery 선택자
○ 기본선택자
| 예제 | 설명 |
| $("*") | 모든 요소 선택 |
| $(".클래스명") | 지정한 클래스명을 가지는 모든 요소 |
| $("#아이디명") | 지정한 아이디명을 가지는 요소 |
| $("태그명") | 지정한 태그명을 가지는 모든 요소 |
| $("선택자, 선택자") | 지정된 선택자들의 결합 |
○ 자식선택자
| 예제 | 설명 |
| $("div:first-child") | 첫 번째 요소 |
| $("div:last-child") | 마지막 요소 |
| $("div:nth-child(n)") | n번째 요소 |
| $("div:nth-last-child(n)") | 마지막에서 n번째 요소 |
| $("div:only-child") | 유일한 자식인 모든 요소 |
<div class="box">
<div id="box1">
<div id="box1-1"></div>
<div id="box1-2"></div>
</div>
<div id="box2">
<div id="box2-1"></div>
<div id="box2-2"></div>
<div id="box2-3"></div>
</div>
<div id="box3">
<div id="box3-1"></div>
</div>
</div>
<div class="box">
<div id="box4"></div>
<div id="box5"></div>
</div>
<div class="box">
<div id="box6"></div>
</div>$(function(){
console.log($(".box > div:first-child"));
console.log($(".box div:first-child"));
console.log($(".box div:nth-child(2)"));
console.log($(".box div:nth-last-child(2)"));
console.log($(".box div:only-child"));
console.log($(".box > div:only-child"));
});
○ 계층선택자
| 예제 | 설명 |
| $("부모 > 자식") | 부모의 모든 직접 자식요소 |
| $("조상 자식") | 조상의 모든 자식 요소 |
| $("형제 + 인접") | 형제의 특정 인접 요소 |
| $("형제~타입") | 형제의 다음의 타입으로 된 모든 요소 |
인접 이라고 작성 한곳, 타입작성한 곳이 클래스든 태그든 아이디든 상관없음
<div class="box">
<div id="box1">
<div id="box1-1"></div>
<div id="box1-2"></div>
</div>
<div id="box2">
<div id="box2-1"></div>
<div id="box2-2"></div>
<div id="box2-3"></div>
</div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>$(function(){
console.log($(".box > div"));
console.log($(".box div"));
console.log($("#box1 + div"));
console.log($("#box2 ~ div"));
});
○ JQuery 전용 기본 필터 선택자
| 예제 | 설명 |
| $("선택:odd") | 선택된 홀수번(0,1,2,3)으로 인덱스번호지정 |
| $("선택:even") | 선택된 짝수번 요소 |
| $("선택:first") | 선택된 첫번째 요소 |
| $("선택:last") | 선택된 마지막 요소 |
<div class="box">
<div id="box1">
<div id="box1-1"></div>
<div id="box1-2"></div>
</div>
<div id="box2">
<div id="box2-1"></div>
<div id="box2-2"></div>
<div id="box2-3"></div>
</div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>$(function(){
console.log($(".box div"));
console.log($(".box div:odd"));
console.log($(".box div:even"));
console.log($(".box div:first"));
console.log($(".box div:last"));
});
○ JQuery 전용 폼 필터 선택자
| 예제 | 설명 |
| $(":button") | type 속성이 button인 요소 |
| $(":img") | img 유형의 요소 |
| $(":radio") | 라디오 유형의 요소 |
| ... | 등등 |
<div class="box">
<input type="text" id="a1">
<input type="radio" name="" id="a2">
<input type="radio" name="" id="a3">
<input type="button" value="" id="a4">
</div>$(function(){
console.log($(":input"));
console.log($(":radio"));
console.log($(":button"));
});
○ JQuery 전용 가시성 필터 선택자
| 예제 | 설명 |
| $("div:hidden") | 숨겨진 요소 선택 |
| $("div:visible") | 존재하는 요소 선택 |
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
}
#box1{
visibility: hidden; /*숨겨지지만 공간은 차지*/
}
#box2{
display: none;
}
</style>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<script src="script.js"></script>
</body>$(function(){
console.log($("div:visible"));
console.log($("div:hidden"));
});
○ JQuery 전용 함수 필터 선택자
| 예제 | 설명 |
| $("div:eq(n)") | 집합내 인덱스 n에 있는 요소 |
| $("div:gt(n)") | 집합내 인덱스 n보다 큰 요소 |
| $("div:lt(n)") | 집합내 인덱스 n보다 작은요소 |
| $("div:has(p)") | 집합내 지정선택자(p)를 포함하는 요소 |
| $("div:animated)") | 애니메이션이 진행 상태에 있는 요소 |
| $("div:not(:animated)") | 애니메이션 중이지 않은 요소 |
<div id="box1">
<p id="text1">1</p>
</div>
<div id="box2">2</div>
<div id="box3">3</div>$(function(){
console.log($("div:eq(1)"));
console.log($("div:gt(0)"));
console.log($("div:lt(2)"));
console.log($("div:has(p)"));
console.log($("div").eq(1));
});
■ 2월 12일 - 3일차
■ Jquery 이벤트
○ click event
$("선택자").click(function(){/* 이벤트 */});$(selector).animate({properties}, duration, callback);
//속성, 시간, 종료후 실행
$(".box").animate({"width":"200px"}, 2000, function(){});
- 실습예제
<style>
.box{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<body>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
<script>
$(function(){
$(".box").click(function(){
$(this).animate({"width":"300px","height":"30px"},2000,function(){
$(this).css({"width":"50px","height":"50px"});
});
});
});
</script>
</body>
- 표시와 숨김
<style>
.box{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<body>
<button id="bt1">숨김</button>
<button id="bt2">보이기</button>
<button id="bt3">토글</button>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
<script>
$(function(){
$("#bt1").click(function(){
$(".box").hide(2000);
});
$("#bt2").click(function(){
$(".box").show("fast");
});
$("#bt3").click(function(){
$(".box").stop().toggle(2000); //stop()멈추고
});
});
</script>
</body>
- 페이드 효과
<script>
$(function(){
$("#bt1").click(function(){
$(".box").fadeOut(1000);
});
$("#bt2").click(function(){
$(".box").fadeIn(1000);
});
$("#bt3").click(function(){
$(".box").stop().fadeToggle(1000); //stop()멈추고
});
});
</script>
- 슬라이드 효과
<script>
$(function(){
$("#bt1").click(function(){
$(".box").slideDown(1000);
});
$("#bt2").click(function(){
$(".box").slideUp(1000);
});
$("#bt3").click(function(){
$(".box").stop().slideToggle(1000); //stop()멈추고
});
});
</script>
- 화면 전환
<style>
.box{
width: 50px;
height: 50px;
border: 1px solid #000;
}
.contents{
height: 300px;
display: none;
background-color: red;
}
</style>
<body>
<button id="bt">토글</button>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
<div class="contents"></div>
<script>
$(function(){
$("#bt").click(function(){
$(".box").stop().slideToggle(0);
$(".contents").stop().slideToggle(0);
});
});
</script>
</body>
■ 2월 19일 - 4일차
■ Window Scroll
○ 객체의 위치 반환
$("객체").offset();//위치
$("객체").offset().top ; //상단
$("객체").offset().left ; //왼쪽<style>
.box{
width: 100px;
height: 2000px;
border: 1px solid #000;
}
#box1{
background-color: aqua;
}
#box2{
background-color: red;
}
#box3{
background-color: blue;
}
</style>
<body>
<div class="contents">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>
<script>
$(function(){
let box2t = $("#box2").offset();
console.log(box2t);
console.log(box2t.top);
console.log(box2t.left);
});
</script>
○ 스크롤 위치 반환
$(window).scrollTop();$(function(){
$(window).scroll(function(){
let wst = $(window).scrollTop();
console.log(wst);
});
});
○ 클릭이벤트 스크롤 위치 이동
$("html").scrollTop(300);
- 실제사용
<style>
.box{
width: 100px;
height: 80vh;
border: 1px solid #000;
}
#box1{
background-color: aqua;
}
#box2{
background-color: red;
}
#box3{
background-color: blue;
}
</style>
<body>
<div class="contents">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>
<script>
$(function(){
$("#box1").click(function(){
let box2t = $("#box2").offset().top;
$("html").animate({scrollTop:box2t},500);
});
$("#box2").click(function(){
let box1t = $("#box1").offset().top;
$("html").scrollTop(box1t);
});
});
</script>
</body>
■ 버튼 클릭시 스크롤 이동
<style>
.container {
height: 100%;
width: 100%;
}
.section {
height: 100vh;
width: 100%;
}
.section:nth-child(2n) {
background-color: rgb(184, 212, 185);
}
.section:nth-child(2n+1) {
background-color: #f08bdf;
}
.menu{
display: flex;
position: fixed;
top: 5%;
right: 10%;
gap: 5%;
}
.menu > .s{
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
background-color: #fff;
text-align: center;
align-content: center;
line-height: 20px;
border-radius: 20%;
}
</style>
<body>
<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
<div class="menu">
<div class="s">1</div>
<div class="s">2</div>
<div class="s">3</div>
<div class="s">4</div>
</div>
<script>
$(function(){
$(".s").click(
function(){
let i = $(this).index();
let t = $(".section").eq(i).offset().top;
$("html").stop().animate({scrollTop:t},1000);
}
);
});
</script>
</body>
○ 클릭시 css background-img 변경
<style>
.container{
width: 300px;
height: 400px;
}
.main-img{
height: 300px;
}
.main-img > .img{
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/id/50/200/300");
background-size: cover;
transition: 2s;
}
.imgbox{
height: 100px;
display: flex;
}
.imgbox > img{
width: calc(100% / 3);
height: 100%;
object-fit: cover;
}
</style>
<body>
<div class="container">
<div class="main-img">
<div class="img"></div>
</div>
<div class="imgbox">
<img src="https://picsum.photos/id/50/200/300" alt="">
<img src="https://picsum.photos/id/60/200/300" alt="">
<img src="https://picsum.photos/id/70/200/300" alt="">
</div>
</div>
<script>
$(function(){
let imgbox = $(".imgbox > img");
imgbox.each(function(){
$(this).click(function(){
let imgsrc = $(this).attr("src");
$(".main-img > .img").css("background-image","url("+imgsrc+")");
});
});
});
</script>
■ 이미지 fadeIn-Out
<style>
.container{
width: 300px;
height: 300px;
margin: 0 auto;
}
.imgbox{
height: 100%;
position: relative;
}
.imgbox > img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div class="container">
<div class="imgbox">
<img src="https://picsum.photos/id/50/200/300" alt="">
<img src="https://picsum.photos/id/60/200/300" alt="">
<img src="https://picsum.photos/id/70/200/300" alt="">
</div>
</div>
<script>
$(function(){
let ci = 0;
let fimg = $(".imgbox > img"); //이미지
let ic = fimg.length; //이미지 개수
fimg.hide().eq(ci).show();
setInterval(function(){
fimg.eq(ci).fadeOut(600);
ci = (ci+1) % ic;
fimg.eq(ci).fadeIn(600);
},2000);
});
</script>
</body>
■ 2월 23일 - 5일차
■ 탭메뉴
○ 클릭시 바로 변화하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<style>
body, h1, p{
margin: 0;
}
.wrap{
padding: 20px 30px;
background-color: antiquewhite;
}
.bt-box{
height: 50px; display: flex; align-items: center;
gap: 30px;
}
.bt{
border: 1px solid #000; height: 40px; width: 120px;
text-align: center; align-content: center;
cursor: pointer;
}
.con-box{
background-color: aliceblue;
}
.con{
align-content: center; text-align: center;
font-size: 50px; color: #fff;
}
.c1{
background-color: blue;
height: 400px;
}
.c2{
background-color: brown;
height: 600px;
}
.c3{
background-color: darkcyan;
height: 500px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="bt-box">
<div class="bt">메뉴1</div>
<div class="bt">메뉴2</div>
<div class="bt">메뉴3</div>
</div>
<div class="con-box">
<div class="con c1">콘텐츠1</div>
<div class="con c2">콘텐츠2</div>
<div class="con c3">콘텐츠3</div>
</div>
</div>
<script>
$(function(){
let $c = $(".con");
$c.hide();
$c.first().show();
let $bt = $(".bt-box > .bt");
$bt.click(function(){
let num = $(this).index();
$c.hide();
$c.eq(num).show();
});
});
</script>
</body>
</html>
○ 클릭시 내려오듯이 변화하기
<style>
.container{
width: 600px;
height: 300px;
background-color: antiquewhite;
}
.menu-box{
display: flex;
}
.menu{
box-sizing: border-box;
height: 30px;
width: 20%;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.menu-contents{
height: 270px;
box-sizing: border-box;
border: 1px solid #000;
position: relative;
}
.cont{ /*--------변경----------*/
position: absolute;
left: 0;
top: 0;
font-size: 60px;
width: 100%;
height: 0;
overflow: hidden;
}
.cont:nth-child(1){
background-color: aquamarine;
}
.cont:nth-child(2){
background-color: brown;
}
.cont:nth-child(3){
background-color: blueviolet;
}
.cont.act{/*--------추가----------*/
height: 100%;
}
</style>
<body>
<div class="container">
<div class="menu-box">
<div class="menu">메뉴1</div>
<div class="menu">메뉴2</div>
<div class="menu">메뉴3</div>
</div>
<div class="menu-contents">
<div class="cont act">콘텐츠1</div>
<div class="cont">콘텐츠2</div>
<div class="cont">콘텐츠3</div>
</div>
</div>
<script>
$(function(){
$(".menu").click(function(){
let i = $(".cont.act").index();
let ni = $(this).index();
if(i !== ni){
$(".cont").eq(i).css({"transition":"height 0s","z-index":0});
$(".cont").eq(i).removeClass("act");
$(".cont").eq(ni).css({"transition":"height 1s linear","z-index":1});
$(".cont").eq(ni).addClass("act");
}
});
});
</script>
</body>
○ 기존콘텐츠는 있다가 클릭시 내려오듯이 변화하기
<style>
.container{
width: 600px;
height: 300px;
background-color: antiquewhite;
}
.menu-box{
display: flex;
}
.menu{
box-sizing: border-box;
height: 30px;
width: 20%;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.menu-contents{
height: 270px;
box-sizing: border-box;
border: 1px solid #000;
position: relative;
}
.cont{ /*--------변경----------*/
position: absolute;
left: 0;
top: 0;
font-size: 60px;
width: 100%;
height: 0;
overflow: hidden;
}
.cont:nth-child(1){
background-color: aquamarine;
}
.cont:nth-child(2){
background-color: brown;
}
.cont:nth-child(3){
background-color: blueviolet;
}
.cont.act{/*--------추가----------*/
height: 100%;
}
</style>
<body>
<div class="container">
<div class="menu-box">
<div class="menu">메뉴1</div>
<div class="menu">메뉴2</div>
<div class="menu">메뉴3</div>
</div>
<div class="menu-contents">
<div class="cont act">콘텐츠1</div>
<div class="cont">콘텐츠2</div>
<div class="cont">콘텐츠3</div>
</div>
</div>
<script>
$(function(){
let tr = false; // 작동중이 아닐때
$(".menu").click(function(){
if(tr) return; //작동중이면 시작하지 않기
let i = $(".cont.act").index();
let ni = $(this).index();
if(i !== ni){
tr = true;//작동시작
$(".cont").eq(i).css("z-index",0);
$(".cont").eq(ni).css({"transition":"height 1s linear","z-index":1});
$(".cont").eq(ni).addClass("act");
setTimeout(()=>{
$(".cont").eq(i).css({"transition":"height 0s"});
$(".cont").eq(i).removeClass("act");
tr = false;//작동 종료
},1000);
}
});
});
</script>
</body>
○ 아래에서 위로
.cont{ /*--------변경----------*/
position: absolute;
left: 0;
bottom: 0; /*--------변경(top에서 bottom)----------*/
font-size: 60px;
width: 100%;
height: 0;
overflow: hidden;
}
○ 좌에서 우로
너비의 변경으로 인하여 글자 밀림 현상이 발생함
html 구조 변경이 필요
<style>
.container{
width: 600px;
height: 300px;
background-color: antiquewhite;
}
.menu-box{
display: flex;
}
.menu{
box-sizing: border-box;
height: 30px;
width: 20%;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.menu-contents{
height: 270px;
box-sizing: border-box;
border: 1px solid #000;
position: relative;
}
.cont{ /*--------변경----------*/
position: absolute;
left: 0;
top: 0;
font-size: 60px;
width: 0;/*--------변경 100에서 0으로----------*/
height: 100%;/*--------변경 0에서 100으로----------*/
overflow: hidden;
}
.cont .c{/*--------기존크기를 유지한상태로----------*/
position: absolute;
left: 0;
top: 0;
width: 600px;
height: 270px;
}
.cont:nth-child(1) .c{
background-color: aquamarine;
}
.cont:nth-child(2) .c{
background-color: brown;
}
.cont:nth-child(3) .c{
background-color: blueviolet;
}
.cont.act{/*--------변경----------*/
width: 100%;/*--------변경 너비에서 높이로----------*/
}
</style>
<body>
<div class="container">
<div class="menu-box">
<div class="menu">메뉴1</div>
<div class="menu">메뉴2</div>
<div class="menu">메뉴3</div>
</div>
<div class="menu-contents"> <!--밀리지 않도록 변경-->
<div class="cont act">
<div class="c">콘텐츠1</div>
</div>
<div class="cont">
<div class="c">콘텐츠2</div>
</div>
<div class="cont">
<div class="c">콘텐츠3</div>
</div>
</div>
</div>
<script>
$(function(){
let tr = false; // 작동중이 아닐때
$(".menu").click(function(){
if(tr) return; //작동중이면 시작하지 않기
let i = $(".cont.act").index();
let ni = $(this).index();
if(i !== ni){
tr = true;//작동시작
$(".cont").eq(i).css("z-index",0);
$(".cont").eq(ni).css({"transition":"width 1s linear","z-index":1});
$(".cont").eq(ni).addClass("act");
setTimeout(()=>{
$(".cont").eq(i).css({"transition":"width 0s"});
$(".cont").eq(i).removeClass("act");
tr = false;//작동 종료
},1000);
}
});
});
</script>
</body>
○ 우에서 좌로
.cont{ /*--------변경----------*/
position: absolute;
right: 0;/*--------변경 left에서 right로----------*/
top: 0;
font-size: 60px;
width: 0;
height: 100%;
overflow: hidden;
}
■ 팝업메뉴
<style>
body{
margin: 0;
}
.wrap{
height: 150vh;
background-color: aquamarine;
}
#popbt{
width: 100px;
height: 50px;
background-color: red;
align-content: center;
text-align: center;
cursor: pointer;
}
#pop{
width: 500px;
height: 400px;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
}
#close{
width: 50px;
height: 30px;
background-color: #000;
color: #fff;
text-align: center;
align-content: center;
position: absolute;
bottom: 20px;
right: 20px;
cursor: pointer;
}
</style>
<body>
<div class="wrap">
<div id="popbt">팝업창 열기</div>
</div>
<div id="pop">
<div class="textbox">
팝업 내용
</div>
<div id="close">닫기</div>
</div>
<script>
$(()=>{
let pop = $("#pop");
$("#popbt").click(()=>{
pop.fadeIn(300);
});
$("#close").click(()=>{
pop.fadeOut(300);
});
})
</script>
</body>
○ 배경 흐리게 하고 배경 클릭시에도 종료
<style>
#popbg{ /* 추가 */
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #00000033;
display: none;
}
</style>
<body>
<div class="wrap">
<div id="popbt">팝업창 열기</div>
</div>
<div id="popbg"></div> <!--추가-->
<div id="pop">
<div class="textbox">
팝업 내용
</div>
<div id="close">닫기</div>
</div>
<script>
$(()=>{
let pop = $("#pop, #popbg");
$("#popbt").click(()=>{
$("html").css("overflow-y","hidden");
pop.fadeIn(300);
});
$("#close, #popbg").click(()=>{
pop.fadeOut(300);
$("html").css("overflow-y","auto");
});
})
</script>
</body>
■ 이미지 자동 슬라이드
<style>
.container{
width: 300px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.imgbox{
display: flex;
width: 400%;
height: 100%;
position: relative;
transition: 2s;
left: 0;
}
.imgbox > img{
width: calc(100% / 4);
height: 100%;
object-fit: cover;
}
</style>
<body>
<div class="container">
<div class="imgbox">
<img src="https://picsum.photos/id/50/200/300" alt="">
<img src="https://picsum.photos/id/60/200/300" alt="">
<img src="https://picsum.photos/id/70/200/300" alt="">
<img src="https://picsum.photos/id/50/200/300" alt="">
</div>
</div>
<script>
$(function(){
let ci = 0;
let interval = setInterval(slide,3000);
function slide(){
ci++;
$(".imgbox").css("left",-$(".imgbox > img").width()*ci);
if(ci === $(".imgbox > img").length){
$(".imgbox").css({"transition":"0s","left":"0"});
setTimeout(function(){
$(".imgbox").css("transition","2s");
ci=1;
$(".imgbox").css("left",-$(".imgbox > img").width()*ci);
//한번 멈춤 없이 시작하기 위해 작성
},100);
}
}
});
</script>
</body>
○ 마우스 올렸을때 멈추고 빼면 다시 시작
<style>
.container{
width: 300px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.imgbox{
display: flex;
width: 400%;
height: 100%;
position: relative;
transition: 2s;
left: 0;
}
.imgbox > img{
width: calc(100% / 4);
height: 100%;
object-fit: cover;
}
</style>
<body>
<div class="container">
<div class="imgbox">
<img src="https://picsum.photos/id/50/200/300" alt="">
<img src="https://picsum.photos/id/60/200/300" alt="">
<img src="https://picsum.photos/id/70/200/300" alt="">
<img src="https://picsum.photos/id/50/200/300" alt="">
</div>
</div>
<script>
$(function(){
let ci = 0;
let interval = setInterval(slide,3000);
function slide(){
ci++;
$(".imgbox").css("left",-$(".imgbox > img").width()*ci);
if(ci === $(".imgbox > img").length){
$(".imgbox").css({"transition":"0s","left":"0"});
setTimeout(function(){
$(".imgbox").css("transition","2s");
ci=1;
$(".imgbox").css("left",-$(".imgbox > img").width()*ci);
},100);
}
}
$(".imgbox").mouseover(function(){
clearInterval(interval);
$(".imgbox").stop();
});
$(".imgbox").mouseout(function(){
interval = setInterval(slide,3000);
});
});
</script>
</body>
■ 클릭시 숨겨진 화면 나오기
클릭시 내 요소만 나오고 다른것은 숨김효과
빈공간 클릭시 숨김효과
○ 이벤트 전파방지
자식 요소를 클릭하는 이벤트를 사용할때
자식을 누르면 부모도 같이 눌러지는 효과가 있음
<style>
body{
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: aqua;
}
.sbox{
width: 50px;
height: 50px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="sbox"></div>
</div>
<script>
$(function(){
$(".box").click(function(){
console.log("부모 클릭");
});
$(".sbox").click(function(){
console.log("자식 클릭");
});
});
</script>
</body>
자식을 눌렀을때는 블루가 들어가고 부모를 눌렀을때는 블랙이 들어가고 싶음
그러나 다 블랙으로 들어감
<script>
$(function(){
$(".box").click(function(){
$(".sbox").css("background-color","black");
});
$(".sbox").click(function(){
$(".sbox").css("background-color","blue");
});
});
</script>
해결방안
e.stopPropagation();
e 변수는 function(여기값){}
//이벤트가 더 이상 상위 요소로 전파되지 않도록 방지
//즉, 클릭 이벤트가 발생하면 그 이벤트가 상위 요소로 전달되지 않도록 함<script>
$(function(){
$(".box").click(function(){
$(".sbox").css("background-color","black");
});
$(".sbox").click(function(e){
e.stopPropagation();
$(".sbox").css("background-color","blue");
});
});
</script>
○ 수업내용
<style>
body{
margin: 0;
}
.wrap{
height: 150vh;
}
.contents{
margin: 0 auto;
width: 600px;
height: 400px;
background-color: aquamarine;
display: flex;
justify-content: space-between;
}
.item{
position: relative;
width: 30%;
height: 300px;
background-color: blue;
overflow: hidden;
}
.item > .con{
height: 90%;
}
.item > .con > .img{
height: 80%;
}
.item > .con > .img > img{
width: 100%;
height: 100%;
object-fit: cover;
}
.item > .con > .text{
height: 20%;
}
.item > .hide-con{
border-radius: 10px 10px 0 0;
position: absolute;
bottom: -70px;
width: 100%;
height: 100px;
background-color: #fff;
text-align: center;
cursor: pointer;
transition: 1s;
}
.item > .hide-con.act{
bottom: 0;
}
.item > .hide-con > .bt{
width: 50px;
margin: 0 auto;
position: relative;
transform: rotate(0deg);
transition: transform 1s;
}
.item > .hide-con:hover > .bt{
transform: rotate(180deg);
}
</style>
<body>
<div class="wrap">
<div class="contents">
<div class="item">
<div class="con">
<div class="img">
<img src="https://picsum.photos/id/32/200/300" alt="">
</div>
<div class="text">설명</div>
</div>
<div class="hide-con">
<div class="bt">^</div>
<div>추가 내용들</div>
</div>
</div>
<div class="item">
<div class="con">
<div class="img">
<img src="https://picsum.photos/id/33/200/300" alt="">
</div>
<div class="text">설명</div>
</div>
<div class="hide-con">
<div class="bt">^</div>
<div>추가 내용들</div>
</div>
</div>
<div class="item">
<div class="con">
<div class="img">
<img src="https://picsum.photos/id/34/200/300" alt="">
</div>
<div class="text">설명</div>
</div>
<div class="hide-con">
<div class="bt">^</div>
<div>추가 내용들</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$(".hide-con").click(function(e){
e.stopPropagation(); /*나의 부모로 이벤트 전파 방지*/
if($(this).hasClass("act")){
$(this).removeClass("act");
}
else{
$(".hide-con").removeClass("act");
$(this).addClass("act");
}
});
$("body").click(function(){
$(".hide-con").removeClass("act");
});
});
</script>
</body>
■ 찾기 함수
○ 기본화면
<style>
body{
margin: 0;
}
.pbox{
width: 300px;
height: 300px;
display: flex;
background-color: burlywood;
justify-content: space-between;
}
.box{
width: 30%;
align-content: center;
background-color: aqua;
}
.cbox{
width: 50%;
margin: 10px auto;
aspect-ratio: 1;
border-radius: 50%;
background-color: red;
font-size: 30px;
text-align: center;
align-content: center;
}
</style>
<body>
<div class="pbox">
<div class="box">
<div class="cbox">1</div>
<div class="cbox c1">2</div>
<div class="cbox c2">3</div>
</div>
<div class="box">
<div class="cbox">4</div>
<div class="cbox">5</div>
<div class="cbox c1">6</div>
</div>
<div class="box">
<div class="cbox">7</div>
<div class="cbox c2">8</div>
<div class="cbox">9</div>
</div>
</div>
</body>
○ eq(번호) : 찾은 값중 몇번째
○ find(이름) : 모든 자식중에서 이름이 같은것 / 빈것으로 넣을 수 없음
- eq활용 5번찾기
let a = $(".box").eq(1).find(".cbox").eq(1);
○ children(): 모든 자식요소 선택
○ children(이름) : 자식요소 중에서 이름이 같은것
- 0번 박스에서 자식 이름 c1 찾기
let a = $(".box").eq(0).children(".c1");
○ siblings() : 부모가 동일한 나를 제외한 형제
- 0번 박스에서 자식요소 .c1이 아닌 1,3번 찾기
let a = $(".box").eq(0).children(".c1").siblings();
- 모든 박스에서 c1을 형제로 같는 요소 찾기 1,3,4,5
let a = $(".box").children(".c1").siblings();
○ next() : 바로 다음 형제 찾기
○ prev() : 바로 이전 형제 찾기
○ next(이름) , prev(이름) : 이름이 같은것 찾기
- c1으로 되어 있는 클래스의 이전 찾기 1,5번
let a = $(".box").children(".c1").prev();
- c2이전 형제 찾기 2, 7번
let a = $(".box").children(".c2").prev();
- c2이전 형제인데 클래스가 c1 찾기 2번
let a = $(".box").children(".c2").prev();
- c2다음 형제 찾기 9번
let a = $(".box").children(".c2").next();
- 모든 박스들의 첫번째 자식찾기
let a = $(".box").children(":first-child");
let a = $(".box").children(":nth-child(1)");
○ nextAll() : 다음 형제 모두 선택
○ prevAll() : 이전 형제 모두 선택
○ nextAll(이름), prevAll(이름) : 이름이 같은
- 모든 박스들의 첫번째 자식의 다음 형제 모두 (2,3)(5,6)(8,9)번
let a = $(".box").children(":nth-child(1)").nextAll();
- 3번째 이전 형제중 이름이 c2 8번
let a = $(".box").children(":nth-child(3)").prevAll(".c2");
○ parent() : 직전의 부모 / parent(이름) : 직전의 부모중 이름이 같은
○ parents() : 부모 모두 / parents(이름) : 부모 모두 중 이름이 같은
- c1이름을 가진 요소들의 부모 모두 중에서 이름이 .box인 왼쪽 가운데 네모박스
let a = $(".c1").parents(".box");
-C1이름을 가진 요소들의 부모 .box인 요소들 중에서 2번째 자식요소를 제외하고 1,4,3,6번
let a = $(".c1").parents(".box").children(":nth-child(2)").siblings();
-p박스의 자식들중에 c1의 바로 다음요소들 중 c1이전요소 1,5번
let a = $(".pbox").find(".c1").prev();
-box요소중 3번째 이전 요소 모두 중에 자식이 c1인요소 2,6번
let a = $(".box").eq(2).prevAll().children(".c1");
- c1을 클릭했을때 내요소의 부모의 형제들에게 색 노랑 주기
$(".c1").click(function(){
$(this).parent().siblings().css("background-color","yellow");
});
■ 2월 24일 - 6일차
○ 서브메뉴나오게 하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<style>
body, h1, p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header{
height: 700px;
position: relative;
}
nav{
position: absolute;
left: 0; top: 0;
width: 100%; height: 60px;
padding: 0 40px; box-sizing: border-box;
display: flex; justify-content: space-between;
align-items: center;
color: #fff;
}
nav .menu-box{
display: flex; height: 100%;
position: relative;
}
.menu-box .menu{
width: 120px;
text-align: center; align-content: center;
background-color: black; cursor: pointer;
font-size: 18px; font-weight: 600;
}
.menu:hover{
background-color: #fff; color: #000;
}
.menu.act{
background-color: #fff; color: #000;
}
/* 서브 */
.menu-box .sub-box{
position: absolute;
left: 0; top: 100%;
background-color: #fff; color: #000;
}
.sub-box .sub-menu{
width: 700px; height: 400px;
background-color: #fff;
display: none;
}
.sub-box .sub-menu.act{
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="img1.jpg" alt="">
<nav>
<div class="logo">로고</div>
<div class="menu-box">
<div class="menu">홈페이지</div>
<div class="menu">커뮤니티</div>
<div class="menu">쇼핑</div>
<div class="menu">음악</div>
<div class="menu">취미</div>
<div class="sub-box">
<div class="sub-menu">
<p>홈페이지 메뉴</p>
</div>
<div class="sub-menu">
<p>커뮤니티 메뉴</p>
</div>
<div class="sub-menu">
<p>쇼핑 메뉴</p>
</div>
<div class="sub-menu">
<p>음악 메뉴</p>
</div>
<div class="sub-menu">
<p>취미 메뉴</p>
</div>
</div>
</div>
<div class="icon">아이콘</div>
</nav>
</header>
</div>
<script>
$(function(){
let me = $(".menu-box .menu");
let sume = $(".sub-box .sub-menu");
me.hover(function(){
let ix = $(this).index();
sume.eq(ix).addClass("act");
},function(){
let ix = $(this).index();
sume.eq(ix).removeClass("act");
});
sume.hover(function(){
$(this).addClass("act");
me.eq($(this).index()).addClass("act");
},function(){
$(this).removeClass("act");
me.eq($(this).index()).removeClass("act");
})
});
</script>
</body>
</html>
○ Tap, 이동하기 , 더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<style>
body, h1, p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header{
height: 700px;
position: relative;
}
nav{
position: absolute;
left: 0; top: 0;
width: 100%; height: 60px;
padding: 0 40px; box-sizing: border-box;
display: flex; justify-content: space-between;
align-items: center;
color: #fff;
}
nav .menu-box{
display: flex; height: 100%;
position: relative;
}
.menu-box .menu{
width: 120px;
text-align: center; align-content: center;
background-color: black; cursor: pointer;
font-size: 18px; font-weight: 600;
}
.menu:hover{
background-color: #fff; color: #000;
}
.menu.act{
background-color: #fff; color: #000;
}
/* 서브 */
.menu-box .sub-box{
position: absolute;
left: 0; top: 100%;
background-color: #fff; color: #000;
}
.sub-box .sub-menu{
position: absolute;
left: 0; top: 0;
width: 700px; height: 0px;
overflow: hidden;
background-color: #fff;
}
.sub-box .sub-menu.act{
height: 400px;
transition: 1s;
}
section{
padding: 50px 100px; box-sizing: border-box;
}
.s1 .title{
font-size: 32px;
margin-bottom: 50px;
}
.s1 .container{
display: flex;
}
.s1 .container .bt-box{
width: 300px;
}
.s1 .container .contents-box{
width: calc(100% - 300px);
}
.s1 .container .contents-box .contents{
height: 400px;
display: none;
}
.s1 .container .contents-box .contents:nth-child(1){
height: 600px;
}
.s1 .container .contents-box .contents.act{
display: block;
}
.s1 .bt{
height: 40px;
border: 1px solid #000;
align-content: center;
text-align: center;
}
.s1 .bt.act{
background-color: aqua;
color: #fff;
}
.s2 .title{
font-size: 32px;
margin-bottom: 60px;
}
.s2 .bt{
height: 40px; width: 120px;
align-content: center; text-align: center;
margin-bottom: 40px;
background-color: #000; color: #fff;
}
.s2 .box{
width: 100%; height: 300px;
overflow: hidden;
}
.s2 .box .img-box{
display: flex;
width: 200%; height: 100%;
position: relative;
left: 0;
transition: 1s;
}
.s2 .box .img-box.act{
left: -100%;
}
.s2 .box .img-box img{
width: 50%;
}
.s3 .title{
font-size: 32px;
margin-bottom: 50px;
}
.s3 .con{
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 50px;
}
.s3 .con .item{
width: calc((100% - 60px)/4);
display: none;
}
.s3 .con .item.act{
display: block;
}
.s3 .con .item img{
height: 300px;
}
.s3 .more{
width: 120px; height: 40px;
background-color: #000; color: #fff;
text-align: center; align-content: center;
margin: 0 auto;
}
.s3 .more.re{
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="img1.jpg" alt="">
<nav>
<div class="logo">로고</div>
<div class="menu-box">
<div class="menu">홈페이지</div>
<div class="menu">커뮤니티</div>
<div class="menu">쇼핑</div>
<div class="menu">음악</div>
<div class="menu">취미</div>
<div class="sub-box">
<div class="sub-menu">
<p>홈페이지 메뉴</p>
</div>
<div class="sub-menu">
<p>커뮤니티 메뉴</p>
</div>
<div class="sub-menu">
<p>쇼핑 메뉴</p>
</div>
<div class="sub-menu">
<p>음악 메뉴</p>
</div>
<div class="sub-menu">
<p>취미 메뉴</p>
</div>
</div>
</div>
<div class="icon">아이콘</div>
</nav>
</header>
<section class="s1">
<p class="title">첫번째 섹션</p>
<div class="container">
<div class="bt-box">
<div class="bt act">1번</div>
<div class="bt">2번</div>
<div class="bt">3번</div>
</div>
<div class="contents-box">
<div class="contents act">
<img src="img2.jpg" alt="">
</div>
<div class="contents">
<img src="img3.jpg" alt="">
</div>
<div class="contents">
<img src="img4.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="s2">
<p class="title">두번째 섹션</p>
<div class="con">
<div class="bt">버튼</div>
<div class="box">
<div class="img-box">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="s3">
<p class="title">3번째 섹션</p>
<div class="con">
<div class="item act">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item act">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item act">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item act">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
<div class="item">
<img src="img1.jpg" alt="">
<p class="a1">제목</p>
<p class="a2">Officiis vero illo iure deserunt culpa odit repellat consequatur ducimus.</p>
</div>
</div>
<div class="more">더 보기</div>
</section>
</div>
<script>
$(function(){
let bt = $(".s1 .bt");
let ct = $(".s1 .contents");
bt.click(function(){
let ix = $(this).index();
ct.eq(ix).addClass("act").siblings().removeClass("act");
$(this).addClass("act").siblings().removeClass("act");
});
let bt2 = $(".s2 .bt");
let img = $(".s2 .img-box");
bt2.click(function(){
img.toggleClass("act");
});
let mo = $(".s3 .more");
mo.click(function(){
$(".s3 .item").addClass("act");
$(this).addClass("re");
});
});
</script>
</body>
</html>
■ 2월 24일 - 6일차
■ 2월 25일 - 7일차
■ 햄버거 메뉴, 호버
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<style>
body, h1, h2, h3, p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
header{
height: 700px;
position: relative;
overflow: hidden;
}
header nav{
display: flex;
justify-content: space-between;
padding: 0 40px; box-sizing: border-box;
color: #fff;
align-items: center;
position: absolute;
left: 0; top: 0; width: 100%; height: 50px;
}
nav .menu-box{
display: flex;
height: 100%;
}
nav .menu > p{
padding: 0 40px;
height: 100%;
align-content: center;
cursor: pointer;
position: relative;
}
nav .menu > p::after{
content: "";
position: absolute;
left: 10%; bottom: 3px;
display: block;
height: 3px; width: 0;
background-color: rgb(188, 188, 219);
transition: 0.5s;
}
nav .menu:hover > p::after{
width: 80%;
}
nav .menu:hover{
background-color: #fff; color: #000;
}
nav .sub-menu-box{
position: absolute;
left: 0; top: 100%; color: #000;
width: 100%; height: 300px; background-color: #fff;
display: none;
}
nav .icon{
height: 100%;
padding: 0 30px; align-content: center;
}
nav .icon:hover .sub-menu{
right: 0;
}
nav .icon .sub-menu{
position: absolute;
right: -200px; top: 100%;
width: 200px; height: 400px; background-color: #fff; color: #000;
transition: 0.5s;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<img src="img4.jpg" alt="">
<nav>
<div class="logo">로고</div>
<div class="menu-box">
<div class="menu">
<p>menu1</p>
<div class="sub-menu-box">
<p>menu1번의 세부</p>
</div>
</div>
<div class="menu">
<p>페이지</p>
<div class="sub-menu-box">
<p>페이지의 세부</p>
</div>
</div>
<div class="menu">
<p>쇼핑</p>
<div class="sub-menu-box">
<p>쇼핑번의 세부</p>
</div>
</div>
<div class="menu">
<p>콘텐츠</p>
<div class="sub-menu-box">
<p>콘텐츠의 세부</p>
</div>
</div>
</div>
<div class="icon">아이콘
<div class="sub-menu">
<p>메뉴1</p>
<p>메뉴2</p>
<p>메뉴3</p>
</div>
</div>
</nav>
</header>
</div>
<script>
$(function(){
$("nav .menu").on("mouseenter",function(){
$(this).find(".sub-menu-box").stop(true,true).slideDown(500);
//첫번째 true 대기열을 제거
//두번째 true 진행중인 애니메이션 즉시 완료후
});
$("nav .menu").on("mouseleave",function(){
$(this).find(".sub-menu-box").stop(true, true).slideUp(300);
});
});
</script>
</body>
</html>
■ Fullpage-js
Fullpage.js는 웹 페이지에서 전체 화면 스크롤링 효과를 구현할 수 있는 JavaScript 라이브러리
웹 페이지를 여러 섹션으로 나누어 각 섹션을 스크롤링으로 전환할 수 있다.
이를 통해 사용자는 웹 페이지를 일반적인 방법보다 더 직관적으로 탐색할 수 있으며,
웹 페이지의 시각적 효과를 높일수 있음.
■ Fullpage 적용
○ CDN적용
- CDN 개념
Content delivery Network 콘텐츠 전송 네트워크
서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용
- 링크 가져오기
fullpage cdn
https://cdnjs.com/libraries/fullPage.js
- CSS, JS 링크
<head>
<!-- Fullpage CSS 코드-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.css">
<!-- Fullpage에 필요한 스크립트 코드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.js"></script>
</head>
○ Fullpage 적용
- HTML
전체 페이지명(id = "fullpage")을 명확하게 해야 함. Script에서 설정과 동일
class로 해도 상관은 없음
내부 박스명 클래스 section으로 설정 (기본값)
각 section에서 내부 슬라이드 slide로 설정 (기본값)
<div id="fullpage">
<div class="section">
<h1>fullPage.js</h1>
</div>
<div class="section">
<div class="slide"><h1>Section 2</h1></div>
<div class="slide"><h1>Slide 2.2</h1></div>
<div class="slide"><h1>Slide 2.3</h1></div>
</div>
<div class="section" id="section2">
<h1>Section3</h1>
</div>
<div class="section">
<h1>Section4</h1>
</div>
</div>
- Css 구성
h1{
font-size: 6em;
text-align: center;
}
.section{ /* 배경색 */
background-color: aquamarine;
}
#section2{ /* 특정 section 배경색 */
background-color: salmon;
}
- Sctipt 구성
변수에 넣어서 사용(각각 통제하고자)
myFullpage == 변수명 다르게 해도 됨
new fullpage 대소문자 구분
#fullpage 페이지를 감싸는 박스의 클래스 또는 아이디명 동일 (# : 아이디, . : 클래스)
let myFullpage = new fullpage("#fullpage", {
});
■ Fullpage 간단한 옵션
○ Section 설정
sectionSelector : ".section"
section명을 적어주면됨. 변경되면 그에 맞게 class 지정
let myFullpage = new fullpage("#fullpage", {
sectionSelector: '.section'
});
○ navigation 설정
우측에 navigation 설정
let myFullpage = new fullpage("#fullpage", {
navigation: true,
});
navigtion 설정 변경
let myFullpage = new fullpage("#fullpage", {
navigation: true,
navigationPosition: 'left', //위치
navigationTooltips: ['1번', '2번', '3번', '4번'], // 각 점에 툴팁 추가
showActiveTooltip: true, // 활성화된 툴팁 표시
});
navigtion 색 변경
/* 네비 색변경 */
#fp-nav ul li a span{
background-color: blueviolet;
}
/* 네비 활성화 색변경 */
#fp-nav ul li a.active span{
background-color: blue;
}
/* 네비 툴팁 변경 */
#fp-nav ul li .fp-tooltip{
color: black;
font-weight: 900;
}
○ scrllingSpeed 설정
스크롤할때 animation 속도 설정
let myFullpage = new fullpage("#fullpage", {
scrollingSpeed: 3000, //3초
});
○ 클릭 메뉴 설정
- Html
<ul id="menu">
<li data-menuanchor="1"><a href="#1">slide1</a></li>
<li data-menuanchor="2"><a href="#2">slide2</a></li>
<li data-menuanchor="3"><a href="#3">slide3</a></li>
<li data-menuanchor="4"><a href="#4">slide4</a></li>
</ul>
- Css
#menu {
position: fixed;
top: 0;
left: 0;
z-index: 70;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
margin: 10px;
color: #000;
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
#menu li:hover {
background: rgba(255, 255, 255, 0.8);
}
#menu li.active,
#menu li.active:hover {
background: rgba(0, 0, 0, 0.5);
}
#menu li a {
text-decoration: none;
color: #000;
padding: 9px 18px;
display: block;
}
#menu li.active a,
#menu li.active:hover a:hover {
color: #fff;
}
-script
let myFullpage = new fullpage("#fullpage", {
menu: "#menu",
anchors: ["1","2","3","4"],
});
○ 슬라이드 버튼 변형
.fp-arrow.fp-prev{
border-width: 10px 8px 10px 0px;
border-color: transparent red transparent transparent;
margin-top: 0px;
}
.fp-arrow.fp-next{
border-width: 10px 0 10px 8px;
border-color: transparent transparent transparent red;
margin-top: 0px;
}- 풀페이지 버튼 위치 선정
#fp-nav{
top: 70%;
}○ 버튼형 슬라이드
- Html
<div id="fullpage">
<div class="section">
<h1>fullPage.js</h1>
</div>
<div class="section" id="s2">
<div class="slide"><h1>Section 2</h1></div>
<div class="slide"><h1>Slide 2.2</h1></div>
<div class="slide"><h1>Slide 2.3</h1></div>
</div>
<div class="section" id="s3">
<h1>Section3</h1>
</div>
<div class="section">
<h1>Section4</h1>
</div>
</div>
- Css
h1{
font-size: 6em;
text-align: center;
}
.section{
background-color: aquamarine;
}
#s2{ /* 스판 가운데로 */
text-align: center;
}
#s3{
background-color: salmon;
}
#fp-nav ul li a span, /*색 변경 */
.fp-slidesNav ul li a span {
background: blue;
}
-Script
let myFullpage = new fullpage("#fullpage", {
slidesNavigation: true, //일반
controlArrows: false, //화살표
});
■ 2월 26일 - 8일차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 폰트 어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<!-- 제이쿼리 -->
<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<!-- 풀페이지 css, js -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>
<!-- 스와이퍼 css, js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<style>
body, h2, h3, h4, p{
margin: 0;
}
img{
width: 100%; height: 100%; object-fit: cover;
display: block;
}
/* 섹션 내부 통제 */
.fp-overflow{
width: 100%;
}
/* 워터 마크 삭제 */
.fp-watermark{
display: none;
}
header .hsw{
height: 100%;
}
header .hsl .text-box{
position: absolute; left: 50px; bottom: 150px;
width: 500px;
color: #fff;
}
header .hsl .text-box h2{
font-size: 46px; text-transform: uppercase;
margin-bottom: 20px;
}
header .hsl .text-box p{
font-size: 18px; font-weight: 600;
}
header nav{
position: absolute; left: 0; top: 0;
z-index: 1;
width: 100%; height: 50px;
padding: 0 50px; box-sizing: border-box;
color: #fff; font-weight: 600;
display: flex; justify-content: space-between; align-items: center;
}
header nav .logo{
font-size: 24px;
}
header nav .menu{
display: flex; gap: 50px;
}
/* 1번콘텐츠 */
.s1 {
padding: 40px 100px;
}
.s1 .fp-overflow{
height: 100%;
display: flex; flex-direction: column;
justify-content: space-between;
}
.s1 h2{
margin-bottom: 20px;
}
.s1 .container{
display: flex;
gap: 20px;
}
.s1 .container .item{
width: calc((100% - 60px)/4);
}
.s1 .container .img-box{
overflow: hidden;
}
.s1 .container .item:hover img{
scale: 1.1;
}
.s1 .container img{
height: 200px;
transition: 0.5s;
}
.s1 .container .text-box{
padding: 10px;
}
.s1 .container .text-box h4{
margin-bottom: 8px;
}
.s1 .contents2{
display: flex;
height: 150px;
}
.s1 .contents2 .box{
width: 50%;
position: relative;
}
.s1 .contents2 .box h4{
position: absolute; left: 20px; bottom: 20px;
font-size: 18px;
}
/* 두번째 콘텐츠 */
.s2{
padding: 0 100px;
}
.s2 h2{
margin-bottom: 30px;
}
.s2 .s2sw1{
margin-bottom: 30px;
}
.s2 .s2sw1 img{
height: 250px;
}
.s2 .s2sw1 i{
font-size: 24px;
position: absolute;
top: 40%;
z-index: 1;
cursor: pointer;
}
.s2 .s2sw1 i.prev{
left: 20px;
}
.s2 .s2sw1 i.next{
right: 20px;
}
.s2 .s2sw1 i.swiper-button-disabled{
opacity: 0.4;
}
.s2 .container{
display: flex;
gap: 30px;
}
.s2 .container > img{
width: 30%;
height: 300px;
}
.s2 .container .right{
width: calc(70% - 30px);
align-content: end;
position: relative;
}
.s2 .container .right img{
height: 200px;
}
.s2 .right .bt{
position: absolute;
right: 20px; top: 40px;
display: flex; gap: 30px;
}
.s2 .right .bt i{
cursor: pointer;
}
.s2 .right .bt i.swiper-button-disabled{
opacity: 0.4;
}
footer.section{
height: 300px; background-color: blueviolet;
color: #fff; text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<header class="section header">
<div class="swiper hsw">
<div class="swiper-wrapper">
<div class="swiper-slide hsl">
<img src="img3.jpg" alt="">
<div class="text-box">
<h2>printer took a<br> galley of type and</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
</div>
</div>
<div class="swiper-slide hsl">
<img src="img1.jpg" alt="">
<div class="text-box">
<h2>printer took a<br> galley of type and</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
</div>
</div>
<div class="swiper-slide hsl">
<img src="img2.jpg" alt="">
<div class="text-box">
<h2>printer took a<br> galley of type and</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
</div>
</div>
</div>
</div>
<nav>
<div class="logo">로고</div>
<div class="menu">
<p>Menu1</p>
<p>Menu2</p>
<p>Menu3</p>
<p>Menu4</p>
<p>Menu5</p>
</div>
<div class="icon">아이콘</div>
</nav>
</header>
<section class="section s1">
<div class="contents1">
<h2>discovered the</h2>
<div class="container">
<div class="item">
<div class="img-box">
<img src="img4.jpg" alt="">
</div>
<div class="text-box">
<h4>There are many variations</h4>
<p>by injected humour, or randomised words which don't look even</p>
</div>
</div>
<div class="item">
<div class="img-box">
<img src="img4.jpg" alt="">
</div>
<div class="text-box">
<h4>There are many variations</h4>
<p>by injected humour, or randomised words which don't look even</p>
</div>
</div>
<div class="item">
<div class="img-box">
<img src="img4.jpg" alt="">
</div>
<div class="text-box">
<h4>There are many variations</h4>
<p>by injected humour, or randomised words which don't look even</p>
</div>
</div>
<div class="item">
<div class="img-box">
<img src="img4.jpg" alt="">
</div>
<div class="text-box">
<h4>There are many variations</h4>
<p>by injected humour, or randomised words which don't look even</p>
</div>
</div>
</div>
</div>
<div class="contents2">
<div class="box">
<img src="img3.jpg" alt="">
<h4>Contrary to popular belie</h4>
</div>
<div class="box">
<img src="img2.jpg" alt="">
<h4>Contrary to popular belie</h4>
</div>
</div>
</section>
<section class="section s2">
<h2>College in Virginia</h2>
<div class="swiper s2sw1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>This book is a</h4>
</div>
</div>
<i class="fa-solid fa-angles-left prev"></i>
<i class="fa-solid fa-angles-right next"></i>
</div>
<div class="container">
<img src="img1.jpg" alt="">
<div class="right">
<div class="swiper s2sw2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>discovered the undoubtable</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>discovered the undoubtable</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>discovered the undoubtable</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>discovered the undoubtable</h4>
</div>
<div class="swiper-slide">
<img src="img3.jpg" alt="">
<h4>discovered the undoubtable</h4>
</div>
</div>
</div>
<div class="bt">
<i class="fa-solid fa-angles-left prev"></i>
<i class="fa-solid fa-angles-right next"></i>
</div>
</div>
</div>
</section>
<footer class="section">
<h2>바닥</h2>
</footer>
</div>
<script>
let full = new fullpage(".wrap",{
navigation : true,
});
// 헤더 스와이퍼
let hsw = new Swiper(".wrap .hsw",{
autoplay:{
delay : 2500,
loop : true,
},
loop : true,
});
let s2sw1 = new Swiper(".wrap .s2sw1",{
slidesPerView : 4,
spaceBetween : 20,
navigation: {
nextEl: ".s2sw1 .next",
prevEl: ".s2sw1 .prev",
},
});
let s2sw2 = new Swiper(".wrap .s2sw2",{
slidesPerView : 3,
spaceBetween : 20,
navigation: {
nextEl: ".s2 .right .next",
prevEl: ".s2 .right .prev",
},
});
</script>
</body>
</html>
■ 3월 3일 - 9일차
'Web 수업자료 > Web 정규' 카테고리의 다른 글
| Web 2 26-2 (0) | 2026.02.12 |
|---|---|
| 웹 디자인 1 26-1 (0) | 2026.01.17 |
| Web 3 26-1 (0) | 2026.01.12 |
| Web 2 25-12 (0) | 2025.12.04 |
| UIUX 디자인 24-11 (0) | 2025.11.23 |