이미지 hover 시 확대 + 그림자 — transform-origin · scale · box-shadow 완전 정리

 

 

Web Development · CSS Transform

이미지 hover 시 1.5배 확대 +
그림자 — transform-origin · scale · box-shadow

실습 문제 해답 분석 — "왜 왼쪽 위를 기준으로 커지는가?"

시작 오늘 분석할 코드

실습 문제: 이미지 위에 마우스를 올리면 1초 동안 1.5배로 커지면서 검은 그림자가 생기는 효과를 만들어라. 단, 평소엔 위쪽·왼쪽에 약간 여백이 있고, 확대될 때 왼쪽 위 모서리는 고정된 채로 오른쪽 아래 방향으로 커져야 한다.

<style> .photo { margin-top: 50px; margin-left: 100px; } .photo:hover { transform-origin: left top; /* 확대 기준점 */ transform: scale(1.5); /* 1.5배 확대 */ transition: all 1s; /* 1초에 걸쳐 */ box-shadow: 5px 5px 3px black; /* 그림자 */ } </style> <img src="images/fruit.jpg" width="250" height="188" class="photo">

실제 출력 미리보기 — 이미지 위에 마우스를 올려보세요

FRUIT IMAGE

왼쪽 위 모서리가 고정된 채 오른쪽·아래 방향으로 1.5배 확대 + 그림자

용어 용어 정리

transform회전·이동·확대 같은 형태 변환의 총칭

scale(1.5)가로·세로 모두 1.5배 확대

transform-origin변환의 기준점(중심축)

left top기준점을 왼쪽 위 모서리로

box-shadow박스 바깥쪽 그림자

transition상태 변화 시 부드러운 보간

all 1s모든 변경 가능한 속성을 1초에 걸쳐

:hover마우스가 올라간 동안의 상태

---

1 scale(1.5) — 1.5배 확대의 의미

scale(n)은 가로·세로 모두 n배로 키운다. 1.5배라면 250×188 이미지가 375×282로 커진다. 픽셀 수가 늘어나는 게 아니라 같은 픽셀을 더 큰 영역에 늘려 그리는 것이라 해상도가 충분치 않으면 흐려질 수 있다.

scale(1) → 원본 그대로 (확대 없음) scale(1.5) → 1.5배 (이번 코드) scale(2) → 2배 scale(0.5) → 절반 scale(2, 1) → 가로만 2배, 세로는 그대로

※ scale은 박스 모델의 크기(width·height)를 실제로 바꾸지 않는다. 화면에 그려지는 크기만 변하므로, 옆 요소들은 원본 250×188인 줄 안다 → 다른 요소를 밀어내지 않는다.

---

2 transform-origin — 어디를 기준으로 커지는가?

기본값과 left top의 차이

transform-origin이 없으면 기본값은 center center (가운데)다. 이미지가 가운데를 중심으로 사방으로 커진다. 이번 코드는 left top이라 왼쪽 위 모서리는 그대로 고정된 채 오른쪽·아래 방향으로만 커진다.

transform-origin: left top (이번 코드)

HOVER ME

왼쪽 위 고정 → 오른쪽·아래로 커짐

transform-origin: center (기본값)

HOVER ME

가운데 고정 → 사방으로 커짐

※ transform-origin 값 표기법

• 키워드: left | right | center | top | bottom
• 퍼센트: 0% 0%(=left top), 100% 100%(=right bottom)
• 픽셀: 20px 30px 등 절대 좌표도 가능
• 두 값 순서: 가로 세로 (X Y)

---

3 왜 transform-origin을 left top으로 줬는가?

이번 이미지는 margin-top:50px; margin-left:100px;로 위·왼쪽에만 여백이 있다. 만약 기본값(center)으로 확대하면 왼쪽으로도 커져서 화면 밖으로 삐져나갈 수 있다. left top으로 잡으면 왼쪽·위는 고정되니 여백이 줄지 않고, 오른쪽·아래로만 커져서 안전하다.

[기본 center] [left top] ┌──사방으로 커짐──┐ ┌── 고정 ──┐ │ ↗ ↑ ↖ │ │ ↓ │ │ → ● ← │ │ → │ │ ↘ ↓ ↙ │ │ ↘ │ └────────────────┘ └───────────┘ 왼쪽 여백 부족하면 잘림 왼쪽·위가 항상 같은 자리

---

 

반응형

 

4 box-shadow: 5px 5px 3px black

네 개의 값이 무엇을 뜻하는지 헷갈리기 쉽다.

값	의미	이번 코드
1번째	x 오프셋 (오른쪽이 +)	5px → 오른쪽으로 5px
2번째	y 오프셋 (아래쪽이 +)	5px → 아래로 5px
3번째	blur (흐림 정도)	3px → 살짝 부드럽게
4번째 (선택)	spread (그림자 크기)	생략 → 0 (이미지와 같은 크기)
마지막	색	black

