hover, active, focus 는 모두 가상클래스선택자로
가상 클래스란 주로 객체 지향 프로그래밍에서 사용되는 용어로, 직접 객체(인스턴스)를 생성할 수 없는 추상적인 클래스를 나타냅니다.
📌 가상클래스 선택자 hover, active, focus 란?
1️⃣ hover (호버)
- hover 가상 클래스는 사용자가 마우스를 요소 위로 올렸을 때 적용됩니다.
- 요소의 시각적인 스타일을 변경하여 사용자에게 상호 작용이 가능하다고 시각적으로 확인할수 있게 합니다.
주로 링크나 버튼 등의 요소에 사용되며, 마우스 호버 시에 스타일변경이 됩니다. - 즉 유저가 마우스를 클릭하거나 마우스를 가져다 댔을때 스타일의 상태가 변합니다
a:hover {
color: #FF0000; /* 호버 시 글자 색상을 빨간색으로 변경 */ }2️⃣ active (액티브)
- active 가상 클래스는 사용자가 해당 요소를 클릭하고 있는 동안에 적용됩니다.
- 클릭한 순간에 적용되며, 주로 버튼 등의 클릭 가능한 요소에 대한 시각적 효과를 나타내는 데 사용됩니다.
- 버튼을 클릭하는 동안의 스타일 변경에 활용됩니다.
button:active {
background-color: #00FF00; /* 클릭 시 배경색을 녹색으로 변경 */
color: #FFFFFF; /* 클릭 시 글자 색상을 흰색으로 변경 */
}3️⃣ focus (포커스)
- focus 가상 클래스는 사용자가 특정 요소에 포커스를 주었을 때 적용됩니다. 주로 키보드 탐색이나 입력 양식에 사용됩니다.
- 입력 양식에서 사용시 입력양식창을 클릭하면 스타일을 변경하여 포커스된 상태를 강조합니다.
- 즉 텍스트 입력 필드에 클릭하여 입력을 시작하면 해당 필드에 포커스 스타일이 적용됩니다.
input:focus {
border: 2px solid #3498db; /* 포커스 시 테두리 색상을 파란색으로 변경 */}🚨 주의사항
- 선택자의 순서는 LVHA 순서로 작성하는 것이 좋습니다.(tip : LoVe HAte 로 외우는게 쉽다고한다)
ex) :active와 :hover를 함께 사용할 때, 일반적으로 :active를 :hover보다 뒤에 작성해야 합니다.
