[패스트캠퍼스] 프론트엔드 강의 #18

calc() 함수

CSS에서 특정한 단위 계산 가능(다른 단위도 계산 가능)

.youtube .youtube__area {
  width: 1920px;
  background-color: orange;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px /-2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
}

요소를 정가운데 배치하는 방법

left : 50% /* 왼쪽을 기준으로 오른쪽으로 요소를 50% 밀어낸다. */
margin-left: -(전체너비의 반); /* 위 상태에서 왼쪽으로 절반만큼 당겨온다. */

반대로는 right, margin-right 사용

CSS 다중 선택자

.notice .promotion .swiper-prev:hover,
.notice .promotion .swiper-next:hover {
...
}

가상요소 (:hover) 를 쓸땐 쉼표로 구분되는 모든 선택자에 적용해야한다.

변수 = !변수

기존 변수 값의 반대값을 다시 할당함

let a = true;
a = !a;
alert(a); // false

 

CSS 가로세로너비 비율

.container {
  width: 500px;
  background-color: royalblue;
}
.container .item {
  width: 100%;
  height: 0;
  padding-top: 50%;
}
/* 세로높이는 250px으로 나온다! */

자식요소의 padding-top을 이용하면
부모요소에서 지정한 width 만큼의 가로세로너비 비율을 지정할수 있다.

동영상 16:9 비율을 지정하고 싶다면? 
16 : 9 = 100% : 56.25%

iframe 삽입에 대한 YouTube Player API

https://developers.google.com/youtube/iframe_api_reference?hl=ko

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google Developers

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
function onYouTubeIframeAPIReady() {
  // <div id="player"></div>
new YT.Player('player', {
    videoId: 'An6LvWQuj_8', // 최초 재생할 유투브 영상 ID
    playerVars:{
      autoplay: true,
      loop: true,
      playlist: 'An6LvWQuj_8'
    },
    events: { 
      onReady: function(event){ // 영상이 준비되면
        event.target.mute() // 음소거
      }
    }
  });
}

 

애니메이션 ease를 눈으로 확인하기

https://greensock.com/docs/v2/Easing

Docs

 

gsap.to() 문서

https://greensock.com/docs/v3/GSAP/gsap.to() 

Docs