📖
.easter-card 안에 있는 모든 개체(자식 요소들) 크기를 일괄적으로 축소 및 애니메이션 효과
페이지 정보
본문
.easter-card 안에 있는 모든 개체(자식 요소들) 크기를 일괄적으로 축소하려면 CSS로 transform: scale() 을 적용하면 됩니다.
예를 들어:[code].easter-card {
transform: scale(0.8); /* 80% 크기로 축소 */
transform-origin: top left; /* 축소 기준점을 좌측 상단으로 설정 */
}[/code]이렇게 하면 .easter-card 안에 들어있는 모든 내용이 0.8배 크기로 축소돼요.
만약 위치나 레이아웃이 깨지지 않게 조정하고 싶으면 transform-origin을 적절히 설정하거나, width, height, font-size를 조정하는 방법도 있어요.
".easter-card 전체 박스와 안에 내용까지 다 같이 작아져도 된다"
→ 그러면 transform: scale() 방식이 딱 좋아요!
아까 코드에서 좀 더 깔끔하게 써보면:[code].easter-card {
transform: scale(0.8); /* 80%로 축소 */
transform-origin: center center; /* 축소 기준을 중앙으로 */
}[/code]이렇게 하면 .easter-card 박스 전체가 중앙을 기준으로 80% 크기로 축소됩니다.
(※ transform-origin은 top left, center center, bottom right 이런 식으로 바꿀 수 있어요.)
만약 여러 카드가 있는데 각각 개별로 작아져야 한다면, .easter-card 각각에 이 스타일을 주면 되고요.
추가로, 축소했더니 위치가 밀린다면 position, margin, padding 같은 것도 약간 조정해줘야 할 수도 있어요.
정리
✅ 전체 박스 + 내용 같이 줄이기 → transform: scale()
✅ 기준점 지정 → transform-origin: center center (혹은 원하는 방향)
"px로 줄이는 버전" 과 "scale로 줄이는 버전"
1. [px로 정확히 줄이기 버전][code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - px 줄이기</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: all 0.4s ease;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
.easter-card:hover {
width: 350px;
height: 260px;
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐰
</div>
</body>
</html>[/code]✅ 특징
기본 400×300 → hover 시 350×260
부드럽게 줄어듦
박스 크기가 줄어드는 게 눈에 보임
2. [scale로 부드럽게 줄이기 버전][code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - scale 줄이기</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.4s ease;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
.easter-card:hover {
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐣
</div>
</body>
</html>[/code]✅ 특징
기본 크기는 그대로 유지
hover 시 자연스럽게 90% 크기로 축소
레이아웃 깨짐 없이 부드럽게 작아짐
📌 요약
width/height 줄이기 / 정확한 크기 제어, 다소 딱딱할 수 있음 / 정확한 레이아웃 필요할 때
transform: scale() / 부드럽고 자연스럽게 축소 / 자유롭게 부드러운 효과 줄 때
🎈 튕기는 hover 효과 (scale 방식)
(부드럽게 쫀득하게 튕기는 버전!)[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - Bounce 효과</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.easter-card:hover {
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐇
</div>
</body>
</html>[/code]
✨ 이 버전 특징
그냥 ease가 아니라
cubic-bezier(0.68, -0.55, 0.27, 1.55) 사용
그래서 마우스 올리면 축소하면서 한번 튕겨요!
진짜 스프링처럼 자연스럽고 부드러움
✅ 눈에 보이는 느낌
→ 줄어들다가 약간 반동처럼 튕기는 느낌을 줘서 훨씬 고급스러워 보입니다!
참고
이 cubic-bezier 값은 보통 "Bounce out" 같은 스프링 느낌으로 많이 써요.
더 강한 튕김, 약한 튕김, 여러 스타일 다 조정할 수 있어요!
🛠 '튕기는' Bounce 애니메이션 버전 (keyframes 이용)[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - Keyframes Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
transition: transform 0.3s ease; /* hover 빠른 반응 위해 추가 */
}
/* hover 시 bounce 애니메이션 실행 */
.easter-card:hover {
animation: bounce 0.8s ease;
}
/* bounce keyframes */
@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🌸
</div>
</body>
</html>[/code]📋 이 버전 특징
hover 하면 슥 줄어들면서 통통 튕긴다!
약간 0.9 → 1.05 → 0.97 → 1 이렇게 진짜 Bounce 느낌 나요.
부드럽고 리얼한 탄력.
🎛 만약 튕김 강도를 조절하고 싶으면?
더 세게 튕기고 싶다 -> scale(0.85) / scale(1.1) 이렇게 범위 넓히기
더 부드럽게 튕기고 싶다 -> 0.92~1.03처럼 scale 값 차이를 줄이기
애니메이션 더 천천히 -> animation: bounce 1.2s ease; 처럼 시간 늘리기
🔥 예시: 더 강하게 Bounce 하고 싶을 때[code]@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.85); }
60% { transform: scale(1.08); }
80% { transform: scale(0.95); }
100% { transform: scale(1); }
}[/code]이렇게 하면 더 쫀득! 더 통통!
1. 🎵 자동으로 반복해서 Bounce[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자동 반복 Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
animation: bounce 2s ease infinite; /* ★ 자동 반복 */
}
/* bounce keyframes */
@keyframes bounce {
0%, 100% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐣
</div>
</body>
</html>[/code]✅ 특징:
가만 놔둬도 계속 주기적으로 통통!
animation: infinite 덕분에 무한 반복
2. 🖱️ 클릭할 때만 Bounce[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클릭할 때만 Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
/* 클릭하면 bounce 애니메이션 */
.easter-card.clicked {
animation: bounce 0.8s ease;
}
/* bounce keyframes */
@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
100% { transform: scale(1); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const card = document.querySelector('.easter-card');
card.addEventListener('click', function() {
card.classList.add('clicked');
setTimeout(() => card.classList.remove('clicked'), 800); // 애니 끝나면 다시 원복
});
});
</script>
</head>
<body>
<div class="easter-card">
Click Me! 🐇
</div>
</body>
</html>[/code]✅ 특징:
클릭할 때만 Bounce
다시 클릭하면 또 Bounce
자연스럽게 애니메이션 끝나면 클래스 제거
3. 🏃♂️ 마우스를 벗어날 때 Bounce[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마우스 벗어날 때 Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
/* 벗어날 때 bounce */
.easter-card.bounce-out {
animation: bounce 0.8s ease;
}
/* bounce keyframes */
@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
100% { transform: scale(1); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const card = document.querySelector('.easter-card');
card.addEventListener('mouseleave', function() {
card.classList.add('bounce-out');
setTimeout(() => card.classList.remove('bounce-out'), 800);
});
});
</script>
</head>
<body>
<div class="easter-card">
Mouse Out! 🐥
</div>
</body>
</html>[/code]✅ 특징:
마우스를 카드에서 빼는 순간 Bounce 발동
자연스럽게 통통하면서 원위치
🔥 요약
1. 자동 반복 Bounce
2. 클릭할 때만 Bounce
3. 마우스 벗어날 때 Bounce
예를 들어:[code].easter-card {
transform: scale(0.8); /* 80% 크기로 축소 */
transform-origin: top left; /* 축소 기준점을 좌측 상단으로 설정 */
}[/code]이렇게 하면 .easter-card 안에 들어있는 모든 내용이 0.8배 크기로 축소돼요.
만약 위치나 레이아웃이 깨지지 않게 조정하고 싶으면 transform-origin을 적절히 설정하거나, width, height, font-size를 조정하는 방법도 있어요.
".easter-card 전체 박스와 안에 내용까지 다 같이 작아져도 된다"
→ 그러면 transform: scale() 방식이 딱 좋아요!
아까 코드에서 좀 더 깔끔하게 써보면:[code].easter-card {
transform: scale(0.8); /* 80%로 축소 */
transform-origin: center center; /* 축소 기준을 중앙으로 */
}[/code]이렇게 하면 .easter-card 박스 전체가 중앙을 기준으로 80% 크기로 축소됩니다.
(※ transform-origin은 top left, center center, bottom right 이런 식으로 바꿀 수 있어요.)
만약 여러 카드가 있는데 각각 개별로 작아져야 한다면, .easter-card 각각에 이 스타일을 주면 되고요.
추가로, 축소했더니 위치가 밀린다면 position, margin, padding 같은 것도 약간 조정해줘야 할 수도 있어요.
정리
✅ 전체 박스 + 내용 같이 줄이기 → transform: scale()
✅ 기준점 지정 → transform-origin: center center (혹은 원하는 방향)
"px로 줄이는 버전" 과 "scale로 줄이는 버전"
1. [px로 정확히 줄이기 버전][code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - px 줄이기</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: all 0.4s ease;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
.easter-card:hover {
width: 350px;
height: 260px;
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐰
</div>
</body>
</html>[/code]✅ 특징
기본 400×300 → hover 시 350×260
부드럽게 줄어듦
박스 크기가 줄어드는 게 눈에 보임
2. [scale로 부드럽게 줄이기 버전][code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - scale 줄이기</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.4s ease;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
.easter-card:hover {
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐣
</div>
</body>
</html>[/code]✅ 특징
기본 크기는 그대로 유지
hover 시 자연스럽게 90% 크기로 축소
레이아웃 깨짐 없이 부드럽게 작아짐
📌 요약
width/height 줄이기 / 정확한 크기 제어, 다소 딱딱할 수 있음 / 정확한 레이아웃 필요할 때
transform: scale() / 부드럽고 자연스럽게 축소 / 자유롭게 부드러운 효과 줄 때
🎈 튕기는 hover 효과 (scale 방식)
(부드럽게 쫀득하게 튕기는 버전!)[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - Bounce 효과</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.easter-card:hover {
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐇
</div>
</body>
</html>[/code]
✨ 이 버전 특징
그냥 ease가 아니라
cubic-bezier(0.68, -0.55, 0.27, 1.55) 사용
그래서 마우스 올리면 축소하면서 한번 튕겨요!
진짜 스프링처럼 자연스럽고 부드러움
✅ 눈에 보이는 느낌
→ 줄어들다가 약간 반동처럼 튕기는 느낌을 줘서 훨씬 고급스러워 보입니다!
참고
이 cubic-bezier 값은 보통 "Bounce out" 같은 스프링 느낌으로 많이 써요.
더 강한 튕김, 약한 튕김, 여러 스타일 다 조정할 수 있어요!
🛠 '튕기는' Bounce 애니메이션 버전 (keyframes 이용)[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Easter Card - Keyframes Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
transition: transform 0.3s ease; /* hover 빠른 반응 위해 추가 */
}
/* hover 시 bounce 애니메이션 실행 */
.easter-card:hover {
animation: bounce 0.8s ease;
}
/* bounce keyframes */
@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🌸
</div>
</body>
</html>[/code]📋 이 버전 특징
hover 하면 슥 줄어들면서 통통 튕긴다!
약간 0.9 → 1.05 → 0.97 → 1 이렇게 진짜 Bounce 느낌 나요.
부드럽고 리얼한 탄력.
🎛 만약 튕김 강도를 조절하고 싶으면?
더 세게 튕기고 싶다 -> scale(0.85) / scale(1.1) 이렇게 범위 넓히기
더 부드럽게 튕기고 싶다 -> 0.92~1.03처럼 scale 값 차이를 줄이기
애니메이션 더 천천히 -> animation: bounce 1.2s ease; 처럼 시간 늘리기
🔥 예시: 더 강하게 Bounce 하고 싶을 때[code]@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.85); }
60% { transform: scale(1.08); }
80% { transform: scale(0.95); }
100% { transform: scale(1); }
}[/code]이렇게 하면 더 쫀득! 더 통통!
1. 🎵 자동으로 반복해서 Bounce[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자동 반복 Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
animation: bounce 2s ease infinite; /* ★ 자동 반복 */
}
/* bounce keyframes */
@keyframes bounce {
0%, 100% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
}
</style>
</head>
<body>
<div class="easter-card">
Happy Easter 🐣
</div>
</body>
</html>[/code]✅ 특징:
가만 놔둬도 계속 주기적으로 통통!
animation: infinite 덕분에 무한 반복
2. 🖱️ 클릭할 때만 Bounce[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클릭할 때만 Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
/* 클릭하면 bounce 애니메이션 */
.easter-card.clicked {
animation: bounce 0.8s ease;
}
/* bounce keyframes */
@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
100% { transform: scale(1); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const card = document.querySelector('.easter-card');
card.addEventListener('click', function() {
card.classList.add('clicked');
setTimeout(() => card.classList.remove('clicked'), 800); // 애니 끝나면 다시 원복
});
});
</script>
</head>
<body>
<div class="easter-card">
Click Me! 🐇
</div>
</body>
</html>[/code]✅ 특징:
클릭할 때만 Bounce
다시 클릭하면 또 Bounce
자연스럽게 애니메이션 끝나면 클래스 제거
3. 🏃♂️ 마우스를 벗어날 때 Bounce[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마우스 벗어날 때 Bounce</title>
<style>
body {
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.easter-card {
width: 400px;
height: 300px;
background: linear-gradient(135deg, #ffccff, #ccffff);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
/* 벗어날 때 bounce */
.easter-card.bounce-out {
animation: bounce 0.8s ease;
}
/* bounce keyframes */
@keyframes bounce {
0% { transform: scale(1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.05); }
80% { transform: scale(0.97); }
100% { transform: scale(1); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const card = document.querySelector('.easter-card');
card.addEventListener('mouseleave', function() {
card.classList.add('bounce-out');
setTimeout(() => card.classList.remove('bounce-out'), 800);
});
});
</script>
</head>
<body>
<div class="easter-card">
Mouse Out! 🐥
</div>
</body>
</html>[/code]✅ 특징:
마우스를 카드에서 빼는 순간 Bounce 발동
자연스럽게 통통하면서 원위치
🔥 요약
1. 자동 반복 Bounce
2. 클릭할 때만 Bounce
3. 마우스 벗어날 때 Bounce
댓글목록
등록된 댓글이 없습니다.
  |