Web 4 25-01

Web 수업자료/Web 정규

Web 4 25-01

초코렛맛 2025. 1. 14. 18:20

    <!-- 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>

<!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://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<style>
    body{
        margin: 0;
    }
    header{
        height: 50px;
        align-content: center;
    }
    header > .menu{
        width: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .menu > .smenu{
        width: 100px;
        height: 40px;
        text-align: center;
        align-content: center;
        cursor: pointer;
        position: relative;
    }
    .smenu::after{
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 0%;
        height: 2px;
        background-color: rgba(23, 13, 60, 0.6);
    }
    
    .smenu:hover::after{
        width: 100%;
        transition: 1s;
    }
    .cont1{
        margin-top: 30px;
        height: 400px;
        background-color: antiquewhite;
        padding: 0 50px;
        box-sizing: border-box;
    }
    .cont1 .item{
        width: 300px;
        height: 95%;
        box-shadow: 3px 3px 4px #444;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
    }
    .cont1 .item .imgbox{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .cont1 .item .imgbox img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cont1 .item .imgbox .text{
        position: absolute;
        width: 100%;
        font-size: 32px;
        padding: 0 20px;
        box-sizing: border-box;
        top: 30px;
        font-weight: 600;
        color: #fff;
        text-shadow: 2px 2px 2px #666;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cont2 .con{
        width: 80px;
        height: 400px;
        background-color: #ccc;
        padding: 10px 5px;
        box-sizing: border-box;
    }
    .cont2 .swiper-slide img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<body>
    <div class="wrap">
        <header>
            <div class="menu">
                <div class="smenu">홈페이지</div>
                <div class="smenu">스토어</div>
                <div class="smenu">엔터테이먼트</div>
                <div class="smenu">고객지원</div>
            </div>
        </header>
        <div class="cont1">
            <div class="swiper mySwiper s1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="imgbox">
                                <img src="https://picsum.photos/id/50/600/600" alt="">
                                <div class="text">There are many variations of passages of Lorem Ipsum available</div>
                            </div>
                        </div>
                    </div>                    
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="imgbox">
                                <img src="https://picsum.photos/id/100/600/600" alt="">
                                <div class="text"> written in 45 BC. This book is a treatise on the theory of ethics</div>
                            </div>
                        </div>
                    </div>                    
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="imgbox">
                                <img src="https://picsum.photos/id/60/600/600" alt="">
                                <div class="text">Contrary to popular belief, Lorem Ipsum is not simply random text</div>
                            </div>
                        </div>
                    </div>                    
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="imgbox">
                                <img src="https://picsum.photos/id/70/600/600" alt="">
                                <div class="text">literature from 45 BC, making it over 2000 years old</div>
                            </div>
                        </div>
                    </div>                    
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="imgbox">
                                <img src="https://picsum.photos/id/80/600/600" alt="">
                                <div class="text"> College in Virginia, looked up one of the more obscure Latin words</div>
                            </div>
                        </div>
                    </div>                    
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="imgbox">
                                <img src="https://picsum.photos/id/90/600/600" alt="">
                                <div class="text">words which don't look even slightly believable. If you are going</div>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
            
        </div>
        <div class="cont2">
            <div class="con">
                <div class="swiper mySwiper s2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="https://picsum.photos/id/51/600/600" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://picsum.photos/id/52/600/600" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://picsum.photos/id/53/600/600" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://picsum.photos/id/54/600/600" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://picsum.photos/id/55/600/600" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://picsum.photos/id/56/600/600" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let sw1 = new Swiper(".s1", {
            slidesPerView: 4,
        });
        let sw2 = new Swiper(".s2",{
            direction:"vertical",
            slidesPerView: 3,
            spaceBetween: 40,
        });
    </script>

</body>
</html>

■ 1월 14일 - 1일차

■ 자바스크립트(Javascript)란?

○ 정의

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어임

웹 페이지가 단순히 정적인 정보를 표시하는 것 이상으로

시의적절한 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등을

표시할 때마다 JavaScript가 관련되어 있음.

○ HTML, CSS, Javascript 차이

- HTML : 문단, 제목, 데이터 표를 정의 페이지에 이미지, 영상을 삽입하는 등 콘텐츠를 정의

- CSS : 배경색 및 콘텐츠에 스타일을 적용하는 데 사용하는 언어

- Javascript : 동적으로 변경되는 콘텐츠를 만들고 멀티미디어를 제어하며

이미지에 애니메이션을 적용하는 등 모든 작업을 수행할 수 있는 언어

웹 사이트의 동작이나 상호작용을 정의 하는 언어

- HTML, CSS로 페이지 구성 및 배치를 하고 나서

Javascript로 페이지가 가진 기능 실행 및 동작활동을 실행함

언제부터 실행해야 할지 시점을 맞춰 주는 것이 중요

■ Javascript 환경구축

○ 환경구축 방법

1. HTML 내부에 작성하기

기본적으로 body아래에 작성해 주는것이 좋다.

이유 HTML의 태그와 CSS의 스타일이 모두 적용된 후 실행하기 때문이며

그래서 body내부에 태그 아래 쪽에 작성함

<body>
	<!-- Contents 작성 -->
    <script>
	    // Javascript 작성하는 부분
    </script>
</body>

2. 자바스크립트 파일을 만들고 작성코드를 문서에 연결하기

.js로 확장자명으로 파일을 만들어서 작성한다.

<body>
	
  <script src="script.js"></script>
</body>

■ 객체(Object)

○ 정의

특정 실체를 객관화 하여 인식하거나 이해하는 대상

세상에 실제로 존재하는 것을 실체로 칭한다면

나(주체)가 다른 실체를 바라볼때, 그 실체가 객체라고 함.

컴퓨터 과학에서는 메모리(실제 저장공간)에 할당 된 것으로 프로그램에서

사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미

자바스크립트에서의 객체

값 또는 기능을 가지고 있는 데이터로 웹브라우저도 소프트웨어 세계에 존재하는 사물로 객체이다.

웹브라우저 객체 의 대표 (Window) : 웹브라우저에 접근할 수 있음

○ 객체 사용법

- 객체이름 및 실제 객체뒤에 점을 찍어 주면 내부에 접근 할 수 있다.

- 객체.데이터 : 객체가 가지고 있는 숫자 문자등 다양한 데이터를 사용

- 객체.기능() : 객체가 가지고 있는 다양한 기능을 수행

○ 주석

- 주석 내용은 컴파일 하지 않고 사용자에게는 보여지는 것

// 한줄 주석

/*
여러줄
주석
*/

○ 기본사용

- window객체에서 alert() (경고창 기능을 사용하겠다)

window.alert()

- alert기능 내 ()에 작성되어진 것은 내부에 있는 것을 경고창에 넣어 주어 사용하겠다는 의미임

문자는 " " 큰따옴표 및 ' ' 작은 따옴표로 작성 +는 문자를 연결

window.alert("안녕"+'하세요')

- 여러개를 작성해줄때 기본 ;(세미콜론은 한줄 종료를 의미)

window.alert("안녕");
window.alert("웹페이지");
window.alert("기본");

- 주석처리

window.alert("안녕");
// window.alert("웹페이지");
window.alert("기본");

- 여러줄 주석

window.alert("안녕");
/*
window.alert("웹페이지");
window.alert("기본");
*/

■ Javascript 코드 작성시 규칙

○ 대문자와 소문자를 잘 구분 해서 작성

○ 구문의 끝에는 세미콜론(;) 입력해 끝을 알림

○ 한줄에는 1개의 구문을 작성하는것이 기본

■ 콘솔(console)

콘솔은 브라우저의 디버깅(debugging) 콘솔을 의미,

브라우저 안에 내장된 브라우저의 하위 객체로 브라우저 객체를 통해 접근

디버그(debug) : 컴퓨터 프로그램 개발 단계 중 시스템의

논리적 오류나 비정상적 연산(버그)를 찾아내고 수정하는 작업과정

디버깅 콘솔

개발자 도구를 열면 메뉴 중 콘솔항목이 있는데 이 화면이 디버깅 콘솔

자바스크립트 코드를 테스트(점검) 할 수 있다.

기본적으로 window 의 하위 객체 이지만 편의를 위해 생략해도 문제 없음

window.console.log(11);
console.log(100);

- 세미콜론이 없을때

window.console.log(11) console.log(100) //에러 문법적인 문제

window.console.log(11); console.log(100);

- 대소문자 잘못 사용시

console.log(11);
console.Log(100);

- clear

내 이전 콘솔의 내용을 지운다.

console.log("안녕");
console.clear();
console.log("기본");
console.log("이상");

■ 변수(Variable)

○ 변수(variable)

값에 상직적인 이름으로 변수명은 식별자(identifiers)라 불린다.

데이터에 붙이는 이름으로 변수를 이용하면 이름표를

붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용 할 수 있다.

○ 변수의 선언

변수를 만들어 주는 작업을 선언이라고 하며, 만들어진 변수에 첫 데이터를 지정하는 것을

변수의 초기화라 부른다. 동시 진행할 수 있고 따로 진행 가능

let 변수이름; // 변수 선언
변수이름 = 데이터; // 변수 초기화

let 변수이름 = 데이터; // 변수의 선언 및 초기화

let va1 = "안녕 ";
let va2;
va2 = "하세요";

console.log(va1+va2);

○ 변수의 이름 규칙

- 변수명에는 문자와 숫자 기호 $, _ 만이 포ㅓ함

- 변수명 첫번째에 숫자가 올수 없음

- 이미 다른 의미를 가지고 있는 단어(키워드)는 사용할 수 없다.

let console = "1";
console.log(console);

let 1va = "1";

let $va = "1";
console.log($va);

○ 변수의 변화

변수는 데이터를 기억하기 위해 사용, 변수는 한번에 하나의 데이터만 기억

기억하고 있는 값을 바꿔 사용 가능

let va1 = "안녕";
va1 = "웹수업";
console.log(va1);
va1 = "기본"
console.log(va1);

○ 변수의 선언 방식

- var : 변수를 선언 추가로 동시에 값을 초기화

- let : 블록 스코프 지역 변수 선언, 추가로 동시에 값을 초기화

- const : 블록 스코프 읽기 전용 상수를 선언

- var 와 let 의 차이로는 동일명으로 선언이 가능하다.

var a = 1;
var a = 2; // 동일명으로 선언가능
console.log(a);

let b = 1;
let b = 2; // 동일명 선언불가
console.log(b);

- var는 어디서나 선언해도 읽어 들일 수 있다.

var a1 = 1;
console.log("a1 = " + a1);
console.log("a2 = " + a2);
var a2 = 10;
console.log("아래쪽 a2 = " + a2);

