1.학습한 내용

1)속도 곡선

ease-in과 같은 코드를 통하여서 시작할때 속도를 느리게 하는 명령어가 있다.
이와 같은 코드들을 속도 곡선이라고 하며,

사진과 같이 여러가지 명령어를 사용할수있다.


이를 통해서 그래프의 움직이는 속도를 조절하는것이 가능하다.

각각에 property를 지정하는것이 아니라 transition:all 을 통해서 모두를 지정할수 있지만, 이때는 각자에 특성을 주는것이 어렵다.

2)애니메이션 Animation

형태가 서서히 변하는 transition 과 다르게 animation은 과정에서 key frame 을 주는 것으로 다른 형태를 거쳐서 변하게된다.

transition과 다르게 중앙에 viloet으로 변하는 과정을 거쳐서 변하게된다.
진행방향을 거꾸로, 그리고 횟수를 설정하는것도 가능하며,
여러가지 줄을 한줄로 표현도 가능하다.

3)CSS 박스모델

크기를 수치로 지정할수 있고, 백분율을 통해서 조절이 되도록 설정할수도있다.


inline과 block의 차이를 볼수있다.


inline과 inline-block가 표현되는 형태가 다르다는것을 볼수있다.

none은 그림의 자리 자체가 비워지는것이며,
hidden은 그림이 보이지않을뿐 자리는 차지하는것을 볼수있다.

border, 테두리의 모양 및 색을 지정을 할수있다.

또한 테두리의 모서리를 조절하는것 또한 가능하다.

margin의 경우 상하에서 겹치는 부분이 있으면 더 높은 값으로 상쇄가 되는 현상이 있다.

이렇게 margin을 30px을 줬으므로 각각의 박스모델에서 30px씩을 적용되면 60px이 적용되어서 넓게 띄어져있어야 하지만, 30px로 좁게 띄어져있는것을 볼수가있다.


하지만 상하가 아닌 좌우의 박스의 경우에는 margin상쇄가 일어나지지 않기때문에 각 박스모델마다 30px씩 띄어져서 60px만큼 떨어진다는것을 확인할수있다.

padding은 컨텐츠 영역과 테두리 사이의 영역을 뜻한다. 이 padding이 0이 되어버리면 글씨가 테두리에 붙어서 나오는것을 볼수있다.

content-box와 border-box를 구별을 잘해야하는데, 이때 콘텐츠 박스는 기존의 박스에서 콘텐츠박스가 추가로 들어가는것이기 때문에, 기존의 박스가 300px이더라도 콘텐츠영역이 추가가됨으로써 최종적으로는 364px이 된다.
border-box의 경우에는 테두리까지 전부 포함하는 박스이기때문에, 최종적으로는 300px이 나타난다.

2.학습내용 중 어려웠던 점

animation을 진행하는 과정에서, 도중에 keyframe 을 통하여서 거쳐가는 과정이 있다는것은 알게되었지만, 이가 어떤식으로 작용이 되는지 잘 이해가 가지않았다.

3.해결방법

이는 후에 duration 시간을 매우 길게 설정하여서
0%->50% 까지는 blue가 violet이 되는 과정으로.
50%->100% 까지는 violet 에서 yellow가 되는 과정으로 나뉘어졌다는것을 알수있었다.

4.학습소감

처음 transition 과 animation을 비교하는 사진을 보았을때, animation은 transition 안에 새로운 transition을 넣은것인가? 라는 생각을 했지만 실제로 사용을 해보는것으로, animation은 transition을 원하는 구간별로 쪼갠 뒤, 각 구간별로 transition을 만들어서 연결했다는 느낌을 가지게되었다.