CSS - 가상클래스 (:hover, :active,:focus)

:hover

마우스 커서가 올라가거나 포커스를 받았을 때 스타일을 변경하는데 사용됩니다.

즉, 사용자가 요소 위로 마우스 커서를 올릴 때 또는 키보드 포커스가 해당 요소에 있는 경우, hover 상태가 발생합니다.

 

:hover 사용예시

<div class='box'></div>

.box{
  height:100px;
  width:100px;
  background-color:orange;
  transition:1s;
}

.box:hover{
  width:300px;
  background-color:royalblue;
}

 

:active

 

사용자가 요소를 마우스 클릭하는 동안 해당 요소가 :active 상태가 됩니다.

 

 <p>
    <a href="#">이 링크를 클릭해보요.</a>
  </p>

 a:active {
      color: red; 
      text-decoration: none; 
    }

 

 

 

focus

사용자가 요소를 선택하거나 포커스를 이동하여 해당 요소에 초점을 맞출 때, 요소가 :focus 상태가 됩니다.

보통 폼 요소(input, textarea 등)나 링크(<a> 요소) 등 사용자가 입력 또는 선택할 수 있는 요소에 사용됩니다.

 

 

 <p>
    <label for="name">이름:</label>
    <input type="text" id="name" placeholder="이름을 입력하세요">
  </p>
  <p>
    포커스를 <a href="#">이 링크</a>에 맞춰보세요.
  </p>

 

input:focus {
      border: 2px solid red; /* 테두리를 빨간색으로 변경 */
      outline: none; /* 포커스 시 기본적으로 나타나는 외곽선 제거 */
    }

a:focus {
      color: green; /* 텍스트 색상을 초록색으로 변경 */
      text-decoration: underline; /* 밑줄 추가 */
    }