let b1 = 1;
console.log("b1 = " + b1);
console.log("b2 = " + b2);
let b2 = 10;

- const

상수란 수식에서 변하지 않는 값을 뜻함

단 하나의 데이터만을 위해 사용하는 이름표 값의 변경이 불가능

상수는 선언과 동시에 초기화 해주어야 함. 그렇지 않으면 지정 불가

- 상수 선언 및 초기화

const con = '변하지 않음';
console.log(con);

- 값을 변경 불가

const con = '변하지 않음';
con = 20;
console.log(con);

- 선언하자 마자 초기화 하지 않아도 불가

const con;
con = 20;
console.log(con);

○ 변수에 저장 시킬수 있는 자료

자바스크립트로 표현 할 수 있는 모든 데이터를 기억할 수 있다.

간단한 자료로는 숫자와 문자열이 있음

- 숫자 저장 및 콘솔

let num1 = 10;
let num2 = 0;
let num3 = -30;

console.log(num1+num3);

- 실수 저장 및 콘솔

let num1 = 3.141592;
let num2 = -1.125;

console.log(num1+num2);

- 문자열 저장

" " 큰따옴표 및 ' ' 작은 따옴표로 감싸야 한다.

let str1 = "안녕 123";
let str2 = "2#$%^";

console.log(str1+str2);

- 변수내 타 변수 값 및 계산식 입력

let a = 10;
let b = 2;

let c = a+b;
let d = c;

console.log(c);
console.log(d);

○ Prompt

입력을 받을 수 있도록 해주는 메서드

prompt("입력창에 나올 메시지")

prompt()의 값은 입력한 값으로 반환되어 콘솔을 거쳐서 화면에 나옴

console.log(prompt("입력 >> "));

- 입력내용 변수 처리 및 결과값 반환

let input_data = "여기에 10을 입력하세요";
let result = prompt(input_data);

console.log("결과 = " + result);

■ 데이터 구조 및 형

○ 원시형 데이터

- Boolean : true, false

- null : 비어있음

- nudefined : 값이 정의 되어 있지 않음

- Numver : 정수 형 또는 실수형

- String : 문자열

- 문자열은 더하면 이어주고 숫자형태는 더하기가 된다.

let a1 = 10;
console.log(a1 + 20);

let a2 = "10";
console.log(a2 + 20);

- 다른 사칙연산으로 변경하면 문자는 숫자화 된다.

let a1 = 10;
console.log(a1 - 20);

let a2 = "10";
console.log(a2 - 20);
console.log(a2 / 20);
console.log(a2 * 20);

- 문자열과 숫자를 더하면 문자열이 된다.

숫자를 먼저더해주려면()괄호를 작성해주면됨

let a1 = "안녕";
let a2 = 10;

console.log(a1+a2+20);
console.log(a2+20+a1);
console.log(a1+(a2+20));

○ 데이터 형 변환

- paseInt() : 정수 변환

- paseFloat() : 실수 변환

console.log(parseInt("10",2)); //2진수
console.log(parseInt("10",10)); //10진수
console.log(parseInt("10",8)); //8진수
console.log(parseInt("f",16)); //16진수
console.log(parseInt("10"));

- 실수 변환

console.log(parseInt("3.14"));
console.log(parseFloat("3.14"));
console.log(parseInt(10/3));
console.log(10/3);

○ 데이터 비교

- 비교 == 같은지 다른 지 boolean으로 나옴

let a1 = "안녕"=="안녕";  //비교 true
let a3 = "1" == 1; //문자를 숫자로 변환 true
let a2 = "" == 0; //비어 있는 것은 0 true
let a4 = "1" === 1; //=== 타입도 확인 false
let a5 = parseInt("1") === 1; //타입변환 paseInt 정수로 변경 true

console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);
console.log(a5);

○ 참조형 타입

- 함수, 객체, 배열등이 있다.

- 객체(Object) : 변수와 메서드를 한 곳에 모아주는 것

- 배열(Array) : 여러 개의 데이터 원소로 가진 데이터 집합

- 함수(Function) : 실행할 구문을 미리 정의 하고 사용하는 실행부

let obj = new Object(); //객체
let arr = new Array(); //배열
function sum(a,b){ //함수
  let s = a+b;
}

○ 산술 연산자

console.log(10+3); //더하기
console.log(10-3); //빼기
console.log(10*3); //곱하기
console.log(10/3); //나누기
console.log(10%3); //나머지

○ 증감 연산자

변수의 값을 1씩 증가시키거나 1씩 감소 시키는 연산자

증가시키거나 감소시키기 때문에 증감연산자라고 한다.

연산자	설명
++x	먼저 1 증가 (전위연산자)
x++	나중에 1 증가 (후위연산자)
--x	먼저 1 감소 (전위연산자)
x--	나중에 1 감소 (후위연산자)

let i = 1;
console.log(++i); // 2 미리 증가시킴 (전위)
console.log(i++); // 2 나중에 증가시킴 (후위)
console.log(i);   // 3
console.log(--i); // 2 미리 감소시킴 
console.log(i--); // 2 나중에 감소 시킴 
console.log(i); // 1

○ 복합 대입 연산자

변수의 값에 사칙연산을 시켜 바로 변경해 줄수 있다.

연산자	설명
x+=10	x변수의 값에 10을 더한 값을 x에 대입해준다.
x-=10	x변수의 값에 10을 뺀 값을 x에 대입해준다.
x*=10	x변수의 값에 10을 곱한 값을 x에 대입해준다.
x/=10	x변수의 값에 10을 나눈 값을 x에 대입해준다.
x%=10	x변수의 값에 10을 나누어 나머지 값을 x에 대입해준다.

let i = 1;
i+=10;
console.log(i); // 11
i=i+10; 
console.log(i); // 21
i%=10;
console.log(i); // 1

■ 조건문

○ 조건문의 기본

프로그램의 순차적인 흐름을 제어 할때 사용하는 실행문을 제어문이라고 한다.

조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어

참일때 실행 및 거짓일때 실행하는 것들에 대해서 지정해 준다.

○ 비교 연산자

연산자	설명
x > y	x가 y보다 크면 true 아니면 false
x >= y	x가 y보다 크거나 같으면 true 아니면 false
x < y	x가 y보다 작으면 true 아니면 false
x <= y	x가 y보다 작거나 같으면 true 아니면 false
x == y	x와 y가 같으면 true 다르면 false
x != y	x와 y가 다르면 true 같으면 false
x === y	x와 y가 같으면서 타입이 같으면 true 다르면 false
x !== y	x와 y가 다르거나 타입이 다르면 true 같으면 false

○ IF문

- if문법 사용법

if(표현식, 조건){
표현식의 결과가 참일때 실행하고자 하는 실행문;
}

- 사용예시

let x = 10, y = 20;

if (x == y) {
    document.write("x와 y는 같습니다.");
}

if (x < y) {
    document.write("x가 y보다 작습니다.");
}

if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
    document.write("x가 y보다 큽니다.");

- if, else문법 사용

if(표현식, 조건){
표현식의 결과가 참일때 실행하고자 하는 실행문;
}
//다른 실행문을 넣으면 else가 if를 인지 하지 못함;
else{ //조건을 넣어 주지 않는다.
//else는 if가 없으면 사용할 수 없다.
표현식의 결과가 거짓일때 실행하고자 하는 실행문;
}

- if, else, else if 문법 사용

if(표현식1, 조건){
표현식의 결과가 참일때 실행하고자 하는 실행문;
}
//다른 실행문을 넣으면 else if가 if를 인지 하지 못함;
else if(표현식2){//몇번이든 다시 사용가능
//else if는 if가 없으면 사용할 수 없다.
표현식1의 결과가 거짓이면서 표현식 2가 참일때 실행하고자 하는 실행문;
}
else if(표현식3){
표현식1,2의 결과가 거짓이면서 표현식 3이 참일때 실행하고자 하는 실행문;
}
else{
표현식1,2,3 결과가 거짓일때 실행하고자 하는 실행문;
}

- 사용예시

let x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else if (x < y) {
    document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
    document.write("x가 y보다 큽니다.");
}

- 삼항연산자

간단히 표현할수 있도록 한 내용

표현식 ? 반환값1 : 반환값2

let x = 3, y = 5;
let result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");

- 중첩 조건문

조건문을 중첩하여 여러 조건에 따라 다양하게 적용할 수 있다.

if(표현식1){
	if(표현식2){
    	표현식1이 맞고 표현식 2가 맞을때 실행하는 실행문;
    }
    else{
    	표현식1이 맞고 표현식 2가 아닐때 실행하는 실행문;
    }
    표현식1이 맞으면 실행하는 실행문; //표현식2와 상관없이 무조건 실행
}
else{
	//여기에 if를 넣을 수도 있다.
	표현식1이 아닐때 실행하는 실행문;
}

let x = 10, y = 20;
if (x != y) {
	if(x>y){
    	document.write("x가 y보다 크다.");
    } else{
    	document.write("x가 y보다 작다.");
    }
} else { 
    document.write("x와 y는 같습니다.");
}

○ Switch문

표현식, 또는 조건에 따라 다른 명령을 수행하는 if문과 다르게

조건 값이 무엇일때 다른 명령을 수행할지를 결정해 준다.

- 문법

switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break; //사용을 하지 않으면 값1이 맞으면 밑에 까지 같이 실행됨
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
}

- 사용예시

let x = 10;
switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.");
        break;
    case "string":
        document.write("변수 x의 타입은 문자열입니다.");
        break;
    case "object":
        document.write("변수 x의 타입은 객체입니다.");
        break;
    default:
        document.write("변수 x의 타입을 잘 모르겠네요...");
        break;
}

- 기타 사용

let day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)

switch (day) {
    case 1: // 월요일인 경우
    case 2: // 화요일인 경우
    case 3: // 수요일인 경우
    case 4: // 목요일인 경우
    default: // 0부터 6까지의 값이 아닌 경우
        document.write("아직도 주말은 멀었네요... 힘내자구요!!");
        break;
    case 5: // 금요일인 경우
        document.write("오늘은 불금이네요!!");
        break;
    case 6: // 토요일인 경우
    case 0: // 일요일인 경우
        document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고에요!!");
        break;
}

■ 반복문

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문

프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나

○ while 문

while 문은 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복 실행

- 문법

