Interactive의 시작, transition 속성 1/2 - duration, delay
html을 이용해서는 주로 문서의 레이아웃을 구성한다고 이전 포스팅에서 정리를 해보았습니다. 레이아웃은 주로 static한 형태로서의 웹문서의 구성과 배치를 의미하게 되는데요, 보다 생동감 있은 interactive한 움직임을 표현하려면 반드시 transition 속성이 필요하게 됩니다.
transition 속성을 부여하면 html 문서에서는 마치 마법 같은 일이 벌어지기 때문에 많은 사람들이 좋아합니다. 저 또한 역시 그렇습니다. transition을 자유자재로 다룬다는 것은 아주 흥미로운 일이 되기 때문입니다.
이번 포스팅에서는 다채로운 transition의 기본적인 내용들을 함께 살펴보면서, transition 속성에 대한 흥미를 갖도록 하는 데 그 의미가 있겠습니다.
시작 예제코드
아래와 같은 예제코드를 이용하여, 함께 살펴보도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transitions</title>
<style>
.circle {
width: 200px;
height: 200px;
background-color: dodgerblue;
}
.circle:hover {
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<h1>Transitions</h1>
<div class="circle"></div>
</body>
</html>
브라우저를 실행하면,
파란색 사각형이 나타나게 될텐데요, 마우스를 hover 해보면 .circle:hover에 의해서 빨간색 동그라미로 변하게 됩니다.
여기까지는 이해가 되시죠?
transition: 1s;
자, 그러면 CSS에 아래와 같이 딱1줄로 transition 속성을 추가해보겠습니다.
.circle {
width: 200px;
height: 200px;
background-color: dodgerblue;
transition: 1s;
}
transition: 1s; 라인을 추가했습니다. 의미는 'transition을 1초 부여한다'라는 것입니다.
브라우저를 고침하고 사각형 위에 마우스를 올려봅니다.(hover)
1초 동안에 걸쳐, 파란색 → 빨간색으로 색상이 변하게 되는 동시에 border-radius에 의해 원형으로 변하게 됩니다.
즉, transition을 주지 않았을 때는 휙~ 휙~ 변화가 일어나던 것이, 마치 타임라인을 가지고 있는 것처럼 시작 형태와 종료 형태 사이에 위치하는 변화를 보여주게 되는 것입니다. 신기하지 않은가요?
1s라고 표기된 부분을 다양한 시간값을 주면서 변화하는 시간을 조절해줄 수 있습니다.
transition 속성에 처음 등장하는 숫자는 duration값이라 할 수 있겠습니다.
transition을 적용하는 위치
참고로, transition: 1s;를 .circle에 주었다는 점을 주목해주세요. 만약 .circle: hover에 transition: 1s;를 주었다면 어떤 현상이 벌어질까요?(예측을 해본 후, 직접 한번 해보세요^^)
가상선택자인 :hover 에 transition: 1s;를 적용했다면, 마우스를 올렸을 때는 제대로 동작하는 것처럼 보이지만, 마우스를 hover 상태가 아니도록 하는 경우에는 휙~ 하고 사각형 상태로 돌아오게 될 것입니다. 잘 생각해보면 당연하겠죠? hover 상태에서만 transition이 일어나게 되는 것이니까요.
이러한 차이점이 있기 때문에, .circle 상태에 transition을 적용했던 것이었습니다.
한편, transition 속성은 앞에서 살펴본 것처럼 CSS를 통해서 직접 부여해줄 수도 있겠지만, Javascript를 이용해서 class를 붙였다 떼었다 하는 방식을 통해서 좀더 다양한 방법을 통해 transition을 제어할 수 있게 됩니다. 그야말로 응용방법은 무궁무진한 것이죠.
transition: property-name
transition 속성은 기본적으로 property-name을 지정하지 않으면 'all'이 디폴트로 적용이 됩니다.
따라서, transition: 1s;라는 의미는 transition: all 1s; 라는 의미와 동일합니다.
특정 property에만 transition을 적용하려면, 아래와 같은 방법을 활용하면 됩니다.
CSS를 아래와 같이 수정해봅시다.
<style>
.circle {
width: 200px;
height: 200px;
background-color: dodgerblue;
transition: background-color 3s;
}
.circle:hover {
border-radius: 50%;
background-color: red;
}
</style>
실행을 해보면 어떤 일이 벌어질까요?
마우스를 올려보면(hover) 즉각 원모양으로 변하는데, 가만 살펴보면 background-color 값만 3초에 걸쳐 서서히 변화하게 됩니다. 결과를 보고 CSS 코드를 살펴보면 바로 이해가 되실 겁니다.
transition: delay
CSS 중에서 transition 부분을 다음과 같이 수정해봅니다.
transition: background-color 3s 1s;
hover를 하면 재깍 원으로 변하지만, background-color는 1초 후에 delay되어 변화하기 시작합니다. 즉, transition에 주었던 두번 째 시간은 delay 시간을 의미하게 되는 것입니다.
property-name을 여러개 적용할 때는 아래와 같은 방법으로 구분하여 사용할 수 있습니다.
transition: background-color 3s, border-radius 1s;
특정하고 싶은 property들을 얼마든지 열거해서 세세하게 제어할 수 있게 되는 것입니다.
하지만 뭐 대부분은 transition: all 1s; 와 같은 형식으로 사용하는 경우가 많습니다.
마치며
이번 포스팅에서는 transition의 동작원리에 대해 기초적인 내용을 간단하게 살펴보며 정리해보았습니다. 기초가 탄탄해야 응용이 가능한 것처럼, 복잡해보이던 transition 속성도 원리를 이해하고 나면 점점 더 복잡한 내용들을 스스로 분석할 수 있게 될 것입니다.
transition 속성을 사용하고 안 하고에 따라 웹사이트의 인터렉티브함은 하늘과 땅 차이로 벌어진다는 느낌을 지울 수 없습니다. transition을 자유자재로 활용하는 기초 근육을 키운다는 생각으로 위 내용들을 찬찬히 한번 곱씹어 보시기 바랍니다.
다음 번 포스팅에서는 transition 속성에서 좀 더 복잡하게 느껴질 수 있는, timing function에 대해서 마저 정리를 해보는 시간을 갖도록 하겠습니다.
오늘도 즐거운 코딩생활, 즐코딩
KINcoding
'HTML+CSS' 카테고리의 다른 글
| Transform - rotate(), scale(), translate(), skew() (0) | 2023.03.29 |
|---|---|
| Interactive의 시작, transition 속성 2/2 - timing function (0) | 2023.03.24 |
| Position 속성 정리(static, relative, absolute, fixed, sticky 비교) (0) | 2023.03.21 |
| em과 rem의 차이점 (0) | 2023.02.28 |
| float를 이용한 탭 메뉴 버튼 만들기 - Part 1 (0) | 2023.02.12 |
댓글