40일차
CSS 라이브러리, 테일윈드 챕터 6 : 호버효과
8강 이미지 호버 효과
문제 설명
HTML과 CSS를 별도로 작성해 버튼 디자인을 구현하고자 했으나,
버튼마다 스타일이 중복되고 유지보수가 어렵고, 반응형 설계도 고려되지 않음.
디자인 재사용성과 속도가 떨어짐.
해당 문제
- 버튼 색상, 마진, 폰트 등을 직접 작성해야 함
- 일관성 없는 스타일 작성 위험
- hover 효과, 반응형까지 고려하면 코드가 길어짐
정답코드 설명
Tailwind CSS를 사용해 HTML 태그에 클래스만 붙여서 버튼 스타일을 구현함.
일관된 디자인을 유지하면서도 코드 양을 줄이고, 확장성과 유지보수 효율성을 높임.
-HTML-
<button class="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
버튼A
</button>
<button class="btn bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-2">
버튼B
</button>
btn이라는 공통 클래스 외에도 유틸리티 클래스(bg-, hover:, text-, py-, px-, rounded)를 조합해 스타일을 빠르게 적용함- Tailwind를 HTML 안에서 직접 활용함으로써 빠른 시각적 결과 확인 가능
문제 vs 정답 비교표
| 항목 | 시작 코드 (문제) | 정답 코드 (Tailwind 적용) |
|---|---|---|
| 스타일 적용 방식 | <style> 안에서 개별 클래스 정의 | HTML에서 바로 유틸리티 클래스 조합 |
| 코드량 | 버튼마다 color, padding, border-radius 등을 반복 작성 | bg-, hover:, px-, py- 등으로 간결하게 처리 |
| 유지보수 | 색상/폰트 변경 시 CSS 전체 수정 필요 | 클래스명만 변경하면 즉시 반영 가능 |
| 반응형 확장성 | media query 직접 작성 필요 | md:, lg: 접두어로 간단하게 반응형 처리 가능 |
| 클래스 재사용 | 불가능하거나 어렵고 클래스명이 많아짐 | btn, rounded, text-white 등 유틸리티 클래스로 조합 가능 |
코드 해석 (Tailwind 중심)
HTML
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
| 클래스명 | 효과 설명 |
|---|---|
bg-blue-500 | 배경색 파랑 (중간 밝기) |
hover:bg-blue-700 | 마우스 올렸을 때 배경색 더 진한 파랑으로 변경 |
text-white | 글자색 흰색 |
font-bold | 글씨 굵게 |
py-2 px-4 | 위아래 0.5rem, 좌우 1rem 패딩 설정 |
rounded | 테두리 둥글게 처리 |
ml-2 | 왼쪽 여백 0.5rem (두 번째 버튼만 적용됨) |
핵심 정리표
| 항목 | 설명 |
|---|---|
| 문제 요약 | 수작업 CSS로 인해 중복, 비효율 발생 |
| 해결 방법 | Tailwind CSS의 유틸리티 클래스로 스타일 구성 |
| 주요 장점 | 빠른 개발, 유지보수 쉬움, 클래스 조합만으로 반응형 대응 가능 |
| 스타일 구조화 | 디자인 시스템화가 되어 있어 팀 작업, 리팩토링에도 적합 |
| 추가 팁 | @apply를 쓰면 Tailwind 클래스 묶어서 CSS처럼 사용 가능 |
한줄 요약
Tailwind CSS는 스타일 재사용과 빠른 프로토타이핑을 위한 유틸리티 중심 프레임워크로, 버튼 스타일링도 HTML 클래스만으로 간단하게 처리 가능하다.
9강 이미지 호버 효과를 테일윈드 방식으로 변경, 1단계, before
문제 설명
기존 CSS 방식으로 이미지에 hover 효과(어두워짐)를 줄 때,
.img-box, .img-box::before등 커스텀 클래스와position, z-index를 써야 하고
구조가 복잡해짐. 유지보수 및 코드 반복 문제가 발생.
정답 코드 설명
Tailwind CSS로 hover 상태에서 opacity, absolute, transition 등을 직접 클래스 조합으로 적용함.
별도 CSS 없이 HTML에 유틸리티 클래스만으로 이미지 위 오버레이 효과 구현 완료.
HTML
<!-- 핵심 구조 -->
<div class="relative w-[300px] h-[200px] overflow-hidden group">
<img class="w-full h-full object-cover" src="https://picsum.photos/id/684/300/200" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition duration-300"></div>
</div>
group 클래스를 부모에 지정하고 group-hover:로 자식에게 hover 효과 전달
absolute + inset-0조합으로 이미지 위에 블랙 배경을 완전히 덮음opacity-0 → opacity-50으로 투명도 전환 효과 주기transition duration-300으로 부드러운 변화 적용
문제 vs 정답 비교표
| 항목 | 시작 코드 (before) | 정답 코드 (Tailwind 방식) |
|---|---|---|
| 스타일 방식 | .img-box, .img-box::before 등 커스텀 클래스 사용 | HTML 태그에 Tailwind 유틸리티 클래스 직접 작성 |
| hover 효과 처리 | CSS에서 :hover::before로 처리 | group-hover:opacity-50 등으로 처리 |
| 포지션 처리 | position: relative + absolute, z-index 수동 지정 필요 | relative, absolute, inset-0로 직관적으로 배치 |
| 유지보수 | 클래스명 수정, 구조 파악 필요 | 클래스 조합만으로 수정 가능, 구조 단순 |
| 애니메이션 | transition 직접 선언 | transition duration-300으로 간단 적용 가능 |
코드 해석
HTML
<div class="relative w-[300px] h-[200px] overflow-hidden group">
핵심 정리표
| 항목 | 설명 |
|---|---|
| 문제 요약 | ::before, position 등 수작업 구조로 이미지 hover 처리 |
| 해결 방법 | Tailwind의 group-hover, absolute, opacity 조합 사용 |
| 주요 장점 | 구조 단순화, 재사용성 증가, transition 포함, JS 없이 인터랙션 구현 가능 |
| 추가 포인트 | 다수 이미지에도 동일 구조 반복 가능, 유지보수 편리 |
한줄 요약
Tailwind CSS는 이미지 hover 효과도 유틸리티 클래스만으로 구현 가능하며, group-hover와 opacity 조합으로 인터랙션을 간결하게 만든다.
10강 이미지 호버 효과를 테일윈드 방식으로 변경, 2단계, 이미지
문제 설명
이미지에 마우스를 올렸을 때 살짝 확대되는 줌(Zoom) 효과를 주고자 함.
기존에는 CSS에서transform: scale();,transition등을 직접 작성해야 하며 구조가 복잡해지고 재사용성이 떨어짐.
정답 코드 설명
Tailwind CSS의 scale, transition, duration, hover: 유틸리티를 조합해
CSS 없이 HTML에서 바로 이미지 확대 효과 구현.
HTML
<div class="relative w-[300px] h-[200px] overflow-hidden group">
<img class="w-full h-full object-cover transform scale-100 group-hover:scale-110 transition duration-300" src="https://picsum.photos/id/684/300/200" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition duration-300"></div>
</div>
문제 vs 정답 비교표
| 항목 | 시작 코드 (1단계) | 정답 코드 (2단계) |
|---|---|---|
| hover 효과 | 오버레이(검정 반투명 배경)만 적용 | 오버레이 + 이미지 확대 모두 적용됨 |
| 이미지 확대 | 없음 (고정 상태) | group-hover:scale-110로 확대 적용됨 |
| 트랜지션 효과 | 오버레이에만 적용 | 이미지 확대와 오버레이 둘 다 transition duration-300으로 적용됨 |
| 유지보수 및 구조 | 클래스로 단순하게 작성됨 | 클래스만 추가하여 확장 가능 |
코드 해석
HTML
<img class="w-full h-full object-cover transform scale-100 group-hover:scale-110 transition duration-300" />
| 클래스명 | 설명 |
|---|---|
w-full h-full object-cover | 부모 크기만큼 채우고, 비율 유지하며 잘림 |
transform scale-100 | 이미지 기본 크기 설정 (100%) |
group-hover:scale-110 | 그룹에 마우스 올렸을 때 110%로 확대 |
transition duration-300 | 확대가 부드럽게 0.3초 동안 진행 |
HTML
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition duration-300"></div>
- 이미지 위에 덮는 반투명 검정 오버레이 (이전 단계와 동일)
핵심 정리표
| 항목 | 설명 |
|---|---|
| 문제 요약 | 이미지 hover 시 확대 효과 구현 필요 |
| 해결 방법 | scale, transform, transition 조합으로 Tailwind에서 처리 |
| 주요 장점 | 애니메이션 포함한 인터랙션도 HTML 클래스만으로 구성 가능 |
| 추가 팁 | group-hover를 사용하면 부모/자식 간 동시 효과 구성도 편리함 |
| 응용 가능 | 카드 확대, 썸네일 효과, 갤러리 등 다양한 곳에 재사용 가능 |
한줄 요약
Tailwind CSS는 이미지 확대 효과도group-hover:scale-110등 유틸리티 조합만으로 간단하게 구현할 수 있다.
11강 이미지 호버 효과를 테일윈드 방식으로 변경, 3단계, after
문제 설명
- 기존 이미지에 마우스를 올렸을 때:어두워짐(반투명 오버레이)+이미지 확대는 구현되어 있음
👉 그러나 설명 텍스트가 등장하는 기능은 없음.
보통 썸네일에 마우스를 올리면 "자세히 보기" 같은 안내 문구가 필요한 경우 많음.
정답 코드 설명
Tailwind의 absolute, flex, text-white, opacity, translate, transition, group-hover 유틸리티 조합으로
hover 시 텍스트 등장 + 이미지 확대 + 오버레이 효과를 모두 구현함.
HTML
<div class="relative w-[300px] h-[200px] overflow-hidden group">
<img class="w-full h-full object-cover transform scale-100 group-hover:scale-110 transition duration-300" src="https://picsum.photos/id/684/300/200" />
<!-- 어두운 오버레이 -->
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition duration-300"></div>
<!-- 텍스트 등장 -->
<div class="absolute inset-0 flex justify-center items-center">
<span class="text-white text-xl opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition duration-300">
자세히 보기
</span>
</div>
</div>
문제 vs 정답 비교표
| 항목 | 이전 단계 코드 (2단계) | 정답 코드 (3단계) |
|---|---|---|
| 확대 효과 | O (group-hover:scale-110) | O (scale-110) 유지 |
| 오버레이 | O (opacity-50) | O (동일) |
| 텍스트 등장 | ✕ 없음 | ✅ opacity + translate 조합으로 등장 애니메이션 추가 |
| 레이아웃 구조 | 이미지 + 오버레이까지만 구성됨 | 오버레이 위에 중앙 정렬된 텍스트 추가 (flex + justify-center) |
| 시각적 완성도 | 중간 수준 | 훨씬 완성도 높은 썸네일 인터랙션 구성 가능 |
코드 해석
HTML
<div class="absolute inset-0 flex justify-center items-center">
- 이미지 위 전체에 텍스트를 위치시키는 레이어
flex justify-center items-center→ 텍스트를 정중앙 정렬
HTML
<span class="text-white text-xl opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition duration-300">
| 클래스명 | 의미 설명 |
|---|---|
text-white text-xl | 흰색, 크기 큰 텍스트 |
opacity-0 → group-hover:opacity-100 | 완전 투명 → 호버 시 완전 불투명 |
translate-y-4 → translate-y-0 | 약간 아래에 있다가 위로 올라오며 등장 (슬라이드 느낌) |
transition duration-300 | 부드러운 등장 애니메이션 (0.3초) |
핵심 정리표
| 항목 | 설명 |
|---|---|
| 문제 요약 | hover 시 텍스트가 등장하는 인터랙션 추가 필요 |
| 해결 방법 | opacity, translate, flex center, group-hover 조합 사용 |
| 주요 기능 | 오버레이 + 이미지 확대 + 텍스트 애니메이션 등장 모두 포함 |
| 응용 가능 | 카드 설명, CTA 버튼, 갤러리 미리보기 등 다양한 곳에 적용 가능 |
한줄 요약
Tailwind CSS만으로 이미지 hover 시 텍스트 등장, 확대, 오버레이까지 한 번에 구현 가능하다.
12강 클래스101 반응형 이벤트상품리스트에 이미지 호버효과를 적용
문제 설명
클래스101처럼 카드형 상품 리스트에서,
사용자가 마우스를 올렸을 때 이미지가 확대되고 텍스트가 자연스럽게 등장해야 하는데...
문제 상황 : 기본적인 상품 이미지와 텍스트만 있는 구조
- hover 효과 없음
- 인터랙션 부족, 사용자 주목도 낮음
- 반응형 클래스만 있고 시각적 전환이 없음
정답 코드 설명
Tailwind CSS의 group-hover, scale, opacity, translate, transition 등을 활용해
hover 시 이미지 확대 + 텍스트 부드럽게 등장 구현 완료
HTML
<!-- 카드 1개 예시 -->
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2">
<div class="relative overflow-hidden group">
<img class="w-full h-[200px] object-cover transform scale-100 group-hover:scale-110 transition duration-300" src="https://picsum.photos/id/1015/400/300" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-white text-lg font-semibold opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition duration-300">
자세히 보기
</span>
</div>
</div>
</div>
문제 vs 정답 비교표
| 항목 | 시작 코드 (Before) | 정답 코드 (Tailwind 적용) |
|---|---|---|
| 이미지 스타일 | 정적인 이미지 | group-hover:scale-110로 확대 효과 추가 |
| 텍스트 인터랙션 | 없음 | opacity + translate로 부드럽게 등장 |
| 오버레이 효과 | 없음 | group-hover:opacity-40로 어두운 배경 생성 |
| 반응형 구조 | Tailwind w-full, sm:w-1/2 등만 있음 | 반응형은 그대로 유지 + hover 인터랙션 추가 |
| 사용자 경험 | 시각적 효과 없음 | 이미지 확대 + 텍스트 등장으로 집중 유도 |
코드 해석
HTML
<div class="relative overflow-hidden group">
- relative: 자식의 absolute 배치 기준
- goup: 자식 요소가 hover 상태 감지 가능
HTML
<img class="transform scale-100 group-hover:scale-110 transition duration-300" />
- transform + scale-100: 기본 크기
- group-hover:scale-110: 10% 확대
- transition duration-300: 0.3초 애니메이션
HTML
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition duration-300"></div>
이미지 위를 덮는 어두운 레이어, 호버 시 불투명도 증가
HTML
<span class="opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition duration-300">
자세히 보기
</span>
- 기본 상태: 아래로 살짝 내림 + 투명
- hover 시: 위로 올라오며 등장
핵심 정리표
| 항목 | 설명 |
|---|---|
| 문제 요약 | 카드형 상품에 인터랙션이 없어 심심하고, 시각적 집중도 부족 |
| 해결 방법 | Tailwind의 hover, scale, opacity, transition 조합 사용 |
| 효과 내용 | 이미지 확대, 어두운 오버레이, 텍스트 등장 모두 적용 |
| 반응형 구성 | 기존의 sm, md, lg 반응형 구조와 충돌 없이 적용 가능 |
| 활용 확장 | 쇼핑몰, 클래스 카드, 썸네일 갤러리 등 다양한 상황에 응용 가능 |
한줄 요약
Tailwind CSS를 활용하면 반응형 상품 카드에 이미지 확대 + 텍스트 등장 효과를 간단하게 구현할 수 있다.
동영상
2507, CSS 라이브러리, 테일윈드, 챕터 6, 이미지 호버 효과, css
2507, CSS 라이브러리, 테일윈드, 챕터 6, 이미지 호버 효과를 테일윈드 방식으로 변경, 1단계, before
2507, CSS 라이브러리, 테일윈드, 챕터 6, 이미지 호버 효과를 테일윈드 방식으로 변경, 2단계, 이미지
2507, CSS 라이브러리, 테일윈드, 챕터 6, 이미지 호버 효과를 테일윈드 방식으로 변경, 3단계, after
HTML, CSS, JS 활용 1강
문제 - 애니메이션을 통해 엘리먼트가 움직이게 해주세요 1
문제 설명
빨간색 박스(.box)를 애니메이션을 통해 자동으로 움직이게 만들고 싶음.
- HTML과 CSS는 기본으로 제공됨
- 하지만 움직임(모션)이 전혀 없음
- 원하는 건: 박스가 자동으로 왼쪽 → 오른쪽으로 이동
정답 코드 설명
CSS
CSS @keyframes와 animation 속성을 활용해 박스가 왼쪽에서 오른쪽으로 부드럽게 이동되도록 설정함.
.box { width: 100px; height: 100px; background-color: red;
/* 애니메이션 적용 */
animation: move 1s linear forwards; }
@keyframes move { 0% { transform: translateX(0); }
100% { transform: translateX(300px); } }
문제 vs 정답 비교표
| 항목 | 문제 코드 (Before) | 정답 코드 (After) |
|---|---|---|
| 애니메이션 적용 | 없음 | animation: move 1s linear forwards |
| 움직임 정의 | 없음 | @keyframes move로 translateX 이동 정의 |
| 시작 위치 | 고정 (transform 없음) | transform: translateX(0)에서 시작 |
| 종료 위치 | 고정 | transform: translateX(300px)으로 종료 |
| 반복 여부 | 없음 (고정 위치) | 한 번만 실행 (forwards 유지됨) |
코드 해석 (CSS 중심)
CSS
animation: move 1s linear forwards;
| 속성 | 설명 |
|---|---|
move | 사용할 keyframes 이름 |
1s | 1초 동안 애니메이션 실행 |
linear | 일정한 속도로 이동 |
forwards | 애니메이션 끝난 후 마지막 상태 유지 |
CSS
@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } }
- 0%: 왼쪽에 위치
- 100%: 오른쪽으로 300px 이동
핵심 정리표
| 항목 | 내용 |
|---|---|
| 사용 속성 | animation, @keyframes, transform |
| 주요 키워드 | translateX(), linear, forwards |
| 움직임 방향 | 왼쪽 → 오른쪽 (X축 이동) |
| 사용 상황 | 로딩 효과, 슬라이드 인트로, 카드 등장 등 |
한줄 요약
CSS @keyframes와 animation 속성을 이용하면 요소를 부드럽게 원하는 방향으로 움직일 수 있다.
HTML, CSS, JS 활용 2강
문제 - 애니메이션을 통해 엘리먼트가 움직이게 해주세요 2
문제 설명
간 박스(.box)가 계속 왔다 갔다 움직이도록 애니메이션을 적용해야 함.
주어진 상태 (문제 코드)
- .box는 고정된 위치에 있음
- 움직이지 않음
- 반복도 없음
목표는: X축 방향으로 이동하고 다시 돌아오는 왕복 애니메이션
정답 코드 설명
CSS @keyframes + animation-direction: alternate + infinite 반복 설정으로
왕복 이동 애니메이션 구현 완료.
CSS
.box { width: 100px; height: 100px; background-color: red;
/* 애니메이션 적용 */
animation: move 1s linear infinite alternate; }
@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } }
문제 vs 정답 비교표
| 항목 | 문제 코드 (Before) | 정답 코드 (After) |
|---|---|---|
| 움직임 여부 | ❌ 없음 | ✅ transform: translateX()으로 이동 |
| 반복 여부 | ❌ 고정 | ✅ infinite 반복 애니메이션 |
| 왕복 여부 | ❌ 한쪽 방향만 | ✅ alternate로 왕복 (왔다 갔다) |
| 트랜지션 속도 | ❌ 없음 | ✅ linear로 균일한 속도 |
| 유지 시간/주기 | 없음 | 1초 동안 왕복 (1초 → 오른쪽, 1초 → 왼쪽 반복) |
코드 해석 (CSS 중심)
CSS
animation: move 1s linear infinite alternate;
| 속성 | 설명 |
|---|---|
move | 사용할 키프레임 이름 |
1s | 한 방향 이동에 1초 |
linear | 속도 일정 |
infinite | 무한 반복 |
alternate | 한 번은 정방향, 그 다음은 역방향으로 반복됨 |
CSS
@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } }
- 왼쪽에서 시작 → 오른쪽으로 이동 (300px)
- alternate 덕분에 다시 왼쪽으로 돌아옴
핵심 정리표
| 항목 | 설명 |
|---|---|
| 사용 속성 | animation, @keyframes, transform, alternate |
| 반복 여부 | infinite로 무한 반복 |
| 왕복 움직임 | alternate로 왕복 설정 |
| 주기 | 1초에 한 번 왕복 (1초 오른쪽, 1초 왼쪽) |
| 사용 예시 | 슬라이딩 배너, 로딩 캐릭터, 귀여운 아이콘 반복 움직임 등 |
한줄 요약
CSS 애니메이션에 infinite와 alternate를 추가하면 요소를 반복적으로 왔다 갔다 움직이게 할 수 있다.
밑줄 애니메이션 2가지
문제 설명
텍스트에 마우스를 올렸을 때, 밑줄이 애니메이션처럼 자연스럽게 나타나길 원함.
구현 목표:
- 평범한
<a>태그가 아닌,- 호버 시 밑줄이 왼쪽 → 오른쪽 또는 오른쪽 → 왼쪽으로 등장
- 애니메이션 효과를 CSS로 구현
정답 코드 설명
이 예제에서는 두 가지 밑줄 애니메이션 방식이 사용됨:
방식 1: background를 활용한 가짜 밑줄
CSS
.link1 { background-image: linear-gradient(transparent 50%, yellow 50%); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 0.4s ease-in-out; }
.link1:hover { background-size: 100% 100%; }
- background-size를 0% → 100%로 바꾸며 밑줄이 펼쳐지듯 보이게 함
- 진짜 border-bottom이 아닌 background를 밑줄처럼 사용
방식 2: ::after 가상요소로 밑줄 슬라이드
CSS
.link2 { position: relative; }
.link2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: gold; transition: width 0.4s; }
.link2:hover::after { width: 100%; }
- hover 시 width가 0 → 100%로 커지면서 밑줄이 쭉 생기는 느낌
- ::after를 이용해 실제 밑줄처럼 표현함
방식 1 vs 방식 2 비교표
| 항목 | 방식 1: background 애니메이션 | 방식 2: ::after 애니메이션 |
|---|---|---|
| 사용 방식 | background-image + size 변화 | ::after 요소에 width를 transition |
| 초기 상태 | 배경 너비 0% → 100% | 가상요소 너비 0% → 100% |
| 밑줄 두께 조정 | background 위치 조절로 간접 조절 | height 직접 지정 가능 (2px 등) |
| 위치 제어 | background 기준으로 적용 | 정확히 텍스트 아래에 위치 (bottom 기준) |
| 다양한 방향 지원 | 가능 (background-position 조절) | 가능 (left/right 조정) |
| 마우스 hover 시 효과 | 부드럽게 펼쳐짐 | 슬라이드되듯 나타남 |
코드 해석 (요약 중심)
1) .link1 – 배경 밑줄 방식
CSS
background-image: linear-gradient(transparent 50%, yellow 50%);
background-size: 0% 100%;
hover → background-size: 100% 100%;
- 배경 이미지를 텍스트 하단에 얇게 깔아서 밑줄처럼 사용
- background-size를 통해 등장 애니메이션 구현
2) .link2::after – 가상요소 방식
CSS
position: absolute;
width: 0;
hover → width: 100%;
핵심 정리표
| 항목 | 설명 |
|---|---|
| 효과 종류 | hover 시 밑줄 애니메이션 |
| 사용 기법 | 1) background-size 변화, 2) ::after 요소에 width 변화 |
| 적용 대상 | <a>, <span>, <button> 등 모든 인라인 텍스트 가능 |
| 커스터마이징 | 색상, 두께, 방향, 속도 모두 커스터마이징 가능 |
| 확장 응용 | 메뉴, 버튼 hover 효과, 강조 텍스트 스타일 등에 다양하게 활용 가능 |
한줄 요약
밑줄 애니메이션은background-size또는::after와width를 활용해hover시 자연스럽게 연출할 수 있다.
