왕진 블로그
반응형
Web Development · Practice Test
실습 2 —
호버 시 사진을 회전시키며 둥근 테두리로
2024-11-07 / transform과 border 변경을 동시에 다루는 패턴
시작 문제 — 무엇을 만들어야 하나?
왼쪽 그림처럼 보이는 사진에 마우스를 올리면, 오른쪽 그림처럼 20도 기울어지면서 모서리가 둥글어진다. 회전 + border 변경 + border-radius 추가가 한꺼번에 일어나야 한다.
☕
초기 — 회색 테두리, 정자세
→
☕
호버 — 검정 둥근 테두리, 20도 기울어짐
해답 정답 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS 애니메이션</title> <style> .container { width: 500px; margin: 50px auto; } .photo { border: 1px solid #ccc; } .photo:hover { border: 1px solid black; border-radius: 10px; transform: rotate(20deg); } </style> </head> <body> <div class="container"> <img src="images/coffee.jpg" class="photo"> </div> </body> </html>
실제 출력 미리보기 (사진에 마우스를 올려보세요)
☕
테두리 색·둥글기·회전이 동시에 변합니다 (학습 편의로 transition 추가)
용어 용어 정리
.container사진을 감싸 폭 500 가운데 정렬
margin: 50px auto상하 50, 좌우 자동(=중앙)
.photo사진 자체 — img 태그 클래스
border: 1px solid #ccc기본 회색 테두리
:hover마우스 진입 상태
border-radius: 10px모서리 둥글기
transform: rotate(20deg)시계방향 20도 회전
3가지 동시 변경색·둥글기·회전 모두 :hover에서
1 한 :hover 안에 3가지 변경
왜 한 셀렉터에 3가지를 모았는가?
같은 트리거(마우스 호버)로 여러 가지가 동시에 일어나야 하므로, 한 :hover 셀렉터에 모든 목표 상태를 적는 것이 자연스럽다.
.photo:hover { border: 1px solid black; ← 색을 #ccc → black border-radius: 10px; ← 0 → 10px transform: rotate(20deg); ← 0deg → 20deg }
※ 이 3가지는 독립적으로 적용되며 서로 영향이 없다. 회전이 border-radius를 바꾸지도, border 색이 회전 방향에 영향을 주지도 않는다.
2 원본 코드의 빠진 부분 — transition
호버가 즉시 점프한다
해답 코드에는 transition이 없다. 즉 호버 시 즉시 변환되어 부자연스럽다. 부드럽게 만들려면:
.photo { border: 1px solid #ccc; transition: all 0.5s ease; /* ← 이것만 추가 */ }
이 미리보기에서는 학습 편의를 위해 transition: all 0.5s ease를 추가했다. 그래서 회전·색·둥글기가 모두 부드럽게 변하는 것을 볼 수 있다.
※ 시험 정답 코드에 transition이 빠진 이유: 출제 의도가 "호버 시 변환되도록"이라 transition은 부가적이었을 수 있다. 그래도 실무에선 거의 항상 추가하는 게 좋다.
3 margin: 50px auto의 의미
중앙 정렬의 핵심 패턴
margin: 50px auto는 "위아래 50, 좌우 자동(=가운데)"이다. auto는 남는 공간을 양옆으로 균등하게 배분한다는 의미.
.container { width: 500px; margin: 50px auto; } ──┬─ ─┬── 상하 좌우 자동 → 화면 폭 1000px이면 좌우에 250px씩 자동 여백 = 500px 박스가 가운데
※ auto가 작동하려면
width가 명시되어 있어야 함 (이번처럼 500px)- 요소가 block 레벨이어야 함 (div는 기본 block)
- 위 두 조건이 안 맞으면 auto는 효과 없음
반응형
4 img에 직접 클래스를 줘도 되나?
이 문제의 HTML은 흥미롭다. <img class="photo">로 이미지 태그 자체에 클래스를 줬다. 그래서 .photo:hover의 변환이 이미지에 직접 적용된다.
※ 이 방식은 이미지가 회전·테두리 둥글기 등을 직접 받음. 만약 사진의 진짜 모서리가 둥글어지길 원하면 이 방식이 정답이다 (overflow:hidden된 div 안에 이미지를 넣는 다른 방법도 있음).
5 rotate(20deg) — 시계방향 살짝
20도는 사용자가 회전을 인식하기 쉬우면서도 사진이 너무 기울어 보이지 않는 적당한 각도. + 부호이므로 시계방향이다.
| 각도 | 느낌 |
|---|---|
| 5deg | 거의 안 보일 정도로 살짝 |
| 10deg | 가벼운 호버 효과 |
| 20deg | 이번 문제 — 명확하게 회전 |
| 45deg | 마름모처럼 큰 회전 |
| 90deg | 가로↔세로 뒤집힘 |
6 만들기 흐름
1
레이아웃 잡기.container로 폭 500, margin: 50px auto로 가운데 정렬
2
이미지 기본 스타일.photo에 회색 1px 테두리
3
호버 상태 정의:hover에 검정 테두리 + 둥근 모서리 + 20도 회전
4
(선택) transition 추가.photo에 transition: all 0.5s ease 권장
5
HTML 작성div.container 안에 img.photo
7 이미지 회전 시 옆 요소와 겹침 주의
20도 회전하면 사진의 모서리가 원래 박스 영역을 벗어난다. 다른 콘텐츠가 가까이 있으면 겹쳐 보일 수 있다.
/* 회전 후 안전한 여백 확보 */ .container { padding: 20px 0; } .photo { transition: all 0.5s ease; } /* 또는 회전 기준점을 조정 */ .photo:hover { transform-origin: center; transform: rotate(20deg); }
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| transition을 :hover에 둠 | 마우스 떨어질 때 점프 | .photo에 transition |
| border 두께를 1px → 5px로 바꿈 | 사진 위치가 살짝 흔들림 | 두께 유지, 색만 변경 |
| transform을 transform-origin과 함께 안 봄 | 중심 회전이라 겹침 발생 | 여백 확보 또는 origin 조정 |
| 각도에 단위 누락 (rotate(20)) | 속성 무시 | 반드시 deg |
| transition: rotate (X) | 회전이 부드럽게 안 됨 | transition: transform |
9 더 자연스럽게 만들기 — 풀세트
.photo { border: 1px solid #ccc; border-radius: 0; transform: rotate(0deg); transition: all 0.4s ease-out; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .photo:hover { border: 1px solid black; border-radius: 10px; transform: rotate(20deg) scale(1.05); /* 살짝 커지기까지 */ box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
그림자까지 호버 시 강해지면 사진이 떠올라 보이는 효과가 난다. 갤러리 UI에서 자주 쓰는 패턴.
핵심 한 줄 요약
한 :hover에 3가지border 색 / border-radius / transform 동시
transform: rotate(20deg)시계방향 20도
margin: 50px auto위아래 50, 좌우 자동 = 가운데
img에 직접 클래스이미지 자체가 변환됨
transition 추가기본 셀렉터에 all 0.5s 권장
회전 후 여백옆 요소와 겹치지 않게 padding
실무 확장scale + box-shadow까지 더하면 갤러리 호버 완성
Tags
#transition #transform #rotate #hover #호버애니메이션 #border-radius #border #갤러리 #img호버 #동시변환 #인터랙션 #CSS3 #사진회전 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
transition, transform, rotate, hover, 호버애니메이션, border-radius, border, 갤러리, img호버, 동시변환, 인터랙션, CSS3, 사진회전, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| 상품 카드 hover 시 caption 슬라이드 업 — translateY · opacity · overflow:hidden 완전 정리 (0) | 2026.06.20 |
|---|---|
| CSS transition-delay 완전 정리 — 같은 시간을 줘도 늦게 출발하는 박스 (0) | 2026.06.20 |
| 실습 1 — 호버 시 초록 → 노랑 박스 색상 전환 (0) | 2026.06.20 |
| CSS transform: translate() — X축·Y축·동시 이동의 차이 (0) | 2026.06.19 |
| CSS transform: scale() — 가로·세로·전체 확대축소 비교 (0) | 2026.06.19 |
댓글