while (표현식) {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

- 사용예시

let i = 1;

while (i < 5) { // 변수 i가 5보다 작을 때만 while 문을 반복함.
    document.write(i + "<br>");
    i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
}

- do/while문

while 문은 루프에 진입하기 전에 먼저 표현식부터 검사하지만

do / while 문은 먼저 루프를 한 번 실행한 후에 표현식을 검사한다.

결과와 상관없이 무조건 한번은 루프를 실행함

- 문법

do {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
} while (표현식);

- 사용예시

let i = 1;

do { // 변수 i의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
    document.write("i : " + (i++) + "<br>");
} while (i > 3);
//i의 값은 2임

○ for문

for 문은 while 문과는 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문

- 문법

for (초기식; 표현식; 증감식) {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

- 사용예시

for (let i = 1; i < 10; i++) {
    document.write(i + "<br>");
}

- for in

연속되어진 객체를 넣어주면 인덱스 번호로 개수 만큼 반복한다.

for (변수 in 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

let arr= [10,20,30];
for(let i in arr){
  document.write("i : " + i + " arr[i] : "+arr[i] + "<br>");
}

// 결과
i : 0 arr[i] : 10
i : 1 arr[i] : 20
i : 2 arr[i] : 30

- for of

연속되어진 객체를 넣어주면 값이 나오고 개수 만큼 반복한다.

for (변수 of 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

let arr= [10,20,30];
for(let i of arr){
  document.write("i : " + i + "<br>");
}

//결과
i : 10
i : 20
i : 30

○ 기타 제어문

- continue

만나게 되면 나머지 부분을 건너뛰고 다음을 실행 한다.

let Num = 3;

for (let i = 1; i <= 10; i++) {
    if (i % Num == 0){
      continue;
    } // Num의 배수는 출력하지 않음.
    document.write(i + " ");
}

// 결과

1 2 4 5 7 8 10

- break

만나게 되면 멈춘다.

let Num = 3;

for (let i = 1; i <= 10; i++) {
    if (i % Num == 0){
      break;
    } // Num의 배수이면 멈춤.
    document.write(i + " ");
}

//결과

1 2

■ 배열

○ 배열이란?

배열(array)는 이름과 인덱스로 참조되는 정렬된 값의 집합

배열을 구성하는 각각의 값을 배열요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를

인덱스(index)라고 한다.

- 자바스크립트 배열의 특징

배열 요소의 타입이 고정되어 있지 않다. 같은 배열에 다른 타입이 들어갈 수 있다.

배열은 array 객체로 다뤄진다.

○ 배열 생성

let arr1 = [1,"안녕",true]; // 배열 리터럴 이용
let arr2 = Array(10,20,"js","html"); //Array 객체의 생성자 이용
let arr3 = new Array(10,20,"js","html"); //new 연산자 이용 객체 생성
console.log(arr1);
document.write(arr1+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");

○ 배열 참조

배열의 각 요소를 참조 하고 싶을 때는 [] 연산자를 사용한다.

자바스크립트에서 배열 요소의 개수를 배열의 길이라고 한다.

length에 자동으로 갱신되며 인덱스는 언제나 0에서 부터 시작함

let arr1 = [1,"안녕",true];
console.log(arr1[1]); //1번 인덱스 접근
arr1[3] = 100; //3번 인덱스 추가
arr1[4] = 20; 
console.log(arr1);

- 배열의 개수 알아내기

let arr = [10,20,100,200];
console.log(arr.length); // 4

- 배열 추가

let arr = [];

arr.push(추가할 요소);         // push() 메소드를 이용하는 방법

arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법

arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

- 반복문을 이용한 배열 추가

let arr = [];

for(let i = 0; i<10; i++){
  arr[arr.length] = i;
}
console.log(arr);

○ 여러 배열 기능

- Join 배열안에 있는 내용을 합쳐준다.

let arr = [10,20,100,200];
let arrj = arr.join("-");
console.log(arrj);
console.log(typeof(arr));
console.log(typeof(arrj));

- reverse 반대로 돌려준다.

let arr = [10,20,100,200];
arr.reverse();
console.log(arr);

- sort 정렬

let arr = [5,2,10,22,1];
arr.sort();
console.log(arr);

arr.sort(function(a,b){
  return a-b;
});
console.log(arr);

arr.reverse();
console.log(arr);

- push 마지막 추가, pop 마지막 삭제

let arr = [1,10,22,30];
arr.push(100);
arr.push(200);
console.log(arr);
console.log(arr.pop());
console.log(arr);

○ 다차원 배열

배열 요소가 또 다른 배열인 배열을 의미

let arr = new Array(3);
arr[0] = new Array(2);
arr[1] = new Array(3);
arr[2] = new Array(4);
arr[1][0] = 10;
console.log(arr);

■ 1월 16일 - 2일차

■ 함수

○ 함수란?

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미

함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

○ 함수의 정의

함수는 function키워드로 시작하며, 이름, 매개변수(parameter), 실행문으로 구성되어 있다.

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

- 반환

함수에서 실행한 결과를 전달 받던지 특정한 형태를 전달 받을 수 있다.

function add(x,y){
  return x+y;
}
console.log(add(10,20)); //30

- 배열을 반환하는 함수 만들기

function arrcr(x){
  let arr = new Array(x);
  for(let i=0; i<x; i++){
    arr[i] = i;
  }
  return arr;
}
let a = arrcr(10);
console.log(a);

■ 함수

- 전역변수, 지역변수

전역변수 : 전체 지역에서 사용할 수 있다.

지역변수 : 블럭내부에서만 사용가능 하다.

let sum = 10;
function s(x,y){
  let sum = x+y;
  return sum;
}
console.log(s(5,10)); // 15
console.log(sum); // 10

let sum = 10; // 전역변수
function s(x,y){
  sum +=x; // 전역변수에 저장 sum에 x를 더해줘라
  return x+y;
}
console.log(s(1,2)); //3
console.log(sum); //11
console.log(s(2,3)); //5
console.log(sum); //13

- 호이스팅 Hoisting

console.log(s(1,5)); //6
function s(x,y){ //함수는 밑에 있어서 호이스팅 되어 사용할 수 있다.
  let sum =x+y;
  return sum;
}

■ 객체(Object)

○ 객체(Object)

객체는 프로그래밍에서 데이터를 구조화하고 속성과 메서드를 포함할 수 있는 독립된 데이터 구조임

속성이란 키와 값을 가지고 있다. 변수의 값과 유사하며, 메서드는 함수 기능을 의미함

객체는 기본적으로 상태(프로퍼티-속성) 행동(메서드)을 갖는 논리적 개체를 모델링하며

객체 지향 프로그래밍의 핵심개념임

객체는 key: value 형식으로 데이터가 저장되며,

속성에 접근하거나 메서드를 호출해 객체의 상태를 일거나 변경할 수 있다.

이로서 유연하고 동적인 프로그래밍 환경을 가능하게 한다.

객체는 원시 데이터(Number, String, Boolean등)과 달리 복잡한 데이터 구조를 나타내고

프로토타입 기반 상속을 통해 다른 객체로부터 속성과 메서드를 상속할 수 있다.

이로서 재사용성과 확장성을 높여 코드의 효율성을 크게 향상시킨다.

- Object 예시

let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet(); // "Hello, John"

○ 객체 리터럴

객체 리터럴은 중괄호 { } 를 사용하여 직접 객체를 정의 하는 방법임

간단한 객체를 생성할때 매우 유용함

- 예시

let car = {
    brand: "Toyota",
    model: "Camry",
    year: 2021,
    start: function() {
        console.log("The car has started.");
    },
    stop: function() {
        console.log("The car has stopped.");
    }
};

console.log(car.brand); // "Toyota"
car.start(); // "The car has started."

car라는 객체가 정의되어 brand, model, year라는 프로퍼티를 가진다.

객체 리터럴은 JavaScript에서 객체를 생성하는 가장 기본적인 방법임

- 사용되어지는 언어

1. 중괄호 { } 객체의 속성과 메서드를 정의함

2. 키(Key) 값(Value)쌍 : 객체는 여러개의 속성(프로퍼티)을 가질 수 있으며

각 속성은 키와 값의 쌍으로 이루어져 있음 year이 키 이고 2020이 값임

키는 속성의 이름으로 문자열로 표현되며, 다른형태도 가능

값은 키에 대응하는 값으로 어떤 데이터 타입도 될 수 있음

3. 메서드 : 함수도 리터럴 안에 가질수 있고 메서드라고 불린다.

메서드명 : function으로 만들어준다.

4. 쉼표(,) : 각 속성(프로퍼티)과 메서드는 쉼표로 구분됨

마지막 속성 뒤에는 쉼표가 없어도 된다.

- 객체 리터럴의 장점

1. 간결함 : 객체를 생성하는 가장 간단하고 직관적인 방법임.

2. 명확함 : 어떤 속성과 메서드가 포함되는지 한눈에 알 수 있다.

3. 구조화 : 여러 데이터를 한 곳에 모아서 구조적으로 표현가능

○ 계산된 속성이름 (Computed Property Names)

동적으로 속성 이름을 생성할 수 있는 기능이 추가되었음

객체를 생성할 때 속성 이름을 고정된 문자열이 아닌, 변수나 표현식으로 지정할 수 있음

let propName = "model";
let car = {
    brand: "Toyota",
    [propName]: "Camry", // propName이 "model"이므로, car 객체에 model: "Camry"가 추가됩니다.
};

console.log(car.model); // "Camry"

- 대괄호 표기법

계산된 속성 이름을 사용하려면, 속성 이름 자리에 대괄호 []를 사용하여 변수를 감쌈

대괄호 안에는 변수, 숫자, 함수 호출, 수학 연산 등 다양한 표현식이 들어갈 수 있다.

let dynamicKey = "age";
let person = {
    name: "Alice",
    [dynamicKey]: 25 // "age": 25
};

console.log(person.age); // 25

- 표현식 사용

대활호안에 복잡한 표현식을 사용 할 수 있음

let prefix = "user";
let id = 42;

let user = {
    [prefix + id]: "John Doe" // "user42": "John Doe"
};

console.log(user.user42); // "John Doe"

- 함수나 메서드의 결과를 속성이름으로 사용

함수나 메서드의 결과물을 사용할 수 있다.

function generateKey(index) {
    return `key${index}`;
}

let obj = {
    [generateKey(1)]: "value1", // "key1": "value1"
    [generateKey(2)]: "value2"  // "key2": "value2"
};

console.log(obj.key1); // "value1"
console.log(obj.key2); // "value2"

- 탬플릿 리터럴

${}를 이용해 변수나 표현식을 문자열에 쉽게 삽입가능

// 일반적인 문자열 결합
let greeting = "Hello, " + name + "! You are " + age + " years old.";

// 템플릿 리터럴 사용
let greeting = `Hello, ${name}! You are ${age} years old.`;

- 객체 병합

function mergeObjects(key1, value1, key2, value2) {
    return {
        [key1]: value1,
        [key2]: value2
    };
}

let mergedObject = mergeObjects("name", "Alice", "age", 30);

console.log(mergedObject); // { name: "Alice", age: 30 }

○ this키워드

현재 실행 중인 함수가 속한 객체를 참조

let person = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet(); // "Hello, John"

- 생성자 함수에서 This는 새로 생성된 객체를 가리킨다.

function Person(name) {
    this.name = name;
}

let person1 = new Person("Alice");
console.log(person1.name); // "Alice"

○ 프로퍼티 접근 및 수정

객체의 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용하여 접근 및 수정이 가능

- 설명

console.log(car.brand); // "Toyota"
car.year = 2021;
console.log(car["year"]); // 2021

car.brand는 car 객체의 brand 프로퍼티에 접근하고 car.year는 해당 프로퍼티의 값을 수정하는 예제임

점 표기법이 주로 사용되지만 대괄호 표기법은 프로퍼티 이름이 변수로 지정되거나 특수 문자일때 유용함

- 추가와 삭제

car.year = 2021; //추가
delete car.year; //삭제

○ JSON과 객체

JavaScript 객체는 JSON(JavaScript Object Notation) 형식으로 직렬화 될 수 있다.

JSON은 객체 데이터를 문자열로 표현하며, 주로 데이터 전송이나 저장을 위해 사용됨

- 사용예시

let person = {
  name: "Alice",
  age: 25
};

let jsonString = JSON.stringify(person);
console.log(jsonString); // '{"name":"Alice","age":25}'

let parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson.name); // "Alice"

- 설명

JSON.stringify()는 객체를 JSON 문자열로 변환하고,

JSON.parse()는 JSON 문자열을 객체로 변환

JSON은 데이터의 직렬화와 전송을 위한 표준 형식으로 널리 사용

○ 객체의 내장 메서드

JavaScript 객체에는 다양한 내장 메서드가 있음

대표적인 메서드로는 Object.keys(), Object.values(), Object.entries()

등이 있으며, 각각 객체의 키, 값, 키-값 쌍, 객체 복사 등의 작업을 수행

let person = { name: "Alice", age: 25 };

console.log(Object.keys(person)); // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]

○ 객체의 복사

객체를 복사할 때는 얕은 복사와 깊은 복사라는 두 가지 방식이 있다.

얕은 복사는 객체의 최상위 속성만 복사 중첩된 객체는 참조로 복사됨,

- 얕은 복사

얕은 복사는 복사된 객체의 속성이 원본 객체의 속성과 동일한 참조(주소)를

가르키게 되어 복사된 객체의 속성 값이 변경되면 원본 객체의 속성 값도 함께

변경될 수 있다.

let original = { name: "John", address: { city: "New York" } };

// 얕은 복사
let copy = Object.assign({}, original);

// 복사된 객체 수정
copy.name = "Alice";
copy.address.city = "Los Angeles";

console.log(original.name); // "John" (변경되지 않음)
console.log(original.address.city); // "Los Angeles" (변경됨)

- 깊은 복사

객체나 배열을 복사하는데 복사된 객체는 원본 객체와 완전히 독립적이며,

어떤 변경도 서로에게 영향을 미치지 않는다. 모든 중첩된 객체나 배열도 새롭게 생성되어 복사됨

let original = { name: "John", address: { city: "New York" } };

// 깊은 복사
let deepCopy = JSON.parse(JSON.stringify(original));

// 복사된 객체 수정
deepCopy.name = "Alice";
deepCopy.address.city = "Los Angeles";

console.log(original.name); // "John" (변경되지 않음)
console.log(original.address.city); // "New York" (변경되지 않음)

○ 객체의 상속

JavaScript 객체는 프로토타입이라는 숨겨진 속성을 통해

다른 객체로부터 속성과 메서드를 상속받을 수 있다.

모든 객체는 자신의 프로토타입을 가리키는 __proto__라는 속성을 가지며,

이는 객체 상속의 기초임

let animal = {
  eats: true,
  walk: function() {
    console.log("Animal walks");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

console.log(rabbit.eats); // true
rabbit.walk(); // "Animal walks"

- 설명

rabbit 객체는 animal 객체를 프로토타입으로 가지며,

rabbit이 직접 정의하지 않은 프로퍼티와 메서드는

프로토타입 체인을 통해 animal 객체에서 상속됨

■ 선택하기

○ DOM

Document Object Model로 웹 페이지의 콘텐츠 및 구조, 스타일요소를 구조화시켜 표현하여

프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 제공하는 인터페이스

○ ID 선택자

ID명을 HTML 구조에서 검색해 선택해 주는 것

document.getElementById("아이디명");

//예시
document.getElementById("title");

■ 1월 21일 - 3일차

○ 태그 선택

document.getElementsByTagName("태그명");

//예시
document.getElementsByTagName("div");

- div 태그 width 변경하기

console.log(document.getElementsByTagName("div"));
document.getElementsByTagName("div")[0].style.width = "200px";
document.getElementsByTagName("div")[1].style.width = "200px";
document.getElementsByTagName("div")[2].style.width = "200px";

- 반복문 사용

let divtag = document.getElementsByTagName("div");
for(let i of divtag){
  i.style.width = "10px";
}

○ 클래스 선택

document.getElementsByClassName("클래스명");

//예시
document.getElementsByClassName("box");

- 클래스 너비 변경

let cbox = document.getElementsByClassName("box");
cbox[1].style.width = "100px";

○ CSS선택자로 선택

//첫번째 한개선택
document.querySelector("css 선택자");
//여러개 선택
document.querySelectorAll("css 선택자");

//예시
document.querySelector("body > #box2");

- 사용예

let qs = document.querySelector("body > #box2");
document.querySelector("body > .box").style.width = "200px";
qs.style.backgroundColor = "red";
let qbox = document.querySelectorAll(".box");
for(let i of qbox){
  i.style.height = "20px";
}

- Css 변경 다른 예

let qbox = document.querySelectorAll(".box");
for(let i of qbox){
  i.style.cssText = "width: 200px; height: 20px; background-color: aquamarine;"
}

■ 이벤트

○ 이벤트

사용자가 웹페이지와 상호 작용할 때 발생하는 다양한 상황에 대한 반응을 정의하는 것

element.addEventListener('이벤트명', function() {
    // 클릭 시 실행할 코드
});

- 자주 쓰는 이벤트 종류

이벤트명	설명
click	클릭할 때
mouseover	마우스가 특정 객체 위로 올려졌을때
mouseout	마우스가 특정 객체 밖으로 나갔을때
mouseenter	마우스가 특정 객체 안에 들어왔을 때
mouseleave	마우스가 특정 객체에서 떠났을 때
mousedown	마우스를 눌렀을 때
mouseup	마우스를 떼었을 때
scroll	문서에서 스크롤 할때
resize	브라우저 창의 크기가 변경될 때
change	input 요소의 변동이 있을때
focus	초점이 이동했을때
keydown	키를 눌렀을 때
keyup	키를 떼었을 때

- 기본사용하기

<style>
  .box{
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    
  }
</style>
<body>
  <h1 id="title">제목</h1>
  <button id="b1">버튼1</button>
  <button id="b2">버튼2</button>
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>  
  <script>
    let ev1 = document.getElementById("b1");
    let ev2 = document.getElementById("b2");
    let boxcolor = document.getElementById("box1").style.backgroundColor; //이전색 저장
    
    let box = document.getElementsByClassName("box");
    ev1.addEventListener("click",function(){ //색변화
      for(let i of box){
        i.style.backgroundColor = "#ccc";
      }
    });    
    ev2.addEventListener("click",function(){ //이전색으로
      for(let i of box){
        i.style.backgroundColor = boxcolor;
      }
    });
    window.addEventListener("resize",function(){ //브라우저 크기 변경시
      let wiw = window.innerWidth;
      if(wiw>500){
        for(let i of box){
          i.style.backgroundColor = "red";
        }
      }
      else{
        for(let i of box){
          i.style.backgroundColor = boxcolor;
        }
      }
    });  
  </script>
</body>

- 선택창 값 색상변경하기

<style>
  #box{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin-top: 20px;
  }
</style>
<body>
  <h1 id="title">제목</h1>
  <select name="" id="color">
    <option value="">색상 선택</option>
    <option value="#f00">빨강</option>
    <option value="#00f">파랑</option>
    <option value="#ac6f6f">기타</option>
  </select>
  <div id="box"></div>
  <script>
    document.getElementById("color").addEventListener("change",function(){
      
      document.getElementById("box").style.backgroundColor = this.value;
    });
  </script>
</body>

■ Click 이벤트

○ 색상 가져와서 변경과 이전 돌리기

- 색상 가져오기

document.getElementById("아이디명").style.color //tag에 걸려있는 style 값가져옴

getComputedStyle(document.getElementById("아이디명")).color //직접 걸려있는 속성 가져옴

- if문 활용 현재 상태 확인 후 변경하기

<style>
    .box{
        width: 100px;
        height: 100px;
        color: aqua;
        border: 1px solid #000;
    }
</style>
<body>
    <button id="bt1">색</button>
     
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
    <div class="box" id="box3">3</div>
    <script>
        let btn = document.getElementById("bt1"); //버튼 이벤트 확인
        let cbox = document.getElementsByClassName("box"); //클래스로 되어 있는것 선택
        let cboxc = getComputedStyle(cbox[1]).color; //색상 가져오기
        console.log(cboxc);
        console.log(cbox[1].style.color); //tag에 걸려 있는 색상을 가져온다.
        btn.addEventListener("click",function(){
            if(getComputedStyle(cbox[1]).color===cboxc){
                for(let i of cbox){
                    i.style.color = "red";
                }
            }
            else{
                for(let i of cbox){
                    i.style.color = cboxc;
                }
            }            
        });
    </script>
</body>

○ 클래스 추가 삭제

- 클래스 변경

let a = document.getElementById("아이디명"); // 선택
a.classList.add("클래스명"); //클래스 추가
a.classList.remove("클래스명"); //클래스 삭제
a.className = "클래스명"; //클래스 이름이 변경
a.toggle("클래스명"); //클래스명이 있으면 생기고 없으면 삭제

a.classList.conntains("클래스명"); //클래스 이름이 있으면 true, 없으면 false

■ 1월 23일 - 4일차

- 클래스 추가 하기 (지정하지 않은것에 줄 수도 있음)

<style>
    .box{
        width: 100px;
        height: 100px;
        color: aqua;
        border: 1px solid #000;
    }
    .boxc{
        background-color: red;
    }
</style>
<body>
    <button id="bt1">색</button>
     
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
    <div class="box" id="box3">3</div>
    <script>    
        let a = document.getElementById("box1");
        a.classList.add("boxc");
    </script>
</body>

- 클래스 추가 /삭제 다중 동일함

let a = document.getElementById("box1");
a.classList.add("boxc","box");

- 클래스 삭제(이름이 다르면 삭제 안됨)

let a = document.getElementById("box1");
a.classList.remove("box");

- 클래스 이름 변경 (지정하지 않은것에 줄 수도 있음)

let a = document.getElementById("box1");
a.className ="boxc";

- toggle 없으면 추가 있으면 삭제

let a = document.getElementById("box1");
a.classList.toggle("boxc");

- toggle 2개 이상 사용하기

let a = document.getElementById("box1");
a.classList.toggle("boxc");
a.classList.toggle("box");

- 클래스 확인하기

let a = document.getElementById("box1");
console.log(a.classList.contains("box"));
console.log(a.classList.contains("boxc"));

- 클래스 여러개 얻기

<div class="box boxc" id="box1">1</div>
<script>
    let a = document.getElementById("box1");
    console.log(a.classList.item(0)); //box
    console.log(a.classList.item(1)); //boxc
</script>

- 클래스 개수 확인

let a = document.getElementById("box1");
console.log(a.classList.length); //2

- 클래스이름 배열로 얻기

let a = document.getElementById("box1");
console.log(a.classList);
console.log(a.classList[0]);

- toggle활용 클래스 추가 삭제

<style>
    .box{
        width: 100px;
        height: 100px;
        color: aqua;
        border: 1px solid #000;
    }
    .boxc{
        background-color: red;
    }
</style>
<body>
    <button id="bt1">색</button>
     
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
    <div class="box" id="box3">3</div>
    <script>    
        let btn = document.getElementById("bt1");
        let cbox = document.getElementsByClassName("box");
        
        btn.addEventListener("click",function(){
            for(let i of cbox){
                i.classList.toggle("boxc");
            }
        });
    </script>
</body>

■ 스크롤 이동 이벤트

스크롤이 어느정도 움직이면 버튼이 나오고

버튼을 클릭하면 스크롤의 최상위로 이동

○ 기본베이스 설정하기

<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");
  }
});

■ 스크롤 이동 이벤트

스크롤이 어느정도 움직이면 버튼이 나오고

버튼을 클릭하면 스크롤의 최상위로 이동

○ 기본베이스 설정하기

<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>

■ 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>

■ 1월 24일 - 5일차

■ 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));
});

