왕진 블로그
반응형
Web Development · Practice Test
실습 1 —
호버 시 초록 → 노랑 색상 전환
2024-11-07 / 가장 단순한 transition 패턴 만들기
시작 문제 — 무엇을 만들어야 하나?
왼쪽 그림처럼 보이는 박스에 마우스를 갖다 대면 오른쪽 그림처럼 색이 변해야 한다.
초기 상태 — green
→
호버 시 — yellow
핵심은 "부드럽게 변환"되어야 한다는 것. 즉시 점프하지 않고 1초 동안 색이 전이되어야 한다.
해답 정답 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS 애니메이션</title> <style> body { padding-top: 50px; padding-left: 50px; } .box { width: 100px; height: 100px; background: green; border: 1px solid black; border-radius: 5px; transition: background 1s; } .box:hover { background: yellow; } </style> </head> <body> <div class="box"></div> </body> </html>
실제 출력 미리보기 (박스에 마우스를 올려보세요)
1초 동안 초록 → 노랑으로 부드럽게 전환됩니다
용어 용어 정리
.box변환 대상이 되는 박스 (클래스 이름)
background배경 — 단축으로 색상만도 가능
border-radius: 5px모서리 살짝 둥글게
transition: background 1sbackground 속성을 1초 동안 부드럽게
:hover마우스가 위에 올라간 상태 셀렉터
greenCSS 키워드 색 = #008000
yellowCSS 키워드 색 = #ffff00
기본 셀렉터에 transition호버 진입·이탈 모두 부드러움
1 핵심 설계 — transition은 어디에 두는가?
기본 셀렉터에 둬야 양방향 부드럽다
이번 코드의 가장 중요한 결정. transition을 .box (기본 셀렉터)에 뒀기 때문에:
| 경우 | 이번 코드 | 만약 :hover에 뒀다면 |
|---|---|---|
| 호버 진입 | 1초 동안 초록 → 노랑 | 1초 동안 초록 → 노랑 |
| 호버 이탈 | 1초 동안 노랑 → 초록 | 즉시 점프 (transition이 사라짐) |
※ 흔한 실수: "호버에서 일어나는 일이니까" :hover 안에 transition을 두는 것. 이 경우 마우스가 떨어졌을 때 transition 정의 자체가 사라지므로 즉시 원래 상태로 점프한다.
2 transition: background 1s 의 의미
단축 속성의 4부품 중 2개만 사용
이번 코드는 property와 duration만 명시했다.
| 부품 | 이번 코드 | 의미 / 기본값 |
|---|---|---|
| property | background |
배경 속성에만 적용 — 다른 속성은 즉시 변환 |
| duration | 1s |
1초 동안 진행 |
| timing-function | (생략) | 기본값 ease — 자연스러운 곡선 |
| delay | (생략) | 기본값 0s — 즉시 시작 |
※ 이번 문제는
background만 transition하면 충분하므로 all 대신 명시했다. 이게 더 효율적이다 — border나 border-radius는 어차피 안 바뀌므로 굳이 transition 후보에 둘 필요 없다.3 background는 어떻게 보간되나?
색상 채널 단위로 점진적 변환
green(#008000)은 RGB로 (0, 128, 0). yellow(#ffff00)는 (255, 255, 0). 1초 동안 매 프레임 RGB 값을 보간한다.
시간 R G B 0.0초 0 → 128 → 0 0.25초 64 → 159 → 0 0.5초 128 → 192 → 0 (중간 — 카키 같은 색) 0.75초 192 → 224 → 0 1.0초 255 → 255 → 0 (yellow)
※ 중간 단계에서 겨자색~연두색이 잠시 보이는 게 transition의 자연스러운 결과다. 갑자기 노랑이 되는 게 아니라 색공간을 부드럽게 통과한다.
반응형
4 단축 속성 background — 색상만 적어도 OK
background는 사실 background-color, background-image, background-position 등을 묶은 단축 속성이다. 이번 코드처럼 색상만 적으면 background-color만 변경된다.
/* 모두 동일한 결과 */ background: green; background-color: green; background: green none repeat scroll 0 0; /* 풀어 쓰면 이렇게 */
※
transition: background로 transition 대상도 단축으로 적었다. 더 정확하게 쓴다면 transition: background-color 1s도 가능 (사실상 같은 결과).5 body의 padding은 왜?
body { padding-top: 50px; padding-left: 50px; }은 단순히 박스를 화면 가장자리에 딱 붙지 않게 띄우기 위해서다. 학습용 코드에서 흔한 패턴.
※ 실무 페이지는 보통 wrapper 컨테이너로 중앙 정렬하고 padding은 그 안에 둔다 — body에 직접 padding을 주는 건 학습용 단축이다.
6 만들기 흐름 — 단계별 사고
1
요구사항 분석"마우스를 갖다 대면 색이 변한다" → :hover와 transition 필요
2
박스 만들기width 100, height 100, 검은 테두리, 둥근 모서리
3
두 상태 정의기본 background: green / :hover background: yellow
4
transition 추가기본 셀렉터에 background 1s — 양방향 부드러움
5
HTML 작성<div class="box"></div> 한 줄
7 자주 하는 실수 (이 문제에서)
| 실수 | 증상 | 해결 |
|---|---|---|
| transition을 :hover 안에 둠 | 들어갈 때만 부드럽고 나올 때 점프 | 기본 .box에 transition |
| 1s 단위 빼먹음 | 속성 무시 | 반드시 단위 표기 |
| background에 url() 넣었다가 색만 | 이미지가 사라짐 | 이번 문제는 색만 → 단축 OK |
| :hover 셀렉터에 띄어쓰기 | 속성이 자식에 적용 | .box:hover 붙여 쓰기 |
| 호버 색을 #ffff00 대신 yellow로 헷갈림 | 안 헷갈림 — 동일 | 키워드는 16진수와 같음 |
8 확장 — 더 자연스럽게 만들고 싶다면
/* timing function과 미세한 변화를 더하면 */ .box { transition: background 0.4s ease-out, transform 0.2s ease-out; } .box:hover { background: yellow; transform: scale(1.05); /* 살짝 커지는 효과까지 */ }
1초는 학습용으로는 변화를 보기 좋지만, 실제 호버 효과로는 약간 길다. 0.2~0.4초 정도가 사용자 경험에 더 자연스럽다.
핵심 한 줄 요약
기본 셀렉터에 transition호버 진입·이탈 모두 부드러움
background 1s색상만 1초 동안 보간
:hover 안에는 목표값만변할 후 상태만 적기
색 보간RGB 채널 단위로 점진적
background 단축색상만 적으면 background-color만 변경
timing 기본값생략 시 ease
실무 호버 시간0.2~0.4초가 가장 자연스러움
Tags
#transition #hover #호버효과 #background #색상전환 #ease #transition-duration #RGB보간 #색상보간 #인터랙션 #CSS3 #부드러운전환 #박스호버 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
transition, hover, 호버효과, background, 색상전환, ease, transition-duration, RGB보간, 색상보간, 인터랙션, CSS3, 부드러운전환, 박스호버, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS transition-delay 완전 정리 — 같은 시간을 줘도 늦게 출발하는 박스 (0) | 2026.06.20 |
|---|---|
| 실습 2 — 호버 시 사진을 회전시키며 둥근 테두리로 (0) | 2026.06.20 |
| CSS transform: translate() — X축·Y축·동시 이동의 차이 (0) | 2026.06.19 |
| CSS transform: scale() — 가로·세로·전체 확대축소 비교 (0) | 2026.06.19 |
| CSS rotate3d — rotateX·Y·Z와 임의 축 3D 회전 (0) | 2026.06.19 |
댓글