CSS 속성 - 전환

전환이란 무엇인가?

transition

: 요소의 전환 효과를 저정하는 단축 속성

transition : 속성명 지속시간 타이밍함수 대기시간;

여기서 지속시간은 필수포함 속성이기 때문에 무조건 입력을 해줘야한다

이렇게 사용된다 하나씩 봐보도록 하자

먼저 기본적으로

지속시간을 1초 정도 부여한 전환효과를 봐보도록 하자

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./transition.css">
</head>
<body>
    <div></div>
</body>
</html>

기본적으로 div태그 하나를 만들어 주었다

CSS

div{
    width: 100px;
    height: 100px;
    background-color: orange;
}

div:hover{
    width: 300px;
    background-color: royalblue;
}

이렇게 사용하여 마우스를 div태그 위에 올렸을 때

width가 300px이 되고 배경색이 파란색으로 바뀌게 하였다