클릭하고 싶게 만드는 차이#
버튼에 마우스를 올렸을 때 색이 바뀌거나, 카드에 마우스를 올리면 살짝 떠오르는 효과. 이런 작은 인터랙션이 사이트를 훨씬 생생하게 만듭니다.
CSS만으로도 놀라울 정도로 다양한 효과를 만들 수 있습니다.
:hover — 마우스를 올렸을 때#
CSS
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을 주면 부드럽게 전환됩니다.
CSS
button {
background-color: #0070f3;
transition: background-color 0.3s ease; /* 0.3초 동안 부드럽게 */
}
button:hover {
background-color: #0051cc;
}transition 문법#
CSS
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 — 요소 변형#
요소를 이동, 회전, 확대/축소합니다. 레이아웃에 영향을 주지 않아 성능이 좋습니다.
CSS
/* 이동 */
.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: 버튼 효과#
CSS
.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 효과#
CSS
.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: 링크 밑줄 애니메이션#
CSS
.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: 이미지 줌 효과#
CSS
.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 — 그림자#
CSS
.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 키를 눌러 이동할 때도 어떤 요소가 선택됐는지 보여줘야 합니다.
CSS
button:focus,
input:focus,
a:focus {
outline: 2px solid #0070f3;
outline-offset: 2px;
}outline: none만 쓰는 건 키보드 사용자의 접근성을 해치므로 항상 대체 스타일과 함께 사용하세요.
직접 해보기 ✏️#
HTML
<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) 를 배웁니다.
