범부 개발자 아등바등 살아남기

 21개 프로젝트로 완성하는 인터랙티브 웹 개발 Part 1 chapter 2 404 에러 페이지에서 배운 점을 살펴봅니다.

 svg 형태의 파일일 경우에는 그려진 요소들이 엘리먼트 태그들이다. 그래서 css 적용을 원하는 태그를 찍어서 해당 태그에만 css 애니메이션을 적용함으로써 역동적인 화면을 만들어 낼 수 있다. 이를 활용하여 기존의 이미지 파일을 svg로 변환한 다음 원하는 조작을 할 수 있다.

• transform-box
  • transform 작업이 일어나는 위치 설정
    • 'border-box': 기본값, 테두리를 포함한 영역의 내부 경계선을 기준으로 작업
    • 'stroke-box': 테두리를 포함한 영역의 외부 경계선을 기준으로 작업
    • 'view-box': 현재 뷰포트를 기준으로 작업
    • 'fill-box': 요소의 content를 기준으로 작업

• transform-origin
  • transform 작업의 중심점 설정
    • 'center', 'top' 등의 키워드 혹은 픽셀값, 백분율 등을 사용하여 어떤 위치를 중심으로 잡을 것인지 선택 가능

• 이 두가지 속성을 이용해 애니메이션을 좀더 구체적으로 구현할 수 있다. ex) 빙글빙글 도는 애니메이션

• 해당 강의에서 알게된 점은 다음과 같다.
  • svg를 활용하면 세부적인 애니메이션 적용이 가능하다.
  • transform-box, transform-origin을 통해 transform의 세밀한 조정이 가능하다.

21개 프로젝트로 완성하는 인터랙티브 웹 개발 With Three.js & Canvas