■ 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>

○ hover event

$("선택자").hover(function(){},function(){});
$("선택자").hover(function(){
	//마우스 올렸을때
},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(){
      let cbox = $(".box");
      let bgc = cbox.css("background-color");
      cbox.hover(function(){
        $(this).css("background-color","red");
      },
      function(){
        $(this).css("background-color",bgc);
      });
    });
  </script>
</body>

○ 반복적인 실행

- setInterval

setInterval(실행할 것,시간);

- 연습

<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(){
      
      setInterval(function(){
        $(".box").animate({"width":"300px"},1000,"linear")
        .animate({"width":"50px"},1000,"linear");        
      },2000);
    });
  </script>
</body>

- hover했을때 멈추기

  <script>
    $(function(){
      let boxw;
      function stani(){
        boxw = setInterval(function(){
          $(".box").animate({"width":"100px"},1000,"linear")
          .animate({"width":"50px"},1000,"linear");        
        },2000);
      }
      stani(); //최초 실행
      $(".box").hover(function(){
        clearInterval(boxw);
      },
      function(){
        stani();
      });

    });

  </script>

■ 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>

■ 1월 31일 - 6일차

■ 텍스트 수치 증가

<style>
    .container{
        width: 300px;
        height: 300px;
        border: 1px solid #000;
    }
    .item{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    
</style>
<body>

    <div class="container">
        <div class="item"></div>
        안녕<span>0</span>하세요
    </div>
    
    <script>
        $(function(){
            let c = 0;
            let speed = 10;
            
            let crinter = setInterval(function(){
                if(c >= 300){
                    clearInterval(crinter);
                }
                else{
                    c++;
                    $(".container span").text(c);
                }
            },speed);            
        });
    </script>
</body>

■ 메인 이미지를 다른 이미지로 변경

○ 호버시 src 속성 변경

<style>
    .container{
        width: 300px;
        height: 400px;
    }
    .main-img{
        height: 300px;
    }
    .main-img > img{
        width: 100%;
        height: 100%;
        object-fit: cover;        
    }

    .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">
            <img src="https://picsum.photos/id/50/200/300" alt="">
        </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).hover(function(){
                    let imgsrc = $(this).attr("src");
                    $(".main-img > img").attr("src",imgsrc);
                });
            });
        });
    </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월 4일 - 7일차

