상세 컨텐츠

본문 제목

[HTML5&CSS3] 변형 속성

Web/HTML5 & CSS3

by 클리엘 클리엘 2019. 12. 19. 04:24

본문

CSS3에서는 변형 속성을 통해 간단한 애니메이션을 구현할 수 있습니다. 우선 변경 속성이 어떻게 사용되는지부터 간단하게 알아보겠습니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
</style>
</head>
<body>
    <div>Hello, World!</div>
</body>
</html>

위 예제는 div에 간단한 스타일을 적용한 예제입니다. 이 상태에서 div에 마우스를 올리면 색상이 변하도록 스타일을 다음과 같이 추가합니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}

div:hover {
    background-color:black;
}
</style>

그럼 div에 마우스를 올릴 때마다 색상이 검은색으로 바뀔 것입니다.

 

이제 애니메이션 구현을 위해 transition-duration 속성을 추가하고 값을 3s로 주겠습니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
   
   transition-duration: 3s;
}

div:hover {
    background-color:black;
}
</style>

이렇게 하면 div에 마우스를 올릴 때 색상이 바뀌는 건 똑같지만 3초 정도의 지연시간이 적용되어 색상이 서서히 바뀌는 걸 확인할 수 있습니다.

 

이와 같은 변경 속성은 다음과 같은 속성에 적용되며

 

위치관련 top, left, bottom, right
크기관련 width, height
여백관련 margin, padding
테두리 관련 border-width, border-radius, border-color
색상 관련 color, background-color
투명도 관련 opacity
변환 처리 transform

 

또한 아래와 같은 변환 속성이 사용될 수 있습니다.

 

transition 모든 transition 속성을 한꺼번에 지정
transition-delay 변환 속성이 적용되기전 지연시간을 지정
transition-duration 변환 속성 적용시간 지정
transition-property 변환 속성이 적용될 속성지정(상단 표 참조)
transition-timing-function 수치 변형 함수 사용

 

여기에서 마지막 transition-timing-function은 좀 더 살펴볼 필요가 있는데 이 속성은 수치 변형 함수를 바꾸는 데 사용됩니다. 기본적으로 CSS3에서는 다음 변형 함수를 기본적으로 사용할 수 있으며

 

ease
linear
ease-in
ease-out
ease-in-out

 

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
   
   transition-duration: 5s;
   transition-timing-function: ease;
}

div:hover {
    background-color:black;
}
</style>

미세한 조절이 필요한 경우 기본함수대신 cubic-bezier함수를 직접 사용할 수도 있습니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
   
   transition-duration: 5s;
   transition-timing-function: cubic-bezier(0, 2, 2, 0);
}

div:hover {
    background-color:black;
}
</style>

실제 변형함수를 적용했을 때 대상 객체가 어떻게 변화하는지는 설명만으로 부족하므로 직접 확인해 보시기 바랍니다.

관련글 더보기

댓글 영역