선택자_가상 클래스(의사 클래스)

CSS의 가상 클래스(의사 클래스)는 선택자에 추가하는 키워드이다.

 

1. hover

 

a:hover {

    color: red;

}

처럼 사용. a는 선택자(태그, 클래스 선택자 등 여부 상관 없음)

태그 옆에 :hover 를 붙여서 사용.

선택자 a 요소에 마우스 커서가 올라가 있는 동안 활성화.

 

 

 

2. active

 

a:active {

    color: red;

}

선택자 a 요소에 마우스를 클릭하고 있는 동안에 활성화.

 

 

 

3. focus

 

포커스가 될 수 있는 요소는 몇가지로 정해져 있다.

대표적으로 input 요소가 그렇고 그 외에도 사용자에게 정보를 입력받는 'html 대화형 콘텐츠'가 해당한다.

INPUT, A, BUTTON, LABEL, SELECT 등 여러 요소가 있다.

그리고 html 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용한 요소도 focus가 될 수 있다.

검색어: html 대화형 콘텐츠 mdn

 

input:focus {

    background-color: orange;

}

이런 방식으로 작성한다.

input 요소가 활성화 된 동안에는 배경 색상이 오렌지색으로 변한다.

 

그리고 tabindex 속성을 이용하면 대화형 콘텐츠가 아니더라도 focus가 될 수 있게 만들 수 있다.

이름에서도 알 수 있듯 tab 키를 이용해 focus 할 수 있는 순서를 지정하는 속성이다.

순서값으로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다. -1로 설정하면 연속 키보드 탐색으로는 접근할 수 없으나 마우스 클릭으로는 접근 가능해진다.

 

사용법은 html의 요소에 tabindex="-1" 속성을 작성하면 된다. 그려면 해당 요소가 focus 가능하게 변하고, 클릭하면 focus 상태시 활성화 되도록 작성한 CSS코드들이 실행된다.

다른 요소로 focus가 넘어가면 focus가 해제되며 다시 원래 상태로 돌아간다.

tabindex는 focus가 가능한 input요소 등 대화형 콘텐츠에는 사용하는 걸 피해야한다.