CSS 애니메이션 학습법
CSS 애니메이션은 변화가 일어날 때 두 상태를 오가는 전환(transitions)과, @keyframes로 정한 순서를 스스로 실행하는 키프레임 애니메이션으로 설명된다. 이 글은 shorthand의 기본값, animation-fill-mode, timing function, 그리고 display 같은 속성에 대한 allow-discrete도 다룬다.
코딩과 AI의 중요한 변화를 짧게 읽고, 다음에 무엇을 배울지 확인하세요.
한 제작자가 알림 같은 기능을 덜어내고 시간을 보여주는 데 집중한 원형 스마트워치를 만들었다. 이 프로젝트는 RP2040 마이크로컨트롤러가 들어간 Waveshare 원형 터치 LCD, 3.7V 배터리, 3D 프린트 케이스, 애플 워치 스트랩을 사용한다. 제작자는 Pico SDK로 개발했고, 커스텀 터치 함수와 밝기 조절, 스톱워치, 화면 회전, 절전 모드를 추가했다.
Scrimba가 Flexbox를 한 방향을 기준으로 배치하는 CSS 레이아웃 시스템으로 설명합니다. 주축과 교차축부터 각 속성, 자주 쓰는 레이아웃 예제와 실수하기 쉬운 지점까지 차례로 다룹니다. CSS Grid를 선택하는 편이 나은 경우도 함께 비교합니다.