컴포넌트 만드는 연습을 시작합니다. 지난 챕터에서 만든 예제를 활용해 반복 사용되는 카드들을 컴포넌트로 만들고, Variable을 생성해 적용하는 방법을 배웁니다. 지난 예제를 못 하신 분들은 수업 자료에서 템플릿을 복사해 가져가세요.
컴포넌트 생성 방법과 Variable 적용이 핵심입니다. 카드 컴포넌트를 만들고 Hover 인터랙션을 추가한 다음, Variable 메커니즘을 이해하고 이미지와 텍스트에 Variable을 적용합니다. 링크도 Variable로 만들어 카드마다 다른 페이지로 연결할 수 있습니다.
Variant를 추가해 크기가 다른 카드를 하나의 컴포넌트로 관리하는 방법도 배웁니다. 고급 인터랙션으로 카드가 위로 살짝 올라가는 효과를 만들고, 스타일 복사 단축키(Cmd+Opt+C/V)도 활용합니다. 브레이크포인트별로 컴포넌트를 관리하는 팁과 자동 매칭 기능도 확인하세요.
중후반부의 카드 상승 효과는 다음 챕터에서 Effect를 배우면 더 쉽게 구현할 수 있지만, 컴포넌트 안에서 레이어 위치를 이동시키고 상위 레이어를 추가하는 방법을 알아두면 유용합니다. 수업 자료에 완성본이 있으니 따라하다 막힐 때 설정값을 직접 비교해보세요.
chapter1-1
Item Counter 🔄
chapter1-2
Item Counter 🔄
chapter1-3
Item Counter 🔄
chapter2-1
Item Counter 🔄
chapter2-2
Item Counter 🔄
chapter2-3
Item Counter 🔄
chapter2-4
Item Counter 🔄
chapter2-5
Item Counter 🔄
chapter2-6
Item Counter 🔄
chapter2-7
Item Counter 🔄
chapter2-8
Item Counter 🔄
chapter3-1
Item Counter 🔄
chapter3-2
Item Counter 🔄
chapter3-3
Item Counter 🔄
chapter3-4
Item Counter 🔄
chapter3-5
Item Counter 🔄
chapter3-6
Item Counter 🔄
chapter3-7
Item Counter 🔄
chapter3-8
Item Counter 🔄
chapter4-1
Item Counter 🔄
chapter4-2
Item Counter 🔄
chapter4-3
Item Counter 🔄
chapter4-4
Item Counter 🔄
chapter4-5
Item Counter 🔄
chapter4-6
Item Counter 🔄
chapter4-7
Item Counter 🔄
chapter4-8
Item Counter 🔄
chapter4-9
Item Counter 🔄
chapter4-10
Item Counter 🔄
chapter5-1
Item Counter 🔄
chapter5-2
Item Counter 🔄
chapter5-3
Item Counter 🔄
chapter5-4
Item Counter 🔄
chapter5-5
Item Counter 🔄
chapter5-6
Item Counter 🔄
chapter6-1
Item Counter 🔄
chapter6-2
Item Counter 🔄
chapter6-3
Item Counter 🔄
chapter6-4
Item Counter 🔄
chapter6-5
Item Counter 🔄
chapter6-6
Item Counter 🔄
chapter6-7
Item Counter 🔄
chapter7-1
Item Counter 🔄
chapter7-2
Item Counter 🔄
chapter7-3
Item Counter 🔄
chapter7-4
Item Counter 🔄
chapter7-5
Item Counter 🔄
chapter7-6
Item Counter 🔄
chapter7-7
Item Counter 🔄
chapter8-1
Item Counter 🔄
chapter8-2
Item Counter 🔄
chapter8-3
Item Counter 🔄
chapter9-1
Item Counter 🔄
chapter9-2
Item Counter 🔄
chapter9-3
Item Counter 🔄
chapter9-4
Item Counter 🔄
chapter9-5
Item Counter 🔄
chapter1-1
Item Counter 🔄
chapter1-2
Item Counter 🔄
chapter1-3
Item Counter 🔄
chapter2-1
Item Counter 🔄
chapter2-2
Item Counter 🔄
chapter2-3
Item Counter 🔄
chapter2-4
Item Counter 🔄
chapter2-5
Item Counter 🔄
chapter2-6
Item Counter 🔄
chapter2-7
Item Counter 🔄
chapter2-8
Item Counter 🔄
chapter3-1
Item Counter 🔄
chapter3-2
Item Counter 🔄
chapter3-3
Item Counter 🔄
chapter3-4
Item Counter 🔄
chapter3-5
Item Counter 🔄
chapter3-6
Item Counter 🔄
chapter3-7
Item Counter 🔄
chapter3-8
Item Counter 🔄
chapter4-1
Item Counter 🔄
chapter4-2
Item Counter 🔄
chapter4-3
Item Counter 🔄
chapter4-4
Item Counter 🔄
chapter4-5
Item Counter 🔄
chapter4-6
Item Counter 🔄
chapter4-7
Item Counter 🔄
chapter4-8
Item Counter 🔄
chapter4-9
Item Counter 🔄
chapter4-10
Item Counter 🔄
chapter5-1
Item Counter 🔄
chapter5-2
Item Counter 🔄
chapter5-3
Item Counter 🔄
chapter5-4
Item Counter 🔄
chapter5-5
Item Counter 🔄
chapter5-6
Item Counter 🔄
chapter6-1
Item Counter 🔄
chapter6-2
Item Counter 🔄
chapter6-3
Item Counter 🔄
chapter6-4
Item Counter 🔄
chapter6-5
Item Counter 🔄
chapter6-6
Item Counter 🔄
chapter6-7
Item Counter 🔄
chapter7-1
Item Counter 🔄
chapter7-2
Item Counter 🔄
chapter7-3
Item Counter 🔄
chapter7-4
Item Counter 🔄
chapter7-5
Item Counter 🔄
chapter7-6
Item Counter 🔄
chapter7-7
Item Counter 🔄
chapter8-1
Item Counter 🔄
chapter8-2
Item Counter 🔄
chapter8-3
Item Counter 🔄
chapter9-1
Item Counter 🔄
chapter9-2
Item Counter 🔄
chapter9-3
Item Counter 🔄
chapter9-4
Item Counter 🔄
chapter9-5
Item Counter 🔄
