CSS 스타일링

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* *트랜지션
=>엘리먼트가 변화하는 정도를 제어함 */

.box{
width: 300px;
height: 300px;
background-color: salmon;
transition-duration: 0.5s;
/* =>엘리먼트가 변화할때 시간 부여, s는 초의 약자
=>변화하는 엘리먼트에 적용하면 마우스 올렸을때, 내렸을때 둘다 적용됨 */
transition-timing-function: cubic-bezier(0, 1.07, 0.36, 0.18);
/* =>엘리먼트 가속도 값 부여 */
}

.box:hover{
width: 500px;
height: 500px;
/* background-color: teal; */
/* transition-duration: 1s; */

/* transition-delay: 3s; */
/* =>엘리먼트 변화에 딜레이 적용 */

/* transition-property: width; */
/* =>트랜지션을 적용하고자 하는 속성을 지정함 */
}


</style>
</head>
<body>

<div class="box"></div>

</body>
</html>