hover 효과와 transition — 페이지에 생동감 불어넣기

클릭하고 싶게 만드는 차이

버튼에 마우스를 올렸을 때 색이 바뀌거나, 카드에 마우스를 올리면 살짝 떠오르는 효과. 이런 작은 인터랙션이 사이트를 훨씬 생생하게 만듭니다.

CSS만으로도 놀라울 정도로 다양한 효과를 만들 수 있습니다.

`:hover` — 마우스를 올렸을 때

button {
  background-color: #0070f3;
  color: white;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #0051cc;   /* 더 진한 파란색 */
}

:hover는 마우스가 요소 위에 있을 때만 적용되는 가상 클래스입니다.

`transition` — 부드럽게 변화

transition 없이는 색이 순간적으로 확 바뀝니다. transition을 주면 부드럽게 전환됩니다.

button {
  background-color: #0070f3;
  transition: background-color 0.3s ease;   /* 0.3초 동안 부드럽게 */
}

button:hover {
  background-color: #0051cc;
}

transition 문법

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

/* 예시 */
transition: background-color 0.2s ease;
transition: all 0.3s ease;            /* 모든 속성에 적용 */
transition: color 0.2s, transform 0.3s; /* 여러 속성 따로 */

타이밍 함수

값	설명
`ease`	느리게 시작 → 빠르게 → 느리게 끝 (기본값)
`linear`	일정한 속도
`ease-in`	느리게 시작
`ease-out`	느리게 끝
`ease-in-out`	느리게 시작 + 느리게 끝

`transform` — 요소 변형

요소를 이동, 회전, 확대/축소합니다. 레이아웃에 영향을 주지 않아 성능이 좋습니다.

/* 이동 */
.box:hover {
  transform: translateY(-4px);   /* 위로 4px 이동 */
  transform: translateX(10px);   /* 오른쪽으로 10px */
  transform: translate(10px, -4px); /* 오른쪽 10, 위로 4 */
}

/* 확대/축소 */
.image:hover {
  transform: scale(1.05);   /* 5% 확대 */
  transform: scale(0.95);   /* 5% 축소 */
}

/* 회전 */
.icon:hover {
  transform: rotate(45deg);   /* 45도 회전 */
}

실전 hover 효과 패턴

패턴 1: 버튼 효과

.btn {
  background-color: #0070f3;
  color: white;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: #0051cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.4);
}

.btn:active {
  transform: translateY(0);   /* 클릭 시 원위치 */
}

패턴 2: 카드 hover 효과

.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

패턴 3: 링크 밑줄 애니메이션

.fancy-link {
  color: #0070f3;
  text-decoration: none;
  position: relative;
}

.fancy-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;                  /* 처음엔 너비 0 */
  height: 2px;
  background-color: #0070f3;
  transition: width 0.3s ease;
}

.fancy-link:hover::after {
  width: 100%;               /* hover 시 너비 100%로 */
}

패턴 4: 이미지 줌 효과

.image-wrap {
  overflow: hidden;           /* 넘치는 부분 숨김 */
  border-radius: 8px;
}

.image-wrap img {
  width: 100%;
  transition: transform 0.4s ease;
}

.image-wrap:hover img {
  transform: scale(1.08);
}

`box-shadow` — 그림자

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 문법: x이동 y이동 흐림반경 번짐반경 색상 */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.3);  /* 포커스 링 */

`:focus` — 키보드 접근성

마우스 없이 키보드로 Tab 키를 눌러 이동할 때도 어떤 요소가 선택됐는지 보여줘야 합니다.

button:focus,
input:focus,
a:focus {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

outline: none만 쓰는 건 키보드 사용자의 접근성을 해치므로 항상 대체 스타일과 함께 사용하세요.

직접 해보기 ✏️

<div class="cards">
  <div class="card">
    <h3>카드 제목</h3>
    <p>카드 내용입니다.</p>
    <button class="btn">자세히 보기</button>
  </div>
  <div class="card">
    <h3>두 번째 카드</h3>
    <p>두 번째 카드 내용입니다.</p>
    <button class="btn">자세히 보기</button>
  </div>
</div>

목표:

.card : hover 시 위로 살짝 올라가는 효과 + 그림자
.btn : hover 시 배경색 변경 + 부드러운 transition
모든 transition은 0.2~0.3초

정리

속성	역할
`:hover`	마우스 오버 시 스타일
`transition`	부드러운 스타일 전환
`transform: translateY()`	위아래 이동
`transform: scale()`	확대/축소
`box-shadow`	그림자 효과
`:focus`	키보드 포커스 스타일

다음 편에서는 코드를 더 유연하게 만드는 CSS 변수(Custom Properties) 를 배웁니다.