[HTML] 라이브러리 및 속성

1. 라이브러리

 

[오픈 그래프 / 트위터 카드]

- 웹페이지가 소셜 미디어(카카오톡, Slack 등)로 공유될 때 우선적으로 활용되는 정보 지정

- 페이지 title, 설명, image, url 등

 

[GSAP]
- 자바스크립트로 웹 화면을 제어(세밀한 움직임, 동작의 연속성 등)하는 애니메이션 라이브러리
- gsap.to()

 

[ScrollToPlugin]
- GSAP 추가기능으로 스크롤 애니메이션 라이브러리

- scrollTo() 사용 ex) 버튼 클릭시, 최상단으로 화면 스크롤)

 

[Swiper]
- 슬라이드를 구현하는 라이브러리

 

[Youtube API]
- Youtube 동영상 제어
- onYouTubePlayerAPIReady 함수명은 해당 IFrame Player API에서 사용하기 때문에 다르게 지정하면 정상 작동 불가능

 

[ScrollMagic]
- 스크롤과 요소의 상호작용을 위한 자바스크립트 라이브러리
- 주로 어떤 요소가 현재 화면에 보이는 상태인지 확인할 때 사용 ex) 스크롤 위치에 따라 해당 이미지를 숨겼다가 나타나게 함

 

[Lodash]
- 배열이나 객체를 좀 더 간편하게 다루는 자바스크립트 라이브러리

- 윈도우 부분에 스크롤 이벤트를 통해 화면을 스크롤하면 결국 함수가 수십개가 한번에 실행됨

-> 0.3초로 설정하면 0.3초 단위로 부하를 줘서 함수가 우르르 실행되는 것을 방지하는 용도로 throttle이라는 기능을 사용- _.throttle() : 이벤트가 계속해서 함수를 호출하는 경우, 정해진 시간 동안 한 번만 호출하게 하는 기능 ex) 스크롤)

 

 

 

2. 속성

 

1. material-icons

- google에서 제공하는데 코드 삽입으로 아이콘 사용이 가능

- 클래스 속성이 아니라 textcontent 값에 따라 아이콘 변경이 가능

 

2. URL 해시/프래그먼트

- CSS ID 선택자를 이용해서 페이지 내 특정 위치로 이동 가능