22.07.22_TIL

📌 어제 한 미디어 쿼리는 재미있었다. 오늘은 웹 페이지에 동적인 효과를 가져올 수 있는 애니메이션 효과에 대해서 학습을 한다. 오늘도 어제와 같이 재미있는 시간이 되었으면 좋겠다.

📗 오늘 학습한 내용

CSS 애니메이션

• @keyframes
  • CSS로 키프레임 블록을 만든다

@keyframes 애니메이션이름{
    0% {	/* from으로 작성가능 */
        CSS속성: 속성값;
        transform: rotate(0deg)
    }
    50% {  
        CSS속성: 속성값;
        transform: rotate(180deg)
    }
    100% {	/* to으로 작성가능 */
        CSS속성: 속성값;
        transform: rotate(360deg)
    }
}

/* 시작 시점에서 0도, 50프로 시점에서 180도, 완료시점에서 360도 회전시킴*/

애니메이션 속성

• animation: 띄어쓰기로 속성 나열 가능
  • animation-name: 애니메이션의 중간 상태를 지정하는 이름.

#logo{
    animation: lotate;
    animation-name: lotate;
    /* 둘 다 사용가능 */
}

• animation-duration: 한 싸이크르이 애니메이션이 재생될 시간 지정

#logo{
    animation: lotate 3s;
    /* =================== */
    animation-name: lotate;
    animation-duration: 3s;
}

• animation-delay: 애니메이션의 시작을 지연시킬 시간 지정

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-delay: 3s;
}

• animation-direction: 애니메이션 재생 방향을 지정
  • normal: 기본값 (재생 종료 후 다시 재생)
  • reverse: 역방향 재생
  • alternate: 순반향부터 역방향을 번갈아가며 재생
  • alternate-reverse: 역방향부터 순반향을 번갈아가며 재생

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-direction: arternate;
}

• animation-iteration-count: 애니메이션이 몇 번 반복될지 지정

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-iteration-count: 3;
    /* 애니메이션 3회 반복 */
}

• animation-play-state: 애니메이션의 재생 상태(일시정지, 재시작)

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-play-state: pause;
}

• animation-timing-function: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • linear: 일정한 간격
  • ease: 기본값
  • ease-in
  • ease-out
  • ease-in-out
• animation-fill-mode: 애니메이션의 재생 전 후의 상태 지정
  • none: 기본값
  • forwards: 마지막 키프레임 스타일 유지
  • backwards: 첫 번째 키프레임 스타일 유지
  • both: 재생 전 - 첫 번째 키프레임 스타일, 재생 후 - 마지막 키프레임 스타일 유지

Canvas

• 다양한 그래픽 요소를 만들기 위해서 사용한다.
• 단순한 도형 그리기, 데이터 시각화, 애니메이션, 웹 게임 등에 사용하여 다양한 콘텐츠를 만들어 낼 수 있다.

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용 표시
</canvas>

• 캔버스 크기 지정 (기본크기 300px * 150px)

<canvas id="canvas" width="500" height="500"></canvas>

<canvas id="canvas" width="50vw" height="40vh"></canvas>

캔버스로 사각형 그리기

• 색상
  • ctx.fillStyle = 'blue'
  • ctx.fillRect = (10, 10, 100, 50)
• 선
  • ctx.lineWitdth = 5;
    ctx.strokeStyle = "black";
  • ctx.strokeRect(10, 10, 100, 50)
• 지우기
  • ctx.clearRect(20, 20, 80, 30)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 로그인 폼 구현

📝 중요한 내용

• CSS 애니메이션 사용법
• 캔버스 사용법