웹 페이지를 디자인할 때 요소에 전환을 추가할 수 있습니다. 특정 조건이 충족되면 전환이 트리거됩니다. 예를 들어 사용자가 버튼 위로 마우스를 가져갈 때 버튼의 배경색이 변경되기를 원할 수 있습니다.
CSS 전환 속성과 해당 하위 속성을 사용하여 HTML 요소의 속성이 변경될 때 애니메이션 효과를 만들 수 있습니다.
이 자습서에서는 몇 가지 예를 통해 CSS 전환의 기본 사항과 전환 속성을 사용하여 CSS 애니메이션을 만드는 방법에 대해 설명합니다. 이 튜토리얼을 마치면 CSS 전환 및 전환 속성 작업의 전문가가 될 것입니다.
CSS 전환
기본적으로 CSS 속성 값이 변경되면 웹 페이지에서 변경 사항을 즉시 적용합니다.
예를 들어 버튼 위에 커서가 있을 때 활성화되는 스타일 변경을 생성하면 사용자가 버튼 위에 커서를 가져가는 즉시 새 스타일이 적용됩니다. 사용자의 커서가 버튼에서 멀어지는 즉시 버튼은 기본 스타일로 즉시 되돌아갑니다.
CSS 전환 기능은 두 스타일 간의 부드러운 전환을 만드는 데 사용됩니다. transition 속성을 사용하면 웹 페이지가 두 스타일 간의 변경 사항을 애니메이션으로 표시합니다. 이 기능을 사용하면 더 미학적으로 기분 좋은 스타일 변경을 만들 수 있습니다.
CSS 전환에는 두 가지 구성 요소가 있습니다. 이것들은:
- 요소에 적용하려는 새 CSS 속성입니다.
- 전환 기간.
기본적으로 전환 지속 시간은 0초로 설정됩니다. 즉, 지속 시간을 정의하지 않으면 지정한 전환 효과가 적용되지 않습니다. 즉, 스타일 변경이 즉시 발생합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
CSS 전환 예시
웹사이트용 버튼을 디자인하고 있으며 사용자가 커서로 버튼을 가리킬 때 버튼의 스타일이 변경되기를 원한다고 가정합니다. 사용자가 커서로 버튼 위로 마우스를 가져가지 않으면 버튼에 파란색 테두리가 있어야 합니다. 그런 다음 사용자가 커서를 버튼 위로 가져가면 버튼의 배경색이 기본 색상(흰색)에서 파란색으로 변경되어야 합니다.
두 상태에서 버튼은 높이가 100픽셀, 너비가 100픽셀이어야 하고 버튼의 텍스트가 중앙에 있어야 합니다. 두 상태 간의 전환은 2초가 걸립니다.
이 버튼을 만드는 데 사용할 코드는 다음과 같습니다.
index.html
<div><p>This is a button.</p></div>
styles.css
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s;
}
div:hover {
background-color: #33CCFF;
}
코드는 다음을 반환합니다.
[Code result here]
코드에서 버튼은 너비가 100픽셀, 높이가 100픽셀이어야 하고 버튼의 내용이 가운데 정렬되어야 한다고 명시했습니다. 또한 버튼에 3픽셀 너비의 파란색 실선 테두리를 지정했습니다.
버튼 위에 커서를 가져가면 배경색이 파란색으로 변경되는 것을 볼 수 있습니다. 커서를 다른 곳으로 옮기면 버튼의 배경색이 다시 흰색으로 바뀝니다.
이 예에서는 배경색 속성에 대해 2초의 전환 기간을 지정했습니다. 즉, 사용자가 커서로 버튼 위로 마우스를 가져가면 버튼의 배경색이 흰색에서 파란색으로 완전히 변경되는 데 2초가 걸립니다. 즉, 변경이 즉각적이지 않습니다.
마찬가지로, 사용자가 버튼에서 커서를 옮기면 배경색이 2초 동안 파란색에서 흰색으로 바뀝니다. 따라서 페이지의 커서 위치에 따라 새 배경색으로 2초 동안 매끄럽게 전환할 수 있습니다.
그런 다음 사용자가 버튼 위에 커서를 놓을 때 트리거할 스타일을 지정했습니다. :hover 선택기를 사용하여 이 작업을 수행했습니다. 프로그램은 사용자가 커서로 해당 요소 위로 마우스를 가져갈 때 :hover 선택기에 정의된 스타일을 요소에 적용합니다.
CSS :hover 선택기에 대해 자세히 알아보려면 CSS :hover 선택기에 대한 가이드를 읽어보세요.
전환 속도 곡선
transition-timing-function 속성을 사용하면 전환 효과의 속도 곡선을 지정할 수 있습니다. 다음은 이 속성에서 허용하는 몇 가지 값입니다.
값(및 해당 설명)
transition-timing-function 속성
| 값 | 전환 속도 곡선에 대한 설명 |
| 편리함 | 느린 시작, 빠른 가속, 느린 끝 (기본값) |
| 이즈인 | 느린 시작 후 빠른 가속 |
| 이즈아웃 | 빠른 시작 후 느린 종료 |
| 선형 | 처음부터 끝까지 동일한 속도 |
| 입방 베지어(n,n,n,n) | 입방-베지어 전환 |
보시다시피, 이 표의 첫 번째 값인 "ease"가 기본값입니다. 즉, transition-timing-function 속성에 대한 값을 지정하지 않거나 전환 스타일을 지정할 때 속성을 전혀 지정하지 않으면 웹 페이지에서 기본적으로 이 값을 사용합니다.
transition-timing-function 속성이 어떻게 작동하는지 설명하기 위해 마지막 예제의 코드를 살펴보겠습니다. 우리의 마지막 예에서 우리는 "이용성" 속도 곡선을 지정했습니다. 이것은 버튼의 스타일이 느린 시작, 빠른 가속 및 느린 끝으로 한 스타일에서 다른 스타일로 변경됨을 의미합니다.
그러나 선형 전환을 사용하여 버튼이 새 배경색으로 전환되기를 원한다고 가정합니다. "easy-in" 값을 지정하여 그렇게 할 수 있습니다. 이에 대한 코드는 다음과 같습니다.
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s linear 0.5s;
}
div:hover {
background-color: #33CCFF;
}
코드는 다음을 반환합니다.
[Result of code]
우리의 스타일은 마지막 예제에서 사용한 것과 거의 동일합니다. 유일한 차이점은 ease를 지정하는 대신 전환, 우리는 linear를 지정합니다 이행. 즉, 전환 속도가 트리거되면 일정하게 유지됩니다.
전환 지연
transition-delay 속성을 사용하면 전환 효과에 대한 지연을 지정할 수 있습니다. transition-delay 속성에 할당된 값은 초 단위여야 합니다.
1초 지연 후 버튼이 새 배경색으로 변경되기를 원한다고 가정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color ease-in 0.5s;
transition-delay: 1s;
}
div:hover {
background-color: #33CCFF;
}
코드는 다음을 반환합니다.
[Code result here]
코드에서 전환 지연을 1초로 지정합니다. 따라서 전환은 사용자가 버튼 위에 커서를 올리기 시작한 후 1초가 지나야 시작됩니다.
여러 전환 적용
전환으로 작업할 때 둘 이상의 전환 효과가 발생하기를 원할 수 있습니다.
여러 전환을 지정하고 각 전환을 쉼표로 구분하여 이를 수행할 수 있습니다. 각 전환에는 지속 시간, 속도 곡선 및 일반 전환이 사용하는 기타 속성이 있을 수 있습니다.
예를 들어 앞의 버튼 예제를 살펴보겠습니다. 버튼의 배경색을 파란색으로 변경하고 버튼의 테두리 색상도 분홍색으로 변경하고 싶다고 가정합니다. 둘 다 사용자가 커서로 요소를 가리킬 때 발생해야 합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s, border 2s;
}
div:hover {
background-color: #33CCFF;
border: solid 3px lightpink
}
코드는 다음을 반환합니다.
[Code result here]
버튼 위로 마우스를 가져가면 배경색이 파란색으로 바뀌고 테두리 색이 연한 분홍색으로 바뀝니다. 이 전환을 완료하는 데 2초가 걸립니다.
전환 목록에서 각 전환이 나타나는 순서는 전환이 표시되는 방식에 영향을 주지 않습니다.
CSS 전환 장형과 약형
위의 예에서는 transition 속성을 사용하여 전환 스타일을 지정했습니다. transition 속성은 CSS에서 transition을 정의하는 데 사용되는 4개의 개별 하위 속성의 약어입니다. 이 네 가지 하위 속성은 다음과 같습니다.
- 전환 속성 :전환 효과를 적용할 속성을 설정합니다.
- 전환 기간 :전환이 지속되는 시간을 나타냅니다.
- 전환 타이밍 기능 :전환 속도를 정의합니다.
- 전환 지연 :전환 시작을 지연합니다.
위의 예를 사용하여 이러한 속성이 작동하는 방식을 보여줍시다. 파란색 테두리, 기본(흰색) 배경색, 가운데 정렬된 텍스트가 있는 100px x 100px 버튼을 생성한다고 가정합니다. 버튼의 배경색은 사용자가 커서로 버튼을 가리킬 때 파란색으로 전환되어야 합니다. 이 전환은 2초가 소요되어야 하며 사용자가 커서로 버튼 위로 마우스를 가져간 후 0.5초 후에 시작되어야 합니다.
다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
div:hover {
background-color: #33CCFF;
}
코드는 다음을 반환합니다.
[Result of code]
보시다시피 파란색 배경색으로 전환되는 버튼을 만들었습니다. 이러한 전환은 사용자가 버튼 위로 커서를 이동하거나 버튼에서 멀어질 때 각각 발생합니다.
코드에서 전환에 대한 네 가지 전환 하위 속성(transition-property, transition-duration, transition-timing-function 및 transition-delay)을 지정했습니다. 또한 이전 예제의 스타일을 사용하여 버튼의 높이, 너비, 텍스트 정렬 및 테두리 색상을 설정했습니다.
또는 전환 속기를 사용할 수 있습니다. 약어를 사용하면 이전에 사용한 네 줄 대신 한 줄의 코드에서 CSS 전환을 지정할 수 있습니다. 전환 약어의 구문은 다음과 같습니다.
transition:transition-property transition-duration transition-timing-function transition-delay;
위에 지정된 값의 순서는 전환을 만들 때 사용해야 하는 순서입니다.
전환 속기가 작동하는 방식을 설명하기 위해 예를 사용하겠습니다. 다음은 전환 약식을 사용하여 이전에 버튼을 만드는 데 사용할 코드입니다.
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s ease 0.5s;
}
div:hover {
background-color: #33CCFF;
}
코드는 다음을 반환합니다.
[Code result here]
보시다시피 이전 예에서와 동일한 스타일을 여기에 적용했습니다. 유일한 차이점은 각 개별 하위 속성을 자체 줄에 나열하여 전환 스타일을 지정하는 대신 전환 약식을 사용했다는 것입니다.
결론
CSS 전환 속성은 스타일 간에 발생할 전환 유형을 정의하는 데 사용됩니다. transition 속성에는 transition-property, transition-delay, transition-timing-function 및 transition-duration의 4가지 약식 속성이 있습니다. 이러한 하위 속성을 사용하여 전환 스타일의 요소를 개별적으로 설정할 수 있습니다.
예제를 통해 이 자습서에서는 transition 속성과 네 가지 하위 속성을 사용하여 CSS에서 transition을 만드는 방법을 설명했습니다. 이제 전문 웹 개발자처럼 CSS 전환을 만들 준비가 되었습니다!