※ 자연스러운 그림자는 보통 0 4px 12px rgba(0,0,0,0.15)처럼 약간 아래로, 많이 흐리게, 매우 흐릿한 검정으로 준다. 이번 코드의 진한 검정은 의도적으로 강한 효과를 노린 것.

---

5 transition을 :hover에 둔 코드의 함정

이번 원본 코드의 중요한 약점: transition: all 1s가 .photo:hover 안에 있다. 즉 "마우스를 올렸을 때만" transition이 등록된다. 마우스를 떼면 transition이 사라지므로 원위치는 점프하듯 즉시 일어난다.

이번 원본 (hover에 transition)

• 들어갈 때: 1초 부드럽게 확대 ✓
• 나갈 때: 점프 (transition 규칙이 사라짐) ✗
• 의도와 다름

권장 (.photo에 transition)

• 들어갈 때: 1초 부드럽게 확대 ✓
• 나갈 때: 1초 부드럽게 축소 ✓
• 양방향 자연스러움

/* 권장 수정 */ .photo { margin-top: 50px; margin-left: 100px; transform-origin: left top; transition: all 1s; ← 평소 상태로 옮김 } .photo:hover { transform: scale(1.5); box-shadow: 5px 5px 3px black; }

※ 외울 규칙

• transition은 평소 상태(원래 셀렉터)에 둔다
• transform-origin도 평소 상태에 두는 게 안전 (변경 시점 기준이 명확)
• :hover 블록에는 "변하는 결과"만 둔다 — transform·box-shadow 등

---

6 브라우저 처리 흐름

1

평소 상태img는 250×188, margin-top:50px, margin-left:100px 위치에 그려짐

2

마우스 진입:hover 발동 → transform-origin: left top, scale(1.5), box-shadow 적용

3

1초 동안 부드럽게 확대왼쪽 위 모서리 고정, 오른쪽·아래로 1.5배 — 동시에 검은 그림자 페이드인

4

마우스 이탈:hover 해제 → 위 규칙들이 한 번에 사라짐 (이번 코드는 transition도 함께 사라져 즉시 원위치)

5

실제 박스 크기는 그대로scale은 시각적 변환이므로, 옆 요소가 밀려나거나 레이아웃이 바뀌지는 않음

---

7 자주 하는 실수

실수	증상	해결
transition을 :hover에 둠	들어갈 땐 부드럽고 나올 땐 점프	평소 상태(.photo)에 정의
transform-origin 생략	가운데 기준 → 왼쪽 여백으로 삐져나감	left top 명시
scale(1.5)로 화질 저하	이미지가 흐려짐	원본을 1.5배 큰 해상도로 준비, 또는 SVG/벡터 사용
width·height로 확대 시도	레이아웃 재계산 → 옆 요소가 밀림	transform: scale 사용 — GPU 가속 + 레이아웃 영향 없음
margin으로 위치 조정 후 transform	예측 어려운 위치	transform-origin·transition을 평소 상태에 함께 두고 일관성 유지
box-shadow blur 너무 작음	그림자가 칼날처럼 딱딱함	blur 값을 12px·20px 이상으로 + 색은 rgba 반투명

---

8 응용 — scale 외 다른 변환과 조합

transform은 여러 변환을 공백으로 연결해 한 번에 적용할 수 있다.

/* 확대 + 회전 + 이동 동시 */ transform: scale(1.5) rotate(5deg) translateY(-10px); /* 확대만 + 색조 변화 */ .photo:hover { transform: scale(1.5); filter: brightness(1.1) saturate(1.2); } /* 살짝 들리는 카드 효과 */ .card { transition: transform 0.25s, box-shadow 0.25s; } .card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,0.15); }

---

핵심 한 줄 요약

scale(1.5)가로·세로 1.5배 확대 (시각적, 레이아웃 영향 X)

transform-origin변환의 중심축 — 기본은 center, 이번은 left top

left top 사용 이유왼쪽·위 여백이 적어 가운데 기준이면 잘림

box-shadowx · y · blur · color — 5px 5px 3px black

transition 위치평소 상태에 둬야 양방향 부드러움

all 1s변경되는 모든 속성을 1초에 걸쳐 보간

scale vs widthscale은 GPU 가속 + 옆 요소 안 밀어냄

transform 합성scale rotate translate를 공백으로 연결

Tags

#transform #scale #transform-origin #box-shadow #hover #transition #left-top #GPU가속 #CSS #HTML #이미지확대 #호버효과 #그림자 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

transform, scale, transform-origin, box-shadow, hover, transition, left-top, GPU가속, CSS, HTML, 이미지확대, 호버효과, 그림자, 웹개발, 티스토리