여러 속성 전환
쉼표로 구분한 값을 사용해 여러 CSS 속성에 동시에 전환을 적용합니다.
여러 속성 전환은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
여러 속성을 전환하는 이유
실제 사용자 인터페이스 상호 작용에서는 마우스를 올릴 때 배경색, 그림자, 크기 등 여러 속성이 동시에 변경되는 경우가 많습니다. CSS는 속성마다 독립적인 이징과 지속 시간을 지정할 수 있도록 지원합니다.
쉼표로 구분한 전환
쉼표를 사용하여 여러 전환을 나열하십시오. 각 항목은 하나의 속성에 독립적으로 적용됩니다.
<div class="card">Card</div>속성별로 다른 지속 시간 지정
각 속도에 다른 지속 시간을 지정하면 여러 층이 겹쳐 보이는 자연스러운 느낌을 만들 수 있습니다.
<button class="btn">Hover-ready button</button>속성별로 다른 이징 지정
이징 함수를 조합하여 각 속성에 어울리는 움직임을 만드십시오.
<div class="modal">Modal content</div>transition: all의 단점
transition: all을 사용하면 변경되는 모든 속성에 동일한 타이밍이 적용됩니다. 이로 인해 즉시 바뀌어야 하는 속성(예: 표시 상태나 위치 변경)에 원하지 않는 애니메이션이 발생할 수 있습니다.
중단 가능한 전환
CSS 전환은 중단할 수 있습니다. 전환 중간에 마우스를 올린 상태가 끝나면 전환은 최종 상태가 아니라 현재 애니메이션 값에서 반대 방향으로 진행됩니다. 따라서 갑작스러운 점프 없이 부드럽게 되돌아갑니다.
진입과 이탈 조정
:hover 상태에서 전환을 재정의하면 마우스를 올릴 때와 뗄 때 서로 다른 지속 시간을 사용할 수 있습니다.
<div class="card demo-active">Card</div>지연 시간으로 단계적 표시 만들기
형제 요소에 점점 늘어나는 지연 시간을 추가하여 요소가 순차적으로 나타나는 효과를 만드십시오.
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>단계적 표시를 위한 CSS 사용자 지정 속성
JavaScript 또는 HTML에서 설정한 CSS 사용자 지정 속성으로 단계적 표시의 지연 시간을 지정하십시오.
<div class="item">Item</div>전환과 애니메이션 비교
두 상태의 변경(대기 상태 → 마우스를 올린 상태)에는 전환을 사용하십시오. 여러 단계로 구성된 순서, 반복 효과 또는 자동으로 시작되는 애니메이션에는 @keyframes 애니메이션을 사용하십시오.
Will-change 최적화
애니메이션이 적용될 속성을 브라우저에 미리 알려 사전 최적화를 수행하게 할 수 있습니다. 다만 GPU 메모리를 사용하므로 신중하게 사용하십시오.
<div class="card">Card</div>빠른 확인
카드의 기본 상태에 transition: background 150ms, transform 250ms가 지정되어 있습니다. 애니메이션 중 사용자가 커서를 빠르게 바깥으로 이동하면 어떤 일이 발생합니까?
복습
쉼표로 구분된 전환을 사용하면 각 속성에 고유한 지속 시간, 완화 함수, 지연 시간을 지정할 수 있습니다. 의도하지 않은 속성까지 애니메이션될 수 있으므로 transition: all은 피해야 합니다. 전환은 중단할 수 있으며 현재 위치에서 자연스럽게 반전됩니다. 여러 요소에 시간차를 두고 효과를 적용하려면 지연 시간을 사용하세요.
자주 묻는 질문
“여러 속성 전환” 강의는 무료인가요?
네 — “여러 속성 전환” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“여러 속성 전환”에서 뭘 배우나요?
쉼표로 구분한 값을 사용해 여러 CSS 속성에 동시에 전환을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“여러 속성 전환” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.