■ 9월 10일 - 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);
■ 9월 12일 - 2일차
○ 참조형 타입
- 함수, 객체, 배열등이 있다.
- 객체(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 : 반환값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
- 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);
■ 함수
○ 함수란?
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미
함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
○ 함수의 정의
함수는 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);
■ 9월 19일 - 3일차
■ 함수
- 전역변수, 지역변수
전역변수 : 전체 지역에서 사용할 수 있다.
지역변수 : 블럭내부에서만 사용가능 하다.
let sum = 10;
function s(x,y){
let sum = x+y;
return sum;
}
console.log(s(5,10)); // 15
console.log(sum); // 10let 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"]); // 2021car.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 객체에서 상속됨
■ 9월 20일 - 4일차
■ 선택하기
○ DOM
Document Object Model로 웹 페이지의 콘텐츠 및 구조, 스타일요소를 구조화시켜 표현하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 제공하는 인터페이스
○ ID 선택자
ID명을 HTML 구조에서 검색해 선택해 주는 것
document.getElementById("아이디명");
//예시
document.getElementById("title");
- 사용해서 css style 조절하기
<style>
.box{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<body>
<h1 id="title">제목</h1>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<script>
document.getElementById("title").style.backgroundColor="blue";
document.getElementById("box1").style.backgroundColor="#ff0";
document.getElementById("box2").style.width="200px";
document.write(document.getElementById("title").style.backgroundColor);
</script>
</body>
○ 태그 선택
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
■ 9월 24일 - 5일차
- 클래스 추가 하기 (지정하지 않은것에 줄 수도 있음)
<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");
}
});
■ 9월 26일 - 6일차
■ 스크롤 이동 이벤트
스크롤이 어느정도 움직이면 버튼이 나오고
버튼을 클릭하면 스크롤의 최상위로 이동
○ 기본베이스 설정하기
<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>
■ 10월 1일 - 7일차
■ JavaScript Animation
○ Animation 설정방법
element.animate(keyframes, options)
요소.animate(속성,옵션)
○ 적용
<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con1 = document.getElementById("cont1");
let con2 = document.getElementById("cont2");
let con3 = document.getElementById("cont3");
con1.addEventListener("click",function(){
con1.animate({width:"200px"},2000);
con2.animate({"width":"200px"},2000);
con3.animate({width:"200px",height:"100px"},2000);
});
</script>
</body>
○ 옵션 및 키프레임 설정
// 키프레임
[{최초},{끝}]
// 옵션
{옵션1,옵션2}<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con1 = document.getElementById("cont1");
let con2 = document.getElementById("cont2");
let con3 = document.getElementById("cont3");
con1.addEventListener("click",function(){
con1.animate({width:"200px"},2000);
con2.animate([{width:"200px"},{width:"100px"}],2000);
// [{최초},{끝}] 기본 스타일은 종료 후
con3.animate({width:"200px"},{duration:2000,iterations:Infinity});
//{옵션1,옵션2}
});
</script>
</body>
○ 애니메이션 변수 관리 및 정지
에니메이션요소.cancel()<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con1 = document.getElementById("cont1");
let con2 = document.getElementById("cont2");
let anikey = [{width:"200px"},{width:"100px"}];
let aniop = {duration:2000,iterations:3};
let anican;
con1.addEventListener("click",function(){
anican = con1.animate(anikey,aniop);
});
con2.addEventListener("click",function(){
anican.cancel();
});
</script>
</body>
○ 클래스 전체 지정
<style>
.con{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
</style>
<body>
<div class="con" id="cont1"></div>
<div class="con" id="cont2"></div>
<div class="con" id="cont3"></div>
<script>
let con = document.getElementsByClassName("con");
let anikey = [{width:"200px"},{width:"100px"}];
let aniop = {duration:2000,iterations:3};
for(let i of con){
i.addEventListener("click",function(){
this.animate(anikey,aniop);
//i.animate();
});
}
</script>
</body>
■ 이미지가 자동으로 변경되기
○ 이미지 넘기기
모든 이미지의 display를 none으로 놓고 첫번째 이미지만 block으로 넣어준다.
imgage가 들어있는 박스를 클래스로 잡아주고
index번호는 증가시켜서 % 박스 개수를 넣어주면
index번호는 박스의 개수를 넘어가지 못하고 반복함
함수로 만들어서 setInterval로 반복시켜주면 된다.
<style>
.slider {
max-width: 600px;
height: 400px;
border: 1px solid #000;
}
.slides {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
</style>
<body>
<div class="slider">
<img src="https://picsum.photos/id/100/600/400" class="slides">
<img src="https://picsum.photos/id/110/600/400" class="slides">
<img src="https://picsum.photos/id/120/600/400" class="slides">
</div>
<script>
let cs = 0;
const slides = document.getElementsByClassName("slides");
function shows(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
// 초기 슬라이드 보여주기
shows(cs);
function nexts() {
cs = (cs + 1) % slides.length;
shows(cs);
}
// 행동에는 함수 이름을 작성 동작으로 넣으려면 function 안에
// 일정 시간마다 슬라이드 자동 전환 (3초 간격)
setInterval(nexts, 3000);
</script>
</body>
○ 자동으로 넘어가는 이미지에 버튼 클릭시에도 작동
버튼을 할 박스 또는 이미지를 만들어두고
클릭시 이벤트 실행
이전으로 돌아갈때 0-1 % 4 하면 -1이됨 이것을 제한하고자 +4를해줌
0-1+4 == 3 % 4 == 3
3-1+4 == 6 % 4 == 2
<style>
.slider {
max-width: 600px;
height: 400px;
}
.slides {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.button-box{
margin-top: 10px;
max-width: 600px;
height: 50px;
display: flex;
justify-content: space-between;
}
.button{
width: 80px;
height: 30px;
background-color: #666;
text-align: center;
align-content: center;
cursor: pointer;
}
</style>
<body>
<div class="slider">
<img src="https://picsum.photos/id/100/600/400" class="slides">
<img src="https://picsum.photos/id/110/600/400" class="slides">
<img src="https://picsum.photos/id/120/600/400" class="slides">
<img src="https://picsum.photos/id/130/600/400" class="slides">
</div>
<div class="button-box">
<div class="button" id="b-left">왼쪽</div>
<div class="button" id="b-right">오른쪽</div>
</div>
<script>
let cs = 0;
const slides = document.getElementsByClassName("slides");
function shows(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
// 초기 슬라이드 보여주기
shows(cs);
function nexts() {
cs = (cs + 1) % slides.length;
shows(cs);
}
// 이전으로 돌아가기
function prevs(){
cs = (cs - 1 + slides.length) % slides.length;
shows(cs);
}
// 일정 시간마다 슬라이드 자동 전환 (3초 간격)
setInterval(nexts, 3000);
let btl = document.getElementById("b-left");
let btr = document.getElementById("b-right");
// 버튼 클릭시 이벤트
btl.addEventListener("click",function(){
prevs();
});
btr.addEventListener("click",function(){
nexts();
});
</script>
</body>
■ JQuery 적용
○ JQuery란?
자바 스크립트 라이브러리로 크로스 브라우징 기능을 가지고 있음
크로스 브라우징은 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 해줌.
자바 스크립트는 코드가 너무 길어지고 복잡해지는 단점이 있지만
JQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현가능
○ JQuery 적용
- JQuery 사이트에서 주소를 복사해서 가져와서 사용
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
- JS파일 만들어서 JQuery 적용 해도 됨
내용 전체 복사
- JQuery 사용
body에서 아래쪽에 사용 클래스 및 아이디로 된 태그들이 생성전에 실행됨.
body밖에 사용해도 문제는 없음(아래쪽이면)
<body>
<div class="wrap"></div>
<script src="script.js"></script> <!--js파일을 만들어서 적용하기 -->
</body>
<body>
<div class="wrap"></div>
<script> <!--HTML상에 직접 사용하기 -->
$()
</script>
</body>
■ JQuery 사용
○ 기본 불러오기
- document(문서가) ready(준비된후) / 간략하게 앞에를 삭제해도 됨
- function(){} 작성이 안되면 하나의 동작 밖에 사용 못함.
- $는 JQuery를 사용하고 있다는 것을 의미함
$(document).ready(function(){
console.log("일반적 사용");
});
$(function(){
console.log("간략화");
console.log("두개이상");
});
○ JQuery 기본문법
$(function(){
$(선택자).동작함수1().동작함수2();
});- $ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자임
- 선택자를 이용하여 원하는 HTML 요소를 선택하고
- 동작 함수를 정의하여 선택된 요소에 동작을 설정
○ JQuery 객체
JQuery를 사용하기 위해서는 먼저 JQuery 객체를 생성해야함
객체는 여러 메소드를 가지고 있음
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<script src="script.js"></script>
</body>
$(function(){
let ab = $("div");
console.log(ab);
});
· $("div") : div로 된 요소를 선택
· box라는 div 요소가 모두 선택되어 변수 ab에 저장
- 아이디 선택
$(function(){
let ab = $("#box3");
console.log(ab);
});
- Javascript문법
let jsab = document.getElementById('box3'); //id선택
let jsc = document.querySelectorAll(".box"); //모든 box class 선택
■ JQuery 선택자
○ 기본선택자
| 예제 | 설명 |
| $("*") | 모든 요소 선택 |
| $(".클래스명") | 지정한 클래스명을 가지는 모든 요소 |
| $("#아이디명") | 지정한 아이디명을 가지는 요소 |
| $("태그명") | 지정한 태그명을 가지는 모든 요소 |
| $("선택자, 선택자") | 지정된 선택자들의 결합 |
○ 자식선택자
| 예제 | 설명 |
| $("div:first-child") | 첫 번째 요소 |
| $("div:last-child") | 마지막 요소 |
| $("div:nth-child(n)") | n번째 요소 |
| $("div:nth-last-child(n)") | 마지막에서 n번째 요소 |
| $("div:only-child") | 유일한 자식인 모든 요소 |
<div class="box">
<div id="box1">
<div id="box1-1"></div>
<div id="box1-2"></div>
</div>
<div id="box2">
<div id="box2-1"></div>
<div id="box2-2"></div>
<div id="box2-3"></div>
</div>
<div id="box3">
<div id="box3-1"></div>
</div>
</div>
<div class="box">
<div id="box4"></div>
<div id="box5"></div>
</div>
<div class="box">
<div id="box6"></div>
</div>$(function(){
console.log($(".box > div:first-child"));
console.log($(".box div:first-child"));
console.log($(".box div:nth-child(2)"));
console.log($(".box div:nth-last-child(2)"));
console.log($(".box div:only-child"));
console.log($(".box > div:only-child"));
});
○ 계층선택자
| 예제 | 설명 |
| $("부모 > 자식") | 부모의 모든 직접 자식요소 |
| $("조상 자식") | 조상의 모든 자식 요소 |
| $("형제 + 인접") | 형제의 특정 인접 요소 |
| $("형제~타입") | 형제의 다음의 타입으로 된 모든 요소 |
인접 이라고 작성 한곳, 타입작성한 곳이 클래스든 태그든 아이디든 상관없음
<div class="box">
<div id="box1">
<div id="box1-1"></div>
<div id="box1-2"></div>
</div>
<div id="box2">
<div id="box2-1"></div>
<div id="box2-2"></div>
<div id="box2-3"></div>
</div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>$(function(){
console.log($(".box > div"));
console.log($(".box div"));
console.log($("#box1 + div"));
console.log($("#box2 ~ div"));
});
○ JQuery 전용 기본 필터 선택자
| 예제 | 설명 |
| $("선택:odd") | 선택된 홀수번(0,1,2,3)으로 인덱스번호지정 |
| $("선택:even") | 선택된 짝수번 요소 |
| $("선택:first") | 선택된 첫번째 요소 |
| $("선택:last") | 선택된 마지막 요소 |
<div class="box">
<div id="box1">
<div id="box1-1"></div>
<div id="box1-2"></div>
</div>
<div id="box2">
<div id="box2-1"></div>
<div id="box2-2"></div>
<div id="box2-3"></div>
</div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>$(function(){
console.log($(".box div"));
console.log($(".box div:odd"));
console.log($(".box div:even"));
console.log($(".box div:first"));
console.log($(".box div:last"));
});
○ JQuery 전용 폼 필터 선택자
| 예제 | 설명 |
| $(":button") | type 속성이 button인 요소 |
| $(":img") | img 유형의 요소 |
| $(":radio") | 라디오 유형의 요소 |
| ... | 등등 |
<div class="box">
<input type="text" id="a1">
<input type="radio" name="" id="a2">
<input type="radio" name="" id="a3">
<input type="button" value="" id="a4">
</div>$(function(){
console.log($(":input"));
console.log($(":radio"));
console.log($(":button"));
});
○ JQuery 전용 가시성 필터 선택자
| 예제 | 설명 |
| $("div:hidden") | 숨겨진 요소 선택 |
| $("div:visible") | 존재하는 요소 선택 |
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
}
#box1{
visibility: hidden; /*숨겨지지만 공간은 차지*/
}
#box2{
display: none;
}
</style>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<script src="script.js"></script>
</body>$(function(){
console.log($("div:visible"));
console.log($("div:hidden"));
});
○ JQuery 전용 함수 필터 선택자
| 예제 | 설명 |
| $("div:eq(n)") | 집합내 인덱스 n에 있는 요소 |
| $("div:gt(n)") | 집합내 인덱스 n보다 큰 요소 |
| $("div:lt(n)") | 집합내 인덱스 n보다 작은요소 |
| $("div:has(p)") | 집합내 지정선택자(p)를 포함하는 요소 |
| $("div:animated)") | 애니메이션이 진행 상태에 있는 요소 |
| $("div:not(:animated)") | 애니메이션 중이지 않은 요소 |
<div id="box1">
<p id="text1">1</p>
</div>
<div id="box2">2</div>
<div id="box3">3</div>$(function(){
console.log($("div:eq(1)"));
console.log($("div:gt(0)"));
console.log($("div:lt(2)"));
console.log($("div:has(p)"));
console.log($("div").eq(1));
});
■ 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>
■ 10월 4일 - 8일차
○ 반복적인 실행
- 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>
■ 스크롤 확인 후 클래스 추가
<style>
main{
height: 5000px;
background-color: red;
}
.ab{
background-color: salmon;
}
.conts1{
height: 600px;
}
.conts2{
height: 300px;
}
.button{
width: 120px;
height: 40px;
position: sticky;
background-color: #fff;
top: 0;
cursor: pointer;
}
</style>
<body>
<main>
<div class="button">버튼</div>
<div class="conts1">1</div>
<div class="conts2">2</div>
</main>
<script>
$(function(){
let mbgc = $("main").css("background-color");
let wst;
let c2t;
$(window).scroll(function(){
wst = $(window).scrollTop();
c2t = $(".conts2").offset().top;
if(wst>=c2t){
$("main").addClass("ab");
}
else{
$("main").removeClass("ab");
}
console.log(wst+" "+c2t);
});
$(".button").click(function(){
$("html").stop().animate({scrollTop:c2t},1000);
});
});
</script>
</body>
■ 이미지 슬라이드 자동 효과
<style>
.con{
width: 200px;
height: 300px;
/* overflow: hidden; */
}
.imgbox{
display: flex;
}
</style>
<body>
<div class="con">
<div class="imgbox">
<div class="img">
<img src="https://picsum.photos/id/2/200/300" alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/20/200/300" alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/200/200/300" alt="">
</div>
</div>
</div>
</body>
<script>
let i = 0;
$(".imgbox").append($(".img").first().clone(true));
setInterval(
function(){
i++;
$(".imgbox").animate({marginLeft:-$(".img").width()*i},600);
if(i===$(".img").length-1){
setTimeout(
function(){
$(".imgbox").animate({marginLeft:0},0);
i=0;
}
,700);
}
}
,2000);
</script>let i = 0;
$(".imgbox").append($(".img").first().clone(true));
setInterval(
function(){
i++;
$(".imgbox").animate({marginLeft:-$(".img").width()*i},600);
if(i===$(".img").length-1){
setTimeout(
function(){
$(".imgbox").animate({marginLeft:0},0);
i=0;
}
,700);
}
}
,2000);
○ 마우스 오버시 멈춤
<style>
.con{
width: 200px;
height: 300px;
overflow: hidden;
}
.imgbox{
display: flex;
}
</style>
<body>
<div class="con">
<div class="imgbox">
<div class="img">
<img src="https://picsum.photos/id/2/200/300" alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/20/200/300" alt="">
</div>
<div class="img">
<img src="https://picsum.photos/id/200/200/300" alt="">
</div>
</div>
</div>
<script>
$(function(){
let i = 0;
$(".imgbox").append($(".img").first().clone(true));
let interval = setInterval(slide, 1000);
function slide() {
i++;
$(".imgbox").animate({marginLeft:-$(".img").width()*i}, 600);
if(i === $(".img").length - 1) {
setTimeout(function() {
$(".imgbox").animate({marginLeft:0}, 0);
i = 0;
}, 700);
}
}
$(".imgbox").mouseover(function() {
clearInterval(interval);
$(".imgbox").stop(true, true);
});
$(".imgbox").mouseout(function() {
interval = setInterval(slide, 1000);
});
});
</script>
</body>
■ 10월 8일 - 9일차
■ 메뉴바 나오기
<style>
a{
text-decoration: none;
color: black;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
nav{
background-color: rosybrown;
}
.menu{
display: flex;
width: 80%;
margin: 0 auto;
justify-content: space-between;
}
.menu > li{
width: 20%;
text-align: center;
padding: 10px 0px;
font-size: 20px;
}
.sub-menu{
margin-top: 10px;
display: none;
}
.sub-menu > li{
padding: 5px 0px;
}
</style>
<body>
<nav>
<ul class="menu">
<li><a href="#">메뉴1</a>
<ul class="sub-menu">
<li><a href="#">메뉴1-1</a></li>
<li><a href="#">메뉴1-2</a></li>
<li><a href="#">메뉴1-3</a></li>
</ul>
</li>
<li><a href="#">메뉴2</a>
<ul class="sub-menu">
<li><a href="#">메뉴2-1</a></li>
<li><a href="#">메뉴2-2</a></li>
<li><a href="#">메뉴2-3</a></li>
</ul>
</li>
<li><a href="#">메뉴3</a>
<ul class="sub-menu">
<li><a href="#">메뉴3-1</a></li>
<li><a href="#">메뉴3-2</a></li>
</ul>
</li>
<li><a href="#">메뉴4</a>
<ul class="sub-menu">
<li><a href="#">메뉴4-1</a></li>
<li><a href="#">메뉴4-2</a></li>
<li><a href="#">메뉴4-3</a></li>
<li><a href="#">메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
<script>
$(function(){
$(".menu > li").mouseover(function(){
$(".sub-menu").stop().slideDown(1000);
}).mouseout(function(){
$(".sub-menu").stop().slideUp(1000);
});
});
</script>
■ 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>
■ 10월 10일 - 10일차
■ 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',
});
■ 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"],
});
○ 버튼형 슬라이드
- 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",
}
},
});
'Web 수업자료 > Web 정규' 카테고리의 다른 글
| 웹디자인 기능사 (0) | 2024.10.15 |
|---|---|
| Web 3 24-08 (0) | 2024.08.08 |