패스트캠퍼스 환급챌린지 24일차 미션 (2월 24일) : 프론트엔드개발 강의 후기

오늘의 목표

뱃지 남은 내용들 강의 듣고, 순차적인 애니메이션 13 14 15 이다.

 

오늘은 으아 토요일이라서 더더 하기 싫어서 몸부림치는 몸을 붙들고 책상에 앉았다.\으아

 

 

어제 그제 스타벅스 예제를 하면서 문득 생각나는 게 있다.

굳이 안 붙여도 되지만, 매번 끝나는 태그에 뒷 쪽에 </> /이걸 붙이시는 거다.

js에서는 필요한 부분이라고는 했다. 굳이 안 붙여도 된다는 이야기도 했지만 갑자기 생각난 내용.

 

 

 

으아 애니메이션은 보통

 "transform", "transition", "@keyframes", "animation" 

이 있다.

 

그 중에서 대표되는 transition 에 대해서 정리를 했다.

 

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다.

쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 바로바로 휙휙 변화하는 것 보단

부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다.

 

Transition 속성

transition
모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

transition-property
요소에 추가할 전환(transition) 효과를 설정함.

transition-duration
전환(transition) 효과가 지속될 시간을 설정함.

transition-timing-function
전환(transition) 효과의 시간당 속도를 설정함.

transition-delay
전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.

 

*주의할 부분

모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다.

예를 들어 width, font-size, background-color 등은 하나의 범주안에서 크기나 색상의 값이 변화가 가능하지만

display 프로퍼티는 그렇지 않다.

 

그래서 트랜지션의 대상이 될 수 있는 CSS 프로퍼티 를 정리해봤다.

 

 

Box model

• width height, max-width, max-height, min-width, min-height
• padding, margin
• border-color, border-width, border-spacing

​

Background

• background-color, background-position

​

좌표

• top, left, right, bottom

​

텍스트

• color font-size, font-weight, letter-spacing, line-height
• text-indent, text-shadow, vertical-align, word-spacing

​

기타

• opacity, outline-color, outline-offset, outline-width
• visibility, z-index

 

오늘은 트랜지션 정의 같은 내용들만 대충 정리하고 빠르게 내용을 살폈다.

후하

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]