학습내용

자바스크립트 플러그인, 라이브러리(3): GreenSock, Bootstrap
github소스코드

GreenSock

animation에 특화된 javascript 플러그인

gsap 기본구조

• gsap.to(target, value)
• target: querySelector 스타일로 html 태그 지정
• value: 변화주고 싶은 속성값들 객체로 전달
• duration 속성이름 생략 가능
• 제이쿼리와 같이 사용 가능

gsap.to(".masthead-heading", {
  duration: 1,
  x: 100,
  backgroundColor: 'blue',
  borderRadius: '50%',
});

easing(timing function): 애니메이션 동작 속도 조절

• ease-pack js파일 연동 필수
• gsap에서는 opacity 대신 autoAlpha 사용
• 연속적인 애니메이션 효과: 딜레이 이용하기
• timelineLite()로 인한 딜레이는 이전 효과 완료 후 딜레이 시작

// 현재 딜레이는 브라우저 새로고침했을 때 전부 시작
gsap.from($portfolioHeading, 0.3, {y: -15, autoAlpha: 0, delay: 0.2});
gsap.from($portfolioSubHeading, 0.3, {y: -15, autoAlpha: 0, delay: 0.4});

var tl = new TimelineLite();
tl
  .from($portfolioHeading, 0.3, {y: -15, autoAlpha: 0, delay: 0.2})
  .from($portfolioSubHeading, 0.3, {y: -15, autoAlpha: 0, delay: 0.2});

• 이전효과 끝나기 전에 미리 시작하고 싶을 때: 이전효과 기준 시작점 인수 추가
• 문자열: 이전효과 기준 시간 + 적용
• 숫자: 브라우저 새로고침 기준 절대시간
• add(문자열)로 시작 기준점 추가

tl
  .from($portfolioHeading, 1, {y: -15, autoAlpha: 0, })
  .add('$portfolioSubHeading')
  .from($portfolioSubHeading, 0.3, {y: -15, autoAlpha: 0,})
  .from($portfolioImg, 0.3, {y: -15, autoAlpha: 0, }, '$portfolioSubHeading')

Bootstrap framework

웹사이트에서 자주 사용되는 레이아웃, 디자인을 미리 만들어 놓은 모음집

1. layout

• container 클래스: container{ max-width: 1140px} 로 설정됨
• container-fluid: width: 100%로 설정됨
• row가 container의 기본 양옆 마진 상쇄

grid system

• 전체 영역을 12등분한 것을 기준으로 크기 설정
• 브라우저 크기 바뀌면 알아서 정렬 바뀜
• 반응형 웹을 위해 breakpoint 추가 가능

2. table

• table 전체, tr, td 등 테이블 태그에 디자인 적용 가능
• 강의에선 thead용 클래스가 있었는데 최신 버전에선 그냥 tr로 통일된 듯 했다.

3. component

• img : class="img-thumbnail" 기본 디자인 제공
• card: 별도 width값 없음 -> row & col 사용해서 영역 만들기

carousel

• sr-only -> visually-hidden: 코드엔 있어도 화면에 안 나오는 부분. 강의보다 최신버전에서 속성 이름 변경된 듯
• 이동 button의 target 속성값으로 사용된 id값 동일하게 맞추기

modal

• trigger 버튼에 클래스로 data-bs-toggle="modal", data-bs-target="#exampleModal"->연동
• modal 창 안 x버튼: data-bs-dismiss="modal"
• javascript로 modal 제어: 클릭하는 버튼 말고 modal창 자체에 이벤트 붙이기

어려웠던 점

1. 강의보다 더 최신버전 라이브러리를 사용하다 보니 자잘한 속성 이름이나 사용법이 조금씩 다른 점이 많았다.
2. bootstrap modal의 이벤트를 작성할 때 예상과 달리 jQuery가 적용되지 않았다.

해결방법

1. 강의와 공식 문서를 비교해서 보니 이해하기 어렵지는 않았다.
2. 아마 cdn을 덜 가져온 것이 아닐까 하는 생각이 든다. 공식문서 예시도 자바스크립트를 사용했길래 연습할 때는 그냥 자바스크립트로 작성했다.

소감

오늘은 애니메이션 특화 라이브러리인 greensock과 bootstrap 프레임워크에 대해 알아보았다. 둘 다 굉장히 많이 사용되는 라이브러리인데, 이런 오픈소스를 사용할 때 라이센스를 잘 확인해야 한다는 것을 한 번 더 알려주셔서 도움이 되었다. bootstrap의 경우 너무 자주 사용되어서 웹사이트의 레이아웃이 다 비슷해지는 문제가 있었다고 하는데, 그만큼 편리해서 많은 사람들이 이용하기 때문이라는 생각이 든다. 일단 직접 코딩하는 연습을 더 해야겠지만, 오늘 배운 것들도 실무에서 자주 사용하게 될테니 더 연습해야겠다.