간단한 요약
기본적인 animation 효과를 구현하는 실습 수업이었다.
배운 내용
1. transform
1-1. rotate
transform: rotate(Xdeg);: X에는 양/음 숫자, 선택 요소에 회전효과를 줌
1-2. scale
transform: scale(X, Y);: X/Y축으로 크기를 크게/작게 조절 가능- X, Y에 소수점도 적용 가능 (비율로 적용되기 때문)
1-3. skew
transform: skew(Xdeg, Ydeg);: X/Y축으로 3차원적으로 회전시키는 효과- 6가지의 면을 사용한다면, 정육면체 구현도 가능 (연습해보기)
1-4. translate
transform: translate(X, Y);: 선택 영역을 X, Y만큼 이동시키는 효과
1-5. prefix
다른 브라우저의 하위 버전까지 고려하여 웹사이트를 제작할 시, 아래처럼 prefix를 붙여서 작업이 필요함
-webkit-transform: rotate(); -moz-transform: rotate(); -ms-transform: rotate(); -o-transform: rotate(); transform: rotate();
2. transition
선택 요소가 변화하는 것을 과정을 보여주고 싶을 때
transition: property duration timing-function delay;에 적절한 값을 넣어 효과 구현 가능- ⬆️의 속성 값들의 순서는 상관 없으나,
duration delay순서는 지켜서 사용하기 transition: background-color 0.5s linear 0.2s, width 0.5s linear 0.2s;처럼 두가지 transition을 동시에 작성도 가능
3. animation
animation: name duration timing-function delay iteration-count direction fill-mode;- 다양한 animation의 속성 종류 및 값이 있음
- 반드시
@keyframes name { 0% {xxx} 100% {xxx} }와 같이 사용해야 함 - 마찬가지로 먼저 나오는 숫자 값이 duration, 그 다음이 delay 값
- 또한 prefix 추가가 가능함, 따라서
@-webkit-keyframes spinLion { ~~~ }따로 추가해야 함
4. 유용한 참고 사이트
Stylie: 여기에서 원하는 다양한 animation 효과를 테스트 할 수 있다.
5. opacity
- 선택 요소의 내부 전체를 불투명하게 조절함
- 선택 요소의 children 요소를 제외한 영역만 opacity를 적용하고 싶다면 아래처럼 가능
- 여기에서 원하는 일반 color값을
rgba()값으로 변환 가능
selectedOne { background-color: rgba(number, number, number, opacity); }
6. 추가 animation 속성들
animation-play-state: animation의 동작여부 명령하는 속성(ex:running, paused)animation-fill-mode: backward: 최초 지정된 속성(ex: 색상)과 상관없이 animation이 0%일 때와 같은 속성값으로 조정해줌. 따라서 유저경험을 자연스럽게 만들어주는 기능transform: scale(xxx): 이는 children 요소가 있을 경우, children에게도 영향을 미침- animation 속성에서
translate, rotate만으로 아래와 같은 슈퍼마리오 동전 이미지를 만들 수 있다.
7. img의 하단 공백처리
img태그는 default로 하단에 미세한 공백을 가지고 있음vertical-align: middle;으로 그 공백을 제거할 수 있음vertical-align: middle;은 원래 inline요소의 X축 정렬 작업에 사용되는 css 속성
img태그 또한inline-block성격을 가지기 때문에 사용가능. 다만 단순 X축 정렬 작업이 아닌 하단의 공백처리에 효과가 있음- 종종
img태그의 의도된 default값으로 설정해주는 편
8. parents: relative; && children: absolute;
- 이 조건에서 children의 요소의 넓이, 위치의 기준은 parents로 둠
9. hover effect transition
- zoom 효과:
transform: scale(1.2); - info pop-up 효과:
transform: translateY(-Xpx); - 7번의 img 하단 공백처리
- 8번의
parents: relative && children: absolute활용 overflow: hidden;으로 원하는 영역을 벗어나면 hidden처리
10. animate.css
- 많은 개발자가 이미 만들어둔 Animation Library
css link위에 붙여두기class="animate__animated"을 시작으로 다양한 효과를 구현할 수 있다.- codepen에서 animation으로 검색하여도 다양한 예시를 볼 수 있다.
어려운 내용
- 많이 어려운 내용은 없었으나, 약간의 트릭 같은 기억해야 할 점을 숙지해야 하여야겠다. 예를 들면,
img태그의 하단 공백처리는vertical-align: middle;로 한다는 식의 트릭들. - 여전히 parents와 children 간의 position 속성의 정리가 되어 있지 않다.
해결 방법
현재 css강의의 초반 부분이므로 배워야 할 부분 그리고 발전된 방법을 익히는 부분이 후에 나올 것으로 예상된다. 반복 연습만이 해결 방법일 것이라 생각한다.
소감
animation 구현의 과정이 아주 기본적인 효과였지만 상당히 재미있었다. 또한 codepen에서 찾아볼 수 있는 skillful한 효과들 또한 직접 구현해보고 싶어졌다. 물론 직접 구현이 아니더라도 거기에 구축되어 있는 code를 보며 학습할 수 있을 것 같다.
나의 코드
진행했던 코드는 여기에 업로드 하였다.