■ 탭메뉴

○ 클릭시 바로 변화하기

<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;
    }
    .cont{
        font-size: 60px;
        height: 100%;
    }
    .cont:nth-child(1){
        background-color: aquamarine;
    }
    .cont:nth-child(2){
        background-color: brown;
    }
    .cont:nth-child(3){
        background-color:  blueviolet;
    }
    
</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">콘텐츠1</div>
            <div class="cont">콘텐츠2</div>
            <div class="cont">콘텐츠3</div>
        </div>
    </div>
    
    <script>
        $(function(){
            $(".cont").hide();
            $(".cont").first().show();
            $(".menu").click(function(){
                $(".cont").hide();
                $(".cont").eq($(this).index()).show();
            });
        });
    </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(){
            
            $(".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>

■ 2월 6일 - 8일차

■ 이미지 자동 슬라이드

<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>

○ 찾기 함수를 알면 이로운 점

$(function(){

    $(".hide-con").click(function(e){
        e.stopPropagation(); /*나의 부모로 이벤트 전파 방지*/               
        // if($(this).hasClass("act")){
        //     $(this).removeClass("act");
        // }
        // else{
        //     $(".hide-con").removeClass("act");
        //     $(this).addClass("act");
        // }
        $(this).toggleClass("act");
        $(this).parent().siblings().children(".hide-con").removeClass("act");
    });
    $("body").click(function(){
        $(".hide-con").removeClass("act");                               
    });
});

■ 찾기 함수

○ 기본화면

<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월 7일 - 9일차

■ Swiper

○ Swiper란?

웹에 사용하기 적합한 오픈 소스 JavaScript 라이브러리

반응형 슬라이드 쇼 및 스와이퍼 기능을 쉽게 구현할 수 있음

○ Swiper 기본 세팅 (CDN 활용)

- CDN 개념

Content delivery Network 콘텐츠 전송 네트워크

서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용

- CSS 속성 및 스크립트 추가

<!-- Link Swiper's CSS 스와이퍼에 필요한 CSS 코드-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS 스와이퍼에 필요한 스크립트 코드 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

- Style 속성추가

속성에 대해서 미리 설정을 지정해줌

<style>
    /* 스와이퍼 기본 Css속성 */
    .swiper {
      width: 100%;
      height: 100%;
      border: 1px solid #000;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
	
    /* 이미지는 없으니까 빼도 됨 */
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
</style>

- Swiper 구조 설정

<!-- 스와이퍼가 실행되는 부분 -->
<div class="swiper mySwiper">
    <!-- 스와이퍼를 감싸는 부분 -->
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
  </div>
</div>

- Script로 swiper 사용 객체 만들기

<script>
    // 스와이퍼 객체 만들기
    let swiper = new Swiper(".mySwiper", {});
    // 변수에 저장 새로운 Swiper(대소문자 구분)
    // .클래스 이름을 넣어줌 기본과 달라도 상관은 없음
</script>

○ Swiper 활용

<!-- Link Swiper's CSS 스와이퍼에 필요한 CSS 코드-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS 스와이퍼에 필요한 스크립트 코드 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
    /* 스와이퍼 Css속성 */
    .swiper {
      width: 500px;
      height: 400px;
      overflow: hidden;
    }
    
    .swiper-slide{
      text-align: center;
      font-size: 18px;
      background: red;
      align-content: center;
      border: 1px solid #000;
      box-sizing: border-box;
    }
</style>
<body>
    <!-- 스와이퍼가 실행되는 부분 -->
    <div class="swiper">
        <!-- 스와이퍼를 감싸는 부분 -->
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
      </div>
    </div>
    <script>
        // 스와이퍼 객체 만들기
        let swiper = new Swiper(".swiper", {

        });
    </script>
</body>

○ Swiper 주요 옵션 변경

- 슬라이드 방향 (direction)

horizontal : 수평방향(기본)

vertical : 수직방향

let swiper = new Swiper(".swiper", {
    direction: 'vertical'
});

- 슬라이드 루프 (loop)

true : 마지막 이후 다시 처음으로 돌아가기

false : 마지막에서 종료

구분은 , 찍어줘야함

let swiper = new Swiper(".swiper", {
    direction : "vertical",
    loop : true,
});

- 자동재생 (autoplay)

자동 재생여부 설정

true: 자동재생

false : 종료

delay : 딜레이 시간 (ms)

let swiper = new Swiper(".swiper", {
    direction : "vertical",
    loop : true,
    autoplay : true,
});

딜레이 시간 넣기

let swiper = new Swiper(".swiper", {
    direction : "vertical",
    loop : true,
    autoplay : {
        delay : 200,
    }
});

- 애니메이션 속도 speed

애니메이션이 실행되는 속도(ms)

speed : 5000 (5초) {}중괄호가 끝나도 (,) 콤마는 넣어줘야 함.

let swiper = new Swiper(".swiper", {
    direction : "vertical",
    loop : true,
    autoplay : {
        delay : 1000, //1초마다
    },
    speed : 5000, //5초동안
});

- 한번에 보여지는 슬라이드 수

slidesPerView : 개수 // 이용시 대소문자 구분 필수

let swiper = new Swiper(".swiper", {
    direction : "vertical",
    loop : true,
    autoplay : true,
    slidesPerView : 2,
});

- 한번에 넘어가는 슬라이드 수

SlidesperGroup

let swiper = new Swiper(".swiper", {
    direction : "vertical",
    loop : true,
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
});

- 슬라이드 간격설정

spaceBetween: 30, // 슬라이드 간격 단위px

<script>
    // 스와이퍼 객체 만들기
    let swiper = new Swiper(".swiper", {
        direction : "vertical",
        loop : true,
        autoplay : true,
        slidesPerView : 2,
        slidesPerGroup : 2,
        spaceBetween: 20,
    });
</script>

- 슬라이드 내부 간격은 CSS로 통제

.swiper {
  width: 500px;
  height: 400px;
  overflow: hidden;
  border: 1px solid #000;
  padding: 10px;
}

■ Swiper 연습

○ Swiper 두개 적용

스와이퍼2번째 적용 이름 변경

swiper2

script에서 다시 작성 새로운 변수에 넣고 적용할 클래스명 넣어주기

작동방식 작성

오른쪽 정렬 크기도 설정해보기

<style>
    /* 스와이퍼 Css속성 */
    .swiper {
      width: 500px;
      height: 400px;
      overflow: hidden;
      border: 1px solid #000;
      padding: 10px;
    }
    
    .swiper .swiper-slide{
      text-align: center;
      font-size: 18px;
      background: red;
      align-content: center;
      border: 1px solid #000;
      box-sizing: border-box;
    }
    .swiper2{
        margin-top: 200px;
        width: 300px;
        height: 100px;
        overflow: hidden;
        border: 1px solid #000;
        margin-left: auto; 
        /*왼쪽에 붙이기*/
    }
    .swiper2 .swiper-slide{
        text-align: center;
        background-color: aqua;
        align-content: center;
    }
</style>
<body>
    <!-- 스와이퍼가 실행되는 부분 -->
    <div class="swiper">
        <!-- 스와이퍼를 감싸는 부분 -->
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </div>
      </div>
    </div>

    <div class="swiper2">
        <!-- 스와이퍼를 감싸는 부분 -->
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
        </div>
      </div>
    </div>
    <script>
        // 스와이퍼 객체 만들기
        let swiper = new Swiper(".swiper", {
            direction : "vertical",
            loop : true,
            autoplay : true,
            slidesPerView : 2,
            slidesPerGroup : 2,
            spaceBetween: 20,
        });

        let swiper2 = new Swiper(".swiper2", {
            loop : true,
            autoplay : true,
            slidesPerView : 2,
            slidesPerGroup : 2,
            spaceBetween: 20,
        });
    </script>
</body>

○ Swiper 이미지 넣기

<style>
    /* 스와이퍼 Css속성 */
    .swiper {
      width: 500px;
      height: 400px;
      overflow: hidden;
      border: 1px solid #000;
      padding: 10px;
    }
    
    .swiper .swiper-slide{
      text-align: center;
      align-content: center;
      border: 1px solid #000;
      box-sizing: border-box;
    }
    .swiper .swiper-slide img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

</style>
<body>
    <!-- 스와이퍼가 실행되는 부분 -->
    <div class="swiper">
        <!-- 스와이퍼를 감싸는 부분 -->
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/1/800/200" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/2/800/200" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/3/800/200" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/4/800/200" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/5/800/200" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/6/800/200" alt="">
          </div>
        </div>
      </div>
    </div>

    <script>
        // 스와이퍼 객체 만들기
        let swiper = new Swiper(".swiper", {
            direction : "vertical",
            loop : true,
            autoplay : true,
            slidesPerView : 2,
            slidesPerGroup : 2,
            spaceBetween: 20,
        });

    </script>
</body>

○ 이미지와 글자 같이 넣기

<style>
    /* 스와이퍼 Css속성 */
    .swiper {
      width: 500px;
      height: 400px;
      overflow: hidden;
      border: 1px solid #000;
      padding: 10px;
    }
    
    .swiper .swiper-slide{
      text-align: center;
      align-content: center;
      border: 1px solid #000;
      box-sizing: border-box;
      display: flex;
    }
    .swiper .swiper-slide img{
        width: 70%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    .swiper .swiper-slide .swiper-text{
        width: 30%;
        align-content: center;
    }
    .swiper .swiper-slide .swiper-text p{
        text-align: center;
    }
</style>
<body>
    <!-- 스와이퍼가 실행되는 부분 -->
    <div class="swiper">
        <!-- 스와이퍼를 감싸는 부분 -->
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://picsum.photos/id/1/800/200" alt="">
            <div class="swiper-text">
                <p>제목</p>
                <p>여러가지 내용들</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/2/800/200" alt="">
            <div class="swiper-text">
                <p>제목</p>
                <p>여러가지 내용들</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/3/800/200" alt="">
            <div class="swiper-text">
                <p>제목</p>
                <p>여러가지 내용들</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/4/800/200" alt="">
            <div class="swiper-text">
                <p>제목</p>
                <p>여러가지 내용들</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/5/800/200" alt="">
            <div class="swiper-text">
                <p>제목</p>
                <p>여러가지 내용들</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/6/800/200" alt="">
            <div class="swiper-text">
                <p>제목</p>
                <p>여러가지 내용들</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
        // 스와이퍼 객체 만들기
        let swiper = new Swiper(".swiper", {
            direction : "vertical",
            loop : true,
            autoplay : true,
            slidesPerView : 2,
            slidesPerGroup : 2,
            spaceBetween: 20,
        });

    </script>
</body>

○ 좌우로 변경하기

크기도 조금 작게 조절하기

400 * 300 내부에 이미지 두개씩

<style>
    /* 스와이퍼 Css속성 */
    .swiper {
      width: 400px; /* 크기조절 */
      height: 300px; /* 크기조절 */
      overflow: hidden;
      border: 1px solid #000;
      padding: 10px;
    }
    
    .swiper .swiper-slide{
      text-align: center;
      align-content: center;
      border: 1px solid #000;
      box-sizing: border-box;
      /* display: flex; */ /* flex 삭제 */
    }
    .swiper .swiper-slide img{
        width: 100%; /* 너비 변경 */
        height: 70%; /* 높이 변경 */
        display: block;
        object-fit: cover;
    }
    .swiper .swiper-slide .swiper-text{
        /* width: 30%; */ /* 너비 삭제 */
        height: 30%; /* 높이 지정 */
        align-content: center;
    }
    .swiper .swiper-slide .swiper-text p{
        margin: 5px; /* 마진 수정 */
        text-align: center;
    }
</style>
<body>
    <!-- 스와이퍼가 실행되는 부분 -->
    <div class="swiper">
        <!-- 스와이퍼를 감싸는 부분 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://picsum.photos/id/1/800/200" alt="">
                <div class="swiper-text">
                    <p>제목</p>
                    <p>여러가지 내용들</p>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/id/2/800/200" alt="">
                <div class="swiper-text">
                    <p>제목</p>
                    <p>여러가지 내용들</p>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/id/3/800/200" alt="">
                <div class="swiper-text">
                    <p>제목</p>
                    <p>여러가지 내용들</p>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/id/4/800/200" alt="">
                <div class="swiper-text">
                    <p>제목</p>
                    <p>여러가지 내용들</p>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/id/5/800/200" alt="">
                <div class="swiper-text">
                    <p>제목</p>
                    <p>여러가지 내용들</p>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://picsum.photos/id/6/800/200" alt="">
                <div class="swiper-text">
                    <p>제목</p>
                    <p>여러가지 내용들</p>
                </div>
            </div>
    	</div>
    </div>
    
    <script>
        // 스와이퍼 객체 만들기
        let swiper = new Swiper(".swiper", {
            // direction : "vertical",  방향 조절
            loop : true,
            autoplay : true,
            slidesPerView : 2,
            slidesPerGroup : 2,
            spaceBetween: 20,
        });

    </script>
</body>

■ Swiper 버튼 및 슬라이드

○ 페이지 버튼

pagination

false 페이징 끔

true 페이지 켬

type 페이지 종류

(bullets, fraction, progressbar, custom)

- HTML

<div class="swiper">
    <div class="swiper-wrapper">
		<!--슬라이드 부분-->
    </div>
    <!--wrapper 밑에 설정 -->
    <div class="swiper-pagination"></div>
</div>

- Script

let swiper = new Swiper(".swiper", {
    loop : true,
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
    },
});

- 밖에 내가 원하는 곳에 배치

.swp{
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center; 
}

<div class="swp"></div>
// swiper 밖에 설정 이름 설정  overflow: hidden으로 안보임

let swiper = new Swiper(".swiper", {
    loop : true,
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    pagination: {
        el: '.swp', //이름 다른 이름이어도 상관은 없음 대신 배치를 알아서 해야함
        type: 'bullets',
        clickable : true, // bullets을 클릭하면 이동
    },
});

○ 이전 다음 버튼 설정

navigation

nextEl : 다음버튼 선택

prevEl : 이전버튼 선택

- HTML

<div class="swiper">
    <div class="swiper-wrapper">
		<!--슬라이드 부분-->
    </div>
    <!--wrapper 밑에 설정 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

- Script

let swiper = new Swiper(".swiper", {
    loop : true,
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

- 슬라이드 처음과 끝에 투명해지게 하기

슬라이드 누르면 사라지게 하기

let swiper = new Swiper(".swiper", {
    loop : false, // 루프 중지
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    watchOverflow: true, //처음과 끝 숨기기
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        hideOnClick: true, //슬라이드를 누르면 숨기기
    },
});

- 버튼 밖으로 변경

<div class="button">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.button{
    width: 500px; /* 너비지정 */
    height: 100px;
    display: flex;
    justify-content: space-between;

    position: absolute; /* 위치 지정 */
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
}
.button > div{
    position: relative; /* 내부 요소가 absolute로 되어 있어서 수정 */
}

- 다른이름으로 다른 형태를 넣어서 링크

<div class="button">
    <div class="a"></div>
    <div class="b"></div>
</div>

let swiper = new Swiper(".swiper", {
    loop : false, // 루프 중지
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    watchOverflow: true, //처음과 끝
    navigation: {
        nextEl: '.a', //클래스명 이름
        prevEl: '.b', //클래스명 이름
        hideOnClick: true, //슬라이드를 누르면 숨기기
    },
});

.button > div{
    width: 30px;
    height: 30px;
    background-color: red;
}

- disabledClass 비활성화 되었을때 클래스 이름

'swiper-button-disabled' 기본값

let swiper = new Swiper(".swiper", {
    loop : false, // 루프 중지
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    watchOverflow: true, //처음과 끝
    navigation: {
        nextEl: '.a',
        prevEl: '.b',
        hideOnClick: true, //슬라이드를 누르면 숨기기
        disabledClass: 'c', //비활성화시 클래스명
    },
});

.button > .c{ // c라는 클래스 일때 변동값 넣어주기
    background-color: aqua;
}

- hiddenClass 숨겨질때 클래스 이름

'swiper-button-hidden'

○ 스크롤바

scrollbar

<!--스와이퍼 안에 레퍼 밖에 id설정은 높이수정하려면-->
<div class="swiper-scrollbar" id="ss"></div>

#ss{
    background-color: aqua;
    height: 10px;
}
.swiper-scrollbar-drag{
    background-color: blue;
}

let swiper = new Swiper(".swiper", {
    loop : true,
    autoplay : true,
    slidesPerView : 2,
    slidesPerGroup : 2,
    spaceBetween: 20,
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true, // 드래그 되기
        hide: true, // 미사용시 숨김
        dragSize: '50px', //너비
    }
});

○ effect 슬라이드 효과

slide: 기본 슬라이드 효과 (기본값)
fade: 페이드 효과
cube: 큐브 효과
coverflow: 커버플로우 효과
flip: 플립 효과

let swiper = new Swiper(".swiper", {
    loop : true,
    autoplay : true,
    effect : 'flip', 

});

■ 2월 11일 - 10일차

■ 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, //화살표
});

