웹 이미지 (종류)

비트맵(Bitmap/Raster)

.jpeg .gif .png .webp

픽셀들이 모여 만들어진 정보의 집합

벡터(Vector) 로고 or 아이콘

.svg

점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지

---

---

보간법

let myName = "김덕근";
let email = "test@gmail.com";
let hello = `Hello ${email}?!`;

---

함수선언

기명(이름이 있는) 함수

// 함수 선언
function hello() {
	console.log('Hello~');
}

익명(이름이 없는) 함수

// 함수 표현
let world = function() {
	console.log('World~');
}

함수 호출

hello(); // Hello~
world(); // World~

---

객체 데이터에서 메소드 사용

const deokkeun = {
	name: '김덕근',
    age: 99,
    // 메소드(Method)
   	getName: function() {
    	return this.name;
    }
}
console.log(deokkeun.name); // 김덕근
console.log(deokkeun.getName()); // 김덕근

---

defer 속성

HTML코드를 모두 읽은 후에 script태그를 실행하는 속성

<script defer src="./main.js"></script>

---

forEach

const boxEls = document.quearySelectorAll('.box');

// 찾은 요소 반복해서 함수 실행
// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function(boxEl, index) {
	boxEl.classList.add(`order-${index + 1}`);
  	console.log(index, boxEl);
})

// ${index} == 0 부터 시작

---

textContent

const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!

// Setter, 값을 지정하는 용도
boxEl.textContent = 'DEOKKEUN';
console.log(boxEl.textContent); // DEOKKEUN

---

메소드 체이닝

const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환

const b = a.split('').reverse().join(''); // 메소드 체이닝...

console.log(a); // Hello~
console.log(b); // ~olleH

---

Lodash

Lodash 바로가기

Lodash 문서 바로가기

window.addEventListener('scroll', _.throttle(function() {
  console.log('scroll!');
}, 300));

매 밀리초당 최대 한 번만 호출하는 제한된 함수를 생성합니다

---

gsap

자바스크립트에 애니메이션을 추가하는 라이브러리

gsap 바로가기

gsap 문서 바로가기

const badgeEl = document.querySelector('header .badges');

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY);
  if(window.scrollY > 500) {
    // 배지 숨기기
    // gsap.to(요소, 지속시간, 옵션);
    gsap.to(badgeEl, .6, {
      opacity: 0,
      display: 'none'
    });
  } else {
    // 배지 보이기
    gsap.to(badgeEl, .6, {
      opacity: 1,
      display: 'block'
    });
  }
}, 300));
// _.throttle(함수, 시간)

---

Swiper

Swiper 바로가기

// new Swiper(선택자, 옵션)
new Swiper('.notice-line .swiper', {
  direction: 'vertical',
  autoplay: true,
  loop: true
});

---

youtube iframe api

youtube iframe api 바로가기

---

ScrollMagic

ScrollMagic 바로가기

---

ScrollTo

ScrollToPlugin 바로가기