[TIL] 엘리스 SW 엔지니어 트랙 Day 004

📖 오늘 배운 내용 - 2021.10.28

• css transform
• css transition
• css animation
• css @media query

 

📝 css transform

[CSS] transform 속성과 사용법

 

📝 css transition

[CSS] transition 속성과 사용법

 

📝 css animation

[CSS] animation 속성과 사용법

 

📝 css @media query

[CSS] media query 사용법

 

💡 오늘 깨달은 것

• 오늘은 코치님과 css 실습수업을 진행했다.
• css 애니메이션은 잘 안 쓰다 보니 기억이 잘 안 났는데 이번 수업을 통해 다시 한번 기초를 다져서 좋았다.
• VSC 자동완성으로 한 번도 작성해 보지 못한 meta name="viewport" content="width=device-width, initial-scale=1.0"> 를 직접 작성하고 무슨 의미인지 알 수 있었다.
• 이전에 다른 강의에서 media query를 제대로 알지도 못한 채 따라 쳤던 적이 있어서 반응형 하면 어렵고 복잡한 줄 알았는데, 이번 수업 때 개념을 학습하고 바로 실습을 통해 직접 작성해 보니 어렵지도 복잡하지도 않게 느껴졌다.(물론 작은 항목만 작업해서 그런 걸 수도...!)
• 트랜지션과 애니메이션의 차이점은 트랜지션은 속성의 요소가 바뀌어야 동작하지만 애니메이션은 그냥 실행시킬 수 있다. 또한 애니메이션은 keyframes을 따로 지정해 줄 수 있다.
• 미디어 쿼리 내부의 코드가 외부의 코드보다 우선순위가 밀리면 적용되지 않는다.