반응형
CSS에서 Transition(트렌지션)이란?
어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법이다.
1. 기본 코딩
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
결과
버튼 완성!
2. hover 효과 적용해보기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
}
a:hover {
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
결과
3. 이제 transtion을 써보자~!
transition은 state가 없는 요소(root) 에 적어야 한다.
(ex. 위 코딩에서 hover(state)가 있는 쪽이 아니라 없는 쪽에 써야함)
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 10s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
결과
아주 스무스하게 변하는구만 ㅎㅎ 👍
4. 살짝 다르게 transition 써보기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 10s ease-in-out, color 5s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
</html>
결과
transition이 hover에 있는 background-color를 찾고
background-color가 hover 일 때 달라져 있으면
그 변화를 애니메이션으로 바꾸는 것이다.
반응형
'2. CSS' 카테고리의 다른 글
| CSS Transform 3D 회전 (rotateY, rotateX) (1) | 2024.12.09 |
|---|---|
| CSS Transition(트렌지션) 종류 (0) | 2024.12.03 |
| CSS color 컬러의 종류 / :root { --main color: ;} (0) | 2024.12.03 |
| CSS selection (문구 드래그 시 색상 변경하기) (0) | 2024.11.30 |
| CSS ::placeholder (플레이스홀더 문구 색상 바꾸기) (0) | 2024.11.30 |