CSS 가상 클래스 선택자

이번 포스트가 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 Pseudo-classes

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

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

선택자 게임 정답

CSS Diner - Where we feast on CSS Selectors!

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

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

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

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

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

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

다음 포스트

CSS 폰트 사이즈 px, em, rem 완벽 가이드, rem 권장 이유와 px을 rem으로 환산하는 방법

CSS 폰트 사이즈, 왜 rem이 정석일까? 절대 단위 px와 상대 단위 em, rem의 차이점, 웹 접근성과 유지보수 면에서 rem이 좋은 이유를 정리했습니다. 1rem(16px)을 기준으로 원하는 픽셀을 rem으로 정확하게 환산하는 계산 공식까지 확인해 보세요.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.