HTML/CSS 심화-2

Chapter4. CSS 애니메이션
1.키프레임에 대해 이해합니다.
2.애니메이션 속성에 대해 이해합니다.
Chapter5. Canvas(캔버스)
3.캔버스의 사용법에 대해 이해합니다.
4.캔버스로 간단한 도형을 그리는 법에 대해 이해하고, 그릴 줄 압니다.
과제 1 - 반응형 웹 만들기
5.미디어 쿼리의 사용법 및 활용법을 익힌다.
6.미디어 쿼리를 이용해 반응형 웹의 골격을 만들 수 있다.
과제 2 - CSS 애니메이션과 Canvas 활용하기
7.CSS 애니메이션의 사용법 및 활용법을 익힌다.
8.Canvas의 사용법 및 활용법을 익힌다.
9.해당 개념들을 이용해 하나의 기능을 구현할 수 있다.


1.키프레임은 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있는 도구로 내부 %를 지속시간의 비율로 생각한 후 해당 동작을 진행한다.

2.아래와 같은 속성들이 있다.
animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
animation-name : 애니메이션의 중간 상태를 지정하는 이름.  @keyframes 블록에 작성
animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
animation-direction : 애니메이션 재생 방향을 지정
animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정


3.캔버스를 그려준 후 내부에 동작을 추가해준다. 동작 메서드로는 fillRect(채워진 사각형), strokeRect(빈 사각형), clearRect(사각형으로 지우기)등이 있다.


4.캔버스 내부에 그릴 도형의 css에 대해 입력한 후 그려줄 좌표값을 이벤트핸들러와 합쳐준다.
canvas.onclick = function (event) {
const x = event.clientX - ctx.canvas.offsetLeft
const y = event.clientY - ctx.canvas.offsetTop
ctx.fillRect(x - 15, y - 15, 30, 30);
}

5.미디어 쿼리를 이용해 반응형 웹을 만들 수 있다.

6.미디어 쿼리를 이용해 크기마다 css를 지정해 레이아웃자체를 none으로 변경시킬 수 있으며 각 크기에 어울리는 레이아웃을 만들 수 있다.

7.키프레임을 만들어준 후 원하는 아이디값에 css형식으로 지정해준다.
#logo {
animation : '키프레임명' 3s ;
}

8.아래와 같이 캔버스의 크기를 정해준 후 원하는 내용을 넣어준다.
<canvas id="canvas">
캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
</canvas>
const canvas = document.querySelector("#canvas");

기본적으로 300픽셀 * 150픽셀
<canvas id="canvas" width="500" height="500"></canvas>
// 500픽셀 * 500픽셀로 설정됩니다.

9.간단한 기능만 구현할 수 있다..

 

내용이 전반적으로 오류도 많고 설명이 부족해 스트레스를 많이 받았던 것 같다.

게다가 알려준 방식은 리액트용이 아닌 js용이라서 리액트용의 라이브러리도 달라서 더 복잡했다..