■ GSAP

○ GSAP 이란?

GreenSock Animation Platfrom 은 인터랙티브 웹을 위한 요소로

화려한 애니메이션과 스크롤 이벤트를 쉽게 구현할 수 있도록 도와주는

타임라인 기반의 JS 라이브러리임

○ CDN 세팅

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

■ GSAP 기초

○ 기본 메서드

- gsap.to()

움직임의 끝나는 점을 지정하는 애니메이션

원래 위치에서 해당 위치로 변경한다.

gsap.to("대상",{속성:값, 속성:값},딜레이);

gsap.to(".box1",{x:200, duration:2},3);
// 클래스가 .box1인 대상을 x축으로 200으로 2초간 이동해줘 3초이후에

- gsap.from()

애니메이션이 지정된 속성에서 시작하여

현재 속성으로 이동

gsap.from(".box", { duration: 2, x: -100, opacity: 0 });

- gsap.fromTo()

요소의 시작과 끝을 모두 지정

gsap.fromTo(".box", { x: 0, opacity: 0 }, { duration: 2, x: 100, opacity: 1 });

- gsap.timeline()

여러 애니메이션을 시퀀스(단계별)로 관리

const tl = gsap.timeline();
tl.to(".box", { duration: 1, x: 100 })
  .to(".box", { duration: 1, rotation: 360 });

