CSS 가상 클래스 선택자

이번 포스트가 CSS 선택자 마지막 포스트다.

이번에는 가상 클래스 선택자에 대해서 알아보자.

이전 포스트

생활코딩 CSS 수업 영상: 가상 클래스 선택자

가상 클래스 선택자^{Pseudo Class Selector}는 앞서 배운 태그, 아이디, 클래스 선택자처럼 HTML에 물리적으로 존재하는 이름을 고르는 것이 아니라, 특정한 상태에 있는 요소를 선택해서 스타일을 정의할 수 있는 선택자다.

선택자	의미	주요 역할
:link	방문하지 않은 링크	링크의 초기 상태 디자인 (기본 파란색 대신 다른 색 지정)
:visited	방문한 적이 있는 링크	사용자가 이미 클릭했던 링크임을 알림 (기본 보라색 변경)
:hover	마우스를 올렸을 때	버튼의 색이 변하거나 이미지가 커지는 등의 반응 (가장 많이 사용)
:active	클릭하는 순간	버튼을 꾹 누르고 있는 찰나의 피드백 (눌림 효과)
:focus	포커스가 되었을 때	탭(Tab) 키로 이동하거나 입력창(input)을 클릭해 커서가 깜빡일 때

위의 생활코딩 영상에서 소개한 5대 가상 클래스 선택자의 역할을 표로 정리하면 이렇다.

아래에서 조금 더 자세히 설명해 보겠다.

가상 클래스 선택자들의 규칙 및 특징

a:link {
    color: black;
}
a:visited {
    color: red;
}
a:hover {
    color: yellow;
}
a:active {
    color: green;
}
a:focus {
    color: white;
}

위의 생활코딩 영상에서 사용한 코드다.

이 코드를 보면서 가상 클래스 선택자들의 규칙과 특징을 살펴보자.

1. 아주 중요한 규칙: 순서

가상 클래스를 사용할 때 가장 조심해야 할 규칙이 있다.

바로 작성 순서다.

CSS는 아래에 쓴 코드가 위의 코드를 덮어쓰는 성질이 있기 때문에, 순서가 틀리면 특정 상태가 작동하지 않을 수 있다.

권장 순서: L → V → H → A

:link
:visited
:hover
:active

이 순서를 지키지 않고 :hover를 :active 다음에 쓰면, 버튼을 클릭하는 순간에도 마우스는 여전히 버튼 위에(hover) 있기 때문에 클릭 효과(active)가 무시될 수 있다.

그래서 이 순서를 지키는 것이 좋다.

LoVe - HAte라고 외우면 기억하기 쉽다.

2. 가상 클래스의 특징 및 주의사항

01. 꼭 a 태그에만 쓰는가?

영상에서 <a> 태그에 가상 클래스 선택자를 사용하는 것을 보여줬기 때문에 "<a> 태그에만 사용하는 건가?"라고 생각하기 쉽지만 그렇지 않다.

:hover, :active, :focus 등은 <div>, <button>, <li>, <input> 등 거의 모든 요소에 사용할 수 있다.

다만, :link와 :visited는 링크 상태를 나타내므로 보통 <a> 태그에만 사용한다.

02. :focus의 중요성 (웹 접근성)

마우스가 갑자기 고장 난 사용자나 시각 장애가 있는 분들은 키보드의 Tab 키를 이용해 메뉴를 이동한다.

이때 :focus 스타일이 명확해야 현재 어디를 선택하고 있는지 알 수 있다.

디자인적으로 마음에 들지 않는다고 outline: none;으로 지워버려서는 안 된다.

03. 보안상의 이유로 제한되는 :visited

개인 정보 보호를 위해 :visited에는 바꿀 수 있는 스타일이 제한적이다. (글자 색상, 배경 색상 등만 가능)

방문 기록을 이용해 사용자의 동선을 파악하는 해킹을 방지하기 위해서다.

영상에서는 소개하지 않은 가상 클래스 선택자들은 이 페이지를 통해 확인하자.

선택자 게임 정답

이전 포스트에서 소개한 CSS 선택자 게임의 정답 영상들이다.

생활코딩 CSS 수업 영상: 속성을 공부하는 방법

이 영상은 새로운 코드를 배우는 영상은 아니다.

그냥 "CSS 속성을 공부할 때 이런 식으로 공부하면 좋다"는 쉬어가는 느낌의 3분 30초 정도의 영상이다.

오늘의 포스트는 여기까지다.

다음 포스트

CSS 가상 클래스 선택자

생활코딩 CSS 수업 영상: 가상 클래스 선택자