4. 13.(화) TIL

오늘은 특정한 제목이 없다.

과제를 진행하면서 알아두어야겠다 하는 것들을 정리해야겠다.

 

-- CSS -- 

 

1. @keyframes

  - @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.

  - CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule (en-US)를 통해서 접근

  - 키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리스트를 매칭시킬 animation-name (en-US) 속성에서 사용할 이름과 함께 생성합니다.

  - 각 @keyframes 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성

  - 지정된 %의 순서대로 처리

 

2. transform

  - CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경

  - 회전 (rotate)

• angle에는 각의 크기 입력
• 단위는 deg, rad, grad, turn 등을 사용

transform: rotate( angle )
transform: rotateX( angle )
transform: rotateY( angle )

  - 크기조절 (scale)

transform: scale( 2 );  // 가로, 세로 2배 확대
transform: scale( 2, 1.5 ); // 가로 2개, 세로 1.5배 확대
transform: scaleX( 2 ); // 가로 2배 확대
transform: scaleY( 1.5 ); // 세로 1.5배 확대

  - 기울기 (skew)

transform: skewX( 50deg, 70deg );
// 가로 50도, 세로 70도 기움

  - 이동 (translate)

transform: translate( 30px, 50% )
// 오른쪽 30px, 아래쪽 50% 이동

 

3. CSS  애니메이션 효과 - jump, rotation

  01. jump

    codepen.io/kimoony/pen/rNjdvPocodepen.io/kimoony/pen/GRrxBpX

    

  02. rotation

    codepen.io/kimoony/pen/rNjdvPocodepen.io/kimoony/pen/rNjdvPo

 

참고

codepen.io/w3core/pen/ZbJeXm

ko.javascript.info/css-animations#ref-1305

www.codingfactory.net/12593

developer.mozilla.org/ko/docs/Web/CSS/transform

shyunku.tistory.com/29

 

 

 

 

 

setTimeout                                                              |    setInterval

 

  - 일정 시간이 지난 후에 함수를 실행하는 방법                |       - 일정 시간 간격을 두고 함수를 실행하는 방법  

문법

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

매개변수

  - func|code : 실행하고자 하는 코드, 함수 또는 문자열 형태이다. 대개 이 자리에 함수가 들어간다. 하위 호환성을 위해 문자열도 받을 수 있게 해놓았지만 추천 안함!

  - delay : 실행 전 대기 시간, 단위는 밀리초(1000밀리초 = 1초) 기본값은 0

  - arg1, arg2 ... : 함수에 전달할 인수들, IE9 이하 지원 x

 

아래 코드를 실행하면 1초 후에 satHi()가 호출된다.

function sayHi() {
  alert('안녕하세요.');
}

setTimeout(sayHi, 1000);

아래와 같이 함수에 인수를 넘겨줄 수도 있다.

function satHi(who, phrase) {
  alert( who + ' 님, ' + phrase);
}

setTimeout(sayHi, 1000, "홍길동", "안녕하세요.");
// 홍길동 님, 안녕하세요.

setTimeout 의 첫 번째 인수가 문자열이면 자바스크립트는 이 문자열을 이용해 함수를 만든다.

아래 예시가 정상적으로 동작하지만 추천하지 않는다. 되도록 익명 화살표 함수를 사용하자!

setTimeout("alert('안녕하세요.')", 1000);
// 위 방법 추천하지 않음
setTimeout(() => alert('안녕하세요.'), 1000);
// 익명 화살표 함수 사용해서 사용하기

 

※ serTimeout 에 함수를 넘길 때 함수 뒤에 () 붙이지 말기!

// 잘못된 코드!!!!
setTimeout(sayHi(), 1000);

setTimeout 은 함수를 참조 값을 받도록 정의되어 있는데 sayHi() 를 인수로 전달하면 함수 실행 결과가 전달되 버린다.

그런데 sayHi() 엔 반환문이 없다. 호출 결과 undefined 가 됨.

따라서 setTimeout은 스케줄링할 대상을 찾지 못해 원하는 대로 코드가 작동하지 않음!!

 

 

참고

ko.javascript.info/settimeout-setinterval