- gsap.kill()

지정된 애니메이션을 중지 하거나 제거

const tween = gsap.to(".box", { x: 100 });
gsap.kill(tween);

- gsap.play() / pause() / resume() / reverse() / restart()

애니메이션의 재생, 일시정지, 재개, 역방향 재생, 다시 시작 등을 제어하는 메서드

const tween = gsap.to(".box", { duration: 2, x: 100 });
tween.pause();  // 애니메이션 일시정지
tween.resume(); // 애니메이션 재개
tween.reverse(); // 애니메이션 역방향 실행
tween.restart(); // 애니메이션 처음부터 다시 시작

- 간단한 예시

<style>
    .cont{
        height: 500px;
        font-size: 80px;
        text-align: center;
        align-content: center;
        border: 1px solid #000;        
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
    }
</style>
<body>

    <div class="cont">
        content1
    </div>
    <div class="cont">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="cont">
        content3
    </div>
    
    
    <script>
        gsap.to(".box1",{x:200, duration:2},2);
        gsap.to(".box2",{x:200, duration:2},3);
    </script>
</body>

○ 자주사용하는 속성

- duration (지속시간) 초단위 지정

- delay (지연시간) 초단위 지정

- ease (이징) 애니메이션의 가속도와 감속도를 제어하여 움직임 설정 " " 사이에 작성

linear (선형)	일정한 속도로 진행
power1 ~ power4	애니메이션 속도를 조절하는데 사용, 숫자가 크면 가속도및 감속이 급격 .in : 천천히 시작한 후 가속 .out : 빠르게 시작하여 천천히 멈춤 .inOut : 천천히 시작하여 중간에 가속되고 다시 천천히 멈춤
bounce (탄성)	애니메이션이 끝날 때 물리적 탄성효과 .in : 튕기며 시작 .out : 튕기며 끝남 .inOut : 시작과 끝 모두 튕김
back (당기는효과)	살짝 반대로 당기는 듯한 효과를 줌 .in : 당긴 후 앞으로 .out : 종료 후 약간 당김 .inOut : 시작과 종류 모두 당김
expo (지수적 가속)	점점 가속되거나 점점 감속 .in : 천천히 시작하여 매우 빠르게 가속 .out : 빠르게 시작하여 천천히 감속 .inOut : 부드럽게 시작 끝나는 가속 감속 효과
steps(x)	x에 숫자값을 넣어서 사용 ease : "steps(5)" // 5단계로 끊어서

- x, y (픽셀값) 요소를 이동시킴

transform: translate(x, y);
기본값이 있으면 +=하면 그만큼 더 이동

gsap.to(".box", {
  duration: 2,
  x: 100, // 요소를 좌측에서 100px로 이동 (현재 위치와 상관없이 100px 지점으로)
  y: 50   // 요소를 상단에서 50px로 이동
});

gsap.to(".box", {
  duration: 2,
  x: "+=100", // 현재 위치에서 100px 더 이동
  y: "-=50"  // 현재 위치에서 50px 위로 이동
});

- opacity (투명도) 투명있게 변경 0~1

- scale (배율) 크기를 배율로조정

- rotation (회전) 도 단위로 지정 360 한바퀴 회전

- repeat (반복횟수) 1넣으면 기본1회 + 1회 (-1) 무한 반복

- repeatDelay(반복 지연시간) 반복하는 사이의 지연

- yoyo (왕복) (true) 왕복해줌 repeat 을 1넣으면 다시돌아옴

- stagger (격차) 여러 요소에 넣었을때 지연 시간을 두어 순차적으로 애니메이션이 시작됨

- transformOrigin (변형기준점) : 50% 50% 요소의 특정 곳을 기준으로 변형

- backgroundColor : "red" or #ff00ff 등으로 넣어줌

- keyframes(단계지정)

gsap.to(".box", {
  duration: 3, // 전체 애니메이션 지속 시간 3초
  keyframes: [
    { x: 100 },  // 0 ~ 0.75초 동안 x: 100으로 이동
    { y: 100 },  // 0.75 ~ 1.5초 동안 y: 100으로 이동
    { rotation: 180 }, // 1.5 ~ 2.25초 동안 회전
    { scale: 1.5 }     // 2.25 ~ 3초 동안 크기 조정
  ]
});

■ ScrollTrigger

○ ScrollTrigger

스크롤에 따라서 애니메이션 실행 여부를 설정해준다.

○ CDN 세팅

<!--gsap-->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<!--스크롤 트리거-->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

○ 기본사용법

- 기본 세팅

<style>
    .cont{
        height: 150vh;
        font-size: 80px;
        text-align: center;
        border: 1px solid #000;        
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

</style>
<body>

    <div class="cont">
        content1
    </div>
    <div class="cont" id="cont-tr">
        <div class="box"></div>
    </div>
    <div class="cont">
        content3
    </div>
    
    
    <script>
        
    </script>
</body>

- 기본 사용

gsap.to(".box",{
    scrollTrigger: {
        trigger:"#cont-tr",
        markers: true,
        start:"top 50%",              
    },
    x:400,
});

trigger : "요소" 요소가 화면에 보여지면 애니메이션이 시작함.

markers : true //디버깅 용도로 시작과 종료를 표시함

start : "시작점" top 50% or top 100 // 트리거 요소 상단이 뷰포트 상단 50% or 100px

end : "종료점" 종료되는 형태

scrub : true // 스크롤 위치에 따라 애니메이션이 재생됨

- scrub 사용

박스를 기준점으로 top이 화면의 50%일때 시작

바닥이 화면의 30% 일때 종료

gsap.to(".box",{
    scrollTrigger: {
        trigger:".box",
        markers: true,
        start:"top 50%",
        end: "bottom 30%",
        scrub: true,
    },
    x:400,
});

이벤트 시작

이벤트 종료

- pin 요소고정

gsap.to(".box",{
    scrollTrigger: {
        trigger:".box",
        markers: true,
        start:"top 50%",
        end: "bottom 30%",
        scrub: true,
        pin : true,
    },
    backgroundColor : "red",
});

박스가 보이면 박스에서 색변경

시작

화면에 고정되며 이동

고정 종료 / 애니메이션 종료

- timeline과 활용

let tl = gsap.timeline({
    scrollTrigger: {
        trigger:".box",
        markers: true,
        start:"top 50%",
        end: "bottom 30%",
        scrub: true,
        pin : true,
    },
});
tl.to(".box", { x: 200 }).to(".box", { rotation: 360 });

○ 활용1 - 스크롤에 따라 이미지 옆으로 돌리기

<style>
    .cont{
        height: 150vh;
        font-size: 80px;
        text-align: center;
        border: 1px solid #000;        
    }
    .box{
        width: 600px;
        height: 300px;
        overflow: hidden;
        border: 1px solid #000;
    }
    .s-box{
        width: 200%;
        height: 300px;
        display: flex;
    }
    .s-box > img{
        width: 50%;
        height: 300px;
    }

</style>
<body>

    <div class="cont">
        content1
    </div>
    <div class="cont" id="cont-tr">
        <div class="box">
            <div class="s-box">
                <img src="https://picsum.photos/id/237/600/300" alt="">
                <img src="https://picsum.photos/id/100/600/300" alt="">
            </div>            
        </div>
    </div>
    <div class="cont">
        content3
    </div>
</body>

- 이미지의 너비를 확인해서 "600px" 인데 -로 600px 이동 "-"+"600px" == "-600px"

let bi = getComputedStyle(document.querySelector(".s-box > img")).width;
let tl = gsap.timeline({
    scrollTrigger: {
        trigger:".box",
        markers: true,
        start:"top 60%",
        end: "top 30%",
        scrub: true,
    },
});
tl.to(".s-box", { x: "-"+bi});

○ 위로 넘어가기

.s-box{
    /* flex 해제 높이 100%*/
    height: 200%; 
}
.s-box > img{
    /* 크기 조절 박스로 변경*/
    display: block;
    width: 100%;
    height: 300px;
}

let bi = getComputedStyle(document.querySelector(".s-box > img")).height; //높이 변경
let tl = gsap.timeline({
    scrollTrigger: {
        trigger:".box",
        markers: true,
        start:"top 60%",
        end: "top 30%",
        scrub: true,
    },
});
tl.to(".s-box", { y: "-"+bi}); //y축변경

○ toggleActions

ScrollTrigger가 트리거될 때 애니메이션이 어떻게 반응할지 네 가지 상태로 정의할 수 있는 옵션

toggleActions : "onEnter onLeave onEnterBack onLeaveBack"

onEnter: 트리거 영역에 진입할 때 실행할 동작.
onLeave: 트리거 영역에서 벗어날 때 실행할 동작.
onEnterBack: 트리거 영역에 뒤로(역방향) 진입할 때 실행할 동작.
onLeaveBack: 트리거 영역에서 뒤로(역방향) 벗어날 때 실행할 동작.

- 가능한 동작

"play": 애니메이션을 재생
"pause": 애니메이션을 일시정지
"resume": 일시정지된 애니메이션을 재개
"reverse": 애니메이션을 역방향으로 재생
"restart": 애니메이션을 처음부터 다시 시작
"reset": 애니메이션을 초기 상태로 되돌리고 정지
"complete": 애니메이션을 끝까지 진행
"none": 아무 동작도 하지 않음

예시

<style>
    .cont{
        height: 150vh;
        border: 1px solid #000;
    }
    .cont2 {
        height: 400px;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>
<body>
    <div class="cont"></div>   
    <div class="cont cont2">
        <div class="box"></div>
    </div>   
    <div class="cont"></div>   

    <script>
        gsap.to(".box", {
            scrollTrigger: {
                trigger: ".cont2",
                start: "top center",
                end: "bottom center",
                toggleActions: "play pause reverse reset",
                // 들어올때 시작 나갈때 정지 아래서 들어올때 반대로 나갈때 초기화
                markers:true,
            },
            x: 200,
            duration: 2,
        });
    </script>
</body>

○ toggleClass

스크롤 위치에 따라 특정 클래스(class)를 요소에 추가하거나 제거할 수 있다.

toggleClass: {targets: 요소, className: "클래스명"}

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    transition: all 2s;
}
.act{
    background-color: red;
}

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".cont2",
        start: "top center",
        end: "bottom 60%",
        markers:true,
        toggleClass : {
            targets : ".box",
            className : "act",
        }
    },
});

