트랜지션 및 호버 효과

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 24번째.

트랜지션(transition)을 사용하면 속성을 즉시 변경하는 대신 일정 시간에 걸쳐 부드럽게 변경할 수 있습니다.

selector {
  transition: property duration timing-function delay;
}

property: 전환(transition)하려는 CSS 속성입니다 (예: background-color, width, opacity).
duration: 전환이 완료되는 데 걸리는 시간입니다 (예: 1초의 경우 1s).

timing-function: 전환이 진행되는 방식 (예: linear, ease, ease-in).
delay: 전환을 시작하기 전에 대기할 시간 (선택 사항).

예를 들어:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

버튼 위에 마우스를 올리면 배경색이 0.3초에 걸쳐 초록색에서 파란색으로 바뀝니다.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

.card에 transition 속성을 추가하여 background-color와 box-shadow의 변경이 ease 타이밍 함수와 함께 0.4초에 걸쳐 부드럽게 일어나도록 하세요.

치트 시트

트랜지션(transition)을 사용하면 속성을 즉시 변경하는 대신 일정 시간에 걸쳐 부드럽게 변경할 수 있습니다.

selector {
  transition: property duration timing-function delay;
}

property: 트랜지션을 적용할 CSS 속성 (예: background-color, width, opacity)
duration: 트랜지션이 완료되는 데 걸리는 시간 (예: 1초의 경우 1s)
timing-function: 트랜지션이 진행되는 방식 (예: linear, ease, ease-in)
delay: 트랜지션을 시작하기 전에 대기하는 시간 (선택 사항)

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.