📢:hover vs ::placeholder 차이점
:hover→ 의사 클래스 (Pseudo-class)::placeholder→ 의사 요소 (Pseudo-element)
1. 의사 클래스 (:hover, :focus 등)
의사 클래스는 특정 상태에서 요소 전체에 스타일을 적용할 때 사용
input:hover {
border-color: blue;
}🔹 설명: input 요소에 마우스를 올렸을 때 border-color가 파란색으로 변경됨.
2. 의사 요소 (::placeholder, ::before, ::after 등)
의사 요소는 요소의 특정 부분(예: placeholder 텍스트, 가상 콘텐츠 등)에 스타일을 적용할 때 사용
input::placeholder {
color: gray;
}🔹 설명: input의 placeholder 텍스트 색상을 회색으로 변경.
📢 정리
| 속성 | 타입 | 설명 |
|---|---|---|
:hover | 의사 클래스 | 요소의 상태(hover, focus 등)에 따라 스타일 적용 |
::placeholder | 의사 요소 | 요소의 일부(placeholder 텍스트)에 스타일 적용 |
✔ :hover는 요소 자체에 영향을 미치고, ::placeholder는 요소 내부의 특정 부분(예: 플레이스홀더 텍스트)에만 영향을 미친다.