■ AOS( Animate On Scroll)

○ CDN

- JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

- CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

- 실행문

<script>
  AOS.init();
</script>

○ 주요 옵션

- data-aos : 적용할 애니메이션의 종류를 설정

data-aos="fade-up" : 요소가 위로 페이드 인됩니다.
data-aos="zoom-in" : 요소가 확대되며 나타납니다.
data-aos="slide-right" : 요소가 오른쪽에서 왼쪽으로 슬라이드됩니다.
data-aos="flip-left" : 요소가 왼쪽에서 오른쪽으로 회전하면서 나타납니다.

fade / fade-up / fade-down / fade-left / fade-right
flip-left / flip-right / flip-up / flip-down
slide-up / slide-down / slide-left / slide-right
zoom-in / zoom-out
flip (기본 회전)

- data-aos-duration : 애메이션의 지속 시간을 설정 (ms)

data-aos-duration="1000" : 애니메이션이 1초 동안 지속됩니다.

- data-aos-delay : 애니메이션이 시작되기 전에 지연 시간을 설정하는 속성 (ms)

data-aos-delay="500" : 애니메이션 시작 전 0.5초의 지연 시간이 발생합니다.

- data-aos-offset : 요소가 스크롤될 때 애니메이션을 시작하는 화면의 거리(스크롤 위치)를 설정 (px)

data-aos-offset="200" : 요소가 화면의 200px 만큼 스크롤된 후 애니메이션이 시작됩니다.

- data-aos-easing : 애니메이션의 속도 곡선을 설정합니다. 즉, 애니메이션이 어떻게 가속되고 감속할지를 정의

ease : 기본 속도
linear : 일정한 속도로 이동
ease-in : 시작 시 천천히 가속
ease-out : 끝날 때 천천히 감속
ease-in-out : 시작과 끝 모두 천천히 가속/감속

data-aos-easing="ease-in" : 시작 부분에서 가속됩니다.

- data-aos-once : 애니메이션을 한 번만 실행할지 반복할지를 설정

true : 스크롤할 때 요소가 화면에 나타나면 애니메이션을 한 번만 실행합니다.
false : 스크롤할 때마다 요소가 화면에 나타날 때마다 애니메이션이 반복 실행됩니다.

data-aos-once="true" : 애니메이션이 한 번만 실행

- data-aos-anchor : 애니메이션을 시작할 기준이 되는 요소를 설정

data-aos-anchor="#myAnchor" : id="myAnchor"인 요소가 화면에 들어올 때 애니메이션이 시작

- data-aos-anchor-placement : 설정한 기준 요소가 화면에 어디에 위치할 때 애니메이션을 시작할지를 설정

top-bottom : 기준 요소의 상단이 화면의 하단에 닿을 때 (기본값)
top-center : 기준 요소의 상단이 화면의 중앙에 닿을 때
top-top : 기준 요소의 상단이 화면의 상단에 닿을 때
bottom-top : 기준 요소의 하단이 화면의 상단에 닿을 때

- data-aos-mirror : 애니메이션이 한 번만 실행될지, 스크롤할 때마다 반복

false : 한 번만 실행
true : 스크롤할 때마다 반복 실행됩니다.

data-aos-mirror="true"

○ 전체 초기값 변경하기

AOS.init({
  duration: 1200,  // 애니메이션 속도 (기본값: 400ms)
  offset: 200,     // 실행 시점 (기본값: 120px)
  easing: 'ease-in-out', // 애니메이션 속도 곡선
  mirror: true,    // 반복 여부
  once: false,     // 한 번만 실행할지 여부
  anchorPlacement: "bottom-bottom", // 모든 요소의 애니메이션 실행 기준 변경
});

○ 연습하기

<style>
    body {
        margin: 0;
        padding: 0;
        text-align: center;
        background: linear-gradient(to right, #ff9a9e, #fad0c4);
    }
    .up{
        height: 120vh;
        border: 1px solid #000;
    }
    .section {
        padding: 100px 20px;
        color: white;
        display: flex;
        justify-content: center;
        gap: 30px;
    }
    .title {
        font-size: 40px;
        font-weight: bold;
    }
    .content {
        font-size: 24px;
        margin-top: 20px;
    }
    .box {
        display: inline-block;
        width: 250px;
        height: 250px;
        background: white;
        color: black;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        align-content: center;
        border-radius: 20px;
    }
    .box.a{
        transform: translateX(-1000px); /* 최초위치 설정 */
        
    }
</style>

<body>
    <div class="up"></div>
    
    <div class="section">
        <div class="box" data-aos="flip-left" data-aos-duration="1000">Flip Left</div>
        <div class="box" data-aos="flip-right" data-aos-duration="1000">Flip Right</div>
    </div>

    <div class="section">
        <div class="box" data-aos="zoom-in">Zoom In</div>
        <div class="box" data-aos="zoom-out">Zoom Out</div>
    </div>
    <div class="section">
        <div class="box a" data-aos="fade-right" data-aos-anchor-placement="bottom-bottom" data-aos-duration="1000">fade-right</div>
        <div class="box" data-aos="fade-left">fade-right</div>
    </div>

    <div class="up"></div>
    <script>
        AOS.init({
                offset : 400,               
                //anchorPlacement: "bottom-bottom", // 모든 요소의 애니메이션 실행 기준 변경
            }            
        );
    </script>
</body>

○ 연습하기 2

<style>
    /* 기본 스타일 */
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
        background: linear-gradient(to right, #ff9a9e, #fad0c4);
        overflow-x: hidden;
    }

    /* 헤더 스타일 */
    .header {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    }

    .header h1 {
        font-size: 50px;
        margin-bottom: 20px;
    }

    .header p {
        font-size: 22px;
        max-width: 600px;
    }

    /* 섹션 스타일 */
    .section {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 50px 20px;
        color: white;
    }
    .section h2{
        font-size: 40px;
    }
    .contents {
        width: 80%;
        display: flex;
        justify-content: space-around;
    }

    .contents-box {
        width: 300px;
        height: 250px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        text-align: center;
        align-content: center;
        color: black;
        font-size: 22px;
        font-weight: bold;
        margin: 20px;
    }

    /* CTA 스타일 */
    .cta {
        padding: 50px 20px;
        text-align: center;
        background: #ff6b6b;
    }

    .cta h2 {
        font-size: 36px;
        margin-bottom: 20px;
        color: white;
    }

    .cta button {
        padding: 15px 30px;
        font-size: 18px;
        border: none;
        background: white;
        color: #ff6b6b;
        border-radius: 10px;
        cursor: pointer;
        font-weight: bold;
        transition: transform 0.3s;
    }

    .cta button:hover {
        transform: scale(1.1);
    }
    .down{
        height: 500px;
    }
</style>

<body>

    <!-- 헤더 섹션 -->
    <div class="header">
        <h1 data-aos="fade-down">AOS 애니메이션 웹사이트</h1>
        <p data-aos="fade-up" data-aos-delay="500">
            스크롤하면서 애니메이션 효과를 확인해보세요!  
            부드러운 움직임이 자연스럽게 적용됩니다.
        </p>
    </div>

    <!-- 기능 소개 섹션 -->
    <div class="section">
        <h2 data-aos="fade-up"> 우리의 기능 </h2>
        <div class="contents">
            <div class="contents-box" data-aos="fade-left">창의적인 디자인</div>
            <div class="contents-box" data-aos="fade-up">빠른 속도</div>
            <div class="contents-box" data-aos="fade-right">유니크한 스타일</div>
        </div>
    </div>

    <!-- 추가 기능 섹션 -->
    <div class="section">
        <h2 data-aos="zoom-in">더 많은 기능!</h2>
        <div class="contents">
            <div class="contents-box" data-aos="flip-left">모바일 최적화</div>
            <div class="contents-box" data-aos="flip-up">보안 강화</div>
            <div class="contents-box" data-aos="flip-right">다양한 애니메이션</div>
        </div>
    </div>
    <!-- CTA 섹션 -->
    <div class="cta" data-aos="fade-up">
        <h2>지금 바로 체험해보세요!</h2>
        <button>무료 체험하기</button>
    </div>
    <div class="down"></div>


    <script>
        AOS.init({
            offset: 200, // 요소가 화면에 200px 아래로 스크롤되면 실행
            duration: 1200, // 애니메이션 속도 1.2초
            easing: "ease-in-out", // 부드러운 애니메이션 효과
            anchorPlacement: "bottom-bottom", // 요소의 하단이 뷰포트 하단에 닿을 때 실행
        });
    </script>

</body>

'Web 수업자료 > Web 정규' 카테고리의 다른 글

Web 1 25-02 (1)	2025.02.27
웹 디자인 1 25-02 (0)	2025.02.13
Web 3 24-12 (19시) (0)	2024.12.10
Web 3 24-12 (0)	2024.12.10
UX/UI 디자인 24-11 (7)	2024.11.16

현재글Web 4 25-01