https://naver.me/xl0eJ1vm
■ 9월 11일 - 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 : 비어있음
- undefined : 값이 정의 되어 있지 않음
- Number : 정수 형 또는 실수형
- 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보다 큽니다.");
}
■ 9월 16일 - 2일차
- 삼항연산자
간단히 표현할수 있도록 한 내용
표현식 ? 반환값1 : 반환값2let 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
■ 9월 18일 - 3일차
■ 배열
○ 배열이란?
배열(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);
○ 태그 선택
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";
}
■ 9월 19일 - 4일차
○ 클래스 선택
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>
■ 9월 23일 - 5일차
■ 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.classList.toggle("클래스명"); //클래스명이 없으면 생기고 있으면 삭제
a.classList.contains("클래스명"); //클래스 이름이 있으면 true, 없으면 false
- 클래스 추가 하기 (지정하지 않은것에 줄 수도 있음)
<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");
■ 스크롤 이동 이벤트
스크롤이 어느정도 움직이면 버튼이 나오고
버튼을 클릭하면 스크롤의 최상위로 이동
○ 기본베이스 설정하기
<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);
}
//반복하기
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>
■ 9월 25일 - 6일차
forEach()
forEach()는 배열 또는 NodeList의 각 항목에 대해 반복 실행되는 메서드입니다.
forEach(callback) 형태로 사용되며, 각 항목마다 콜백 함수가 자동 실행됩니다.
items.forEach((item, index) => {
console.log(index, item);
});
화살표 함수
// 기존 방식
items.forEach(function(item, index) {
console.log(index, item);
});
// 화살표 함수 방식 (권장)
items.forEach((item, index) => {
console.log(index, item);
});
인덱스 번호 확인
<script>
const items = document.querySelectorAll(".my-item");
items.forEach((item, index) => {
item.addEventListener("click", () => {
items.forEach(el => el.classList.remove("active")); // 모두 비활성화
item.classList.add("active"); // 현재만 활성화
console.log(`선택된 인덱스: ${index}`);
});
});
</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>
■ 9월 26일 - 보강
■ 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>
■ 9월 30일 - 7일차
○ 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>
- 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>
■ 메인 이미지를 다른 이미지로 변경
○ 호버시 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>
■ 탭메뉴
○ 클릭시 바로 변화하기
<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>
■ 10월 2일 - 8일차
■ 이미지 자동 슬라이드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
body{
margin: 0;
}
.con{
width: 300px; height: 300px;
margin: 0 auto;
position: relative;
--a : 5;
}
.img{
width: 100%; height: 100%; overflow: hidden;
}
.img-box{
width: calc(var(--a)*100%); height: 100%;
display: flex; position: relative;
transition: 1s linear; left: 0;
}
.img-box img{
width: calc(100% / var(--a));
object-fit: cover;
}
.bt-box{
width: 130%;
display: flex; justify-content: space-between;
position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.bt-box > div{
width: 50px; height: 40px; background-color: black;
color: #fff; text-align: center; align-content: center;
cursor: pointer;
}
.bt-box > div.hide{
opacity: 0.2;
}
</style>
</head>
<body>
<div class="con">
<div class="img">
<div class="img-box">
<img src="im1.jpg" alt="">
<img src="im2.jpg" alt="">
<img src="im3.jpg" alt="">
<img src="im4.jpg" alt="">
<img src="im5.jpg" alt="">
</div>
</div>
<div class="bt-box">
<div class="prev hide">이전</div>
<div class="next">다음</div>
</div>
</div>
<script>
$(function(){
let imgc = $(".img-box > img").length;
let imgboxw = $(".img-box").innerWidth() / imgc;
let box = $(".img-box");
let next = $(".next");
let prev = $(".prev");
let i = 0;
next.click(function(){
if(i < imgc-1){
i++;
box.css("left",-imgboxw * i);
}
if(i == imgc-1){
next.addClass("hide");
}
if(i == 1){
prev.removeClass("hide");
}
});
prev.click(function(){
if(i>0){
i--;
box.css("left",-imgboxw * i);
}
if(i==0){
prev.addClass("hide");
}
if(i== imgc-2){
next.removeClass("hide");
}
});
});
</script>
</body>
</html>
<script>
$(function(){
let imgc = $(".img-box > img").length;
let imgboxw = $(".img-box").innerWidth() / imgc;
let box = $(".img-box");
let i = 0;
setInterval(()=>{
i++;
box.css("left",-imgboxw*i);
if(i == imgc){
box.css({"left":0,"transition":"0s"});
setTimeout(()=>{
box.css({"transition":"1s linear"});
i = 1;
box.css("left",-imgboxw*i);
},100);
}
},2000);
});
</script>
■ 찾기 함수
○ 기본화면
<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");
});
○ 이벤트 전파방지
$(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");
});
});
■ 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>
■ 10월 10일 - 9일차
○ 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',
});
■ 10월 14일 - 10일차
■ 스와이퍼 화면 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<style>
.swiper{
width: 500px;
height: 500px;
}
.swiper-slide{
align-content: center;
text-align: center;
background-color: red;
box-sizing: border-box;
border: 1px solid #000;
opacity: 0.6;
scale: 0.8;
}
.swiper-slide.swiper-slide-active{
opacity: 1;
scale: 1;
}
.button-box{
width: 800px;
height: 200px;
display: flex;
justify-content: space-between;
}
.button{
width: 50px;
height: 50px;
background-color: blue;
align-content: center;
text-align: center;
opacity: 0.4;
cursor: pointer;
}
.button.act{
opacity: 1;
}
</style>
</head>
<body>
<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 class="button-box">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
</div>
</body>
<script>
swiper = new Swiper(".mySwiper", {
slidesPerView : 3,
spaceBetween : 20,
loop: true,
// centeredSlides: true, 가운데
on:{
slideChange: function(){//슬라이더가 변경되었을때
//인덱스 번호를 받아서
$(".button").eq(this.realIndex).addClass("act")
.siblings().removeClass("act");
}
}
});
$(".button").click(function(){//슬라이드 이동, 속도
swiper.slideToLoop($(this).index(), 600);
});
</script>
</html>
■ 화면에 따라 개수 변경
const swiper = new Swiper(".mySwiper", {
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
type: "progressbar",
},
breakpoints: {
// 화면 너비가 320px 이상일 때
320: {
slidesPerView: 1,
},
// 화면 너비가 640px 이상일 때
640: {
slidesPerView: 2,
},
// 화면 너비가 1024px 이상일 때
1024: {
slidesPerView: 3,
},
// 화면 너비가 1440px 이상일 때
1440: {
slidesPerView: 4,
},
},
});
■ 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 정규' 카테고리의 다른 글
| 웹디자인 2 25-10 (0) | 2025.10.25 |
|---|---|
| 웹디자인 1 25-09 (0) | 2025.09.20 |
| UIUX 디자인 24-08 (4) | 2025.08.23 |
| Web 3 25-08 (4) | 2025.08.12 |
| 웹디자인 2 25-08 (0) | 2025.08.12 |