가상 클래스(pseudo class)
가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다.
우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다.
예를 들어, <p>가 있다고 가정하겠습니다.
이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요?
가상 클래스가 없다면 이런 과정을 거치게 됩니다.
- 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다.
- p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다.
- p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다.
여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없습니다.
어쩔 수 없이 다른 언어를 사용해야 하는데, 이는 개발 비용이 들어가는 일입니다.
그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했습니다.
:pseudo-class {
property: value;
}위처럼 가상 클래스는 :(콜론) 기호를 써서 나타냅니다.
가상 클래스를 이용하면 아래의 경우에도 CSS만으로 처리가 가능하므로 훨씬 효율적입니다.
":hover 가상 클래스 선택자를 이용해서 스타일 규칙을 만든다. (hover는 마우스 커서가 올라갔을 때 적용이 되도록 정의되어 있습니다.)"
가상 클래스에는 여러 가지가 있습니다.
이 수업에서는 가장 기초적이고 대표적인 가상 클래스만을 설명해 드리기 때문에 아래 링크를 참고 직접 공부하시길 바랍니다.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
문서 구조와 관련된 가상 클래스
문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자 입니다.
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>li:first-child { color: red; }
li:last-child { color: blue; }첫 번째 <li>와 마지막 <li>에 가상 클래스가 적용됩니다.
실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 마치 아래의 코드와 같이 동작하게 됩니다.
<ul>
<li class="first-child">HTML</li>
<li>CSS</li>
<li class="last-child">JS</li>
</ul>
앵커 요소와 관련된 가상 클래스
앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있습니다.
- :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미합니다.
a:link { color: blue; }
a:visited { color: gray; }
사용자 동작과 관련된 가상 클래스
이 클래스들도 <a>에 주로 많이 쓰입니다.
<a>에만 쓸 수 있는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능합니다.
- :focus: 현재 입력 초점을 가진 요소에 적용
- :hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }:focus는 현재 입력 초점을 가진 요소에 적용됩니다.
focus(초점)는 지금 현재 선택을 받는 것을 의미합니다.
예를 들면, 입력 폼 요소에 텍스트를 입력하려고 마우스 클릭해서 커서를 입력 폼 위에 올려놓으면 그때 입력 폼 요소가 초점을 받는 상태입니다.
또 키보드의 탭 키를 이용해서 요소를 탐색하다 보면 링크나 버튼에 점선 테두리가 이동하는 것을 볼 수 있는데, 점선 테두리가 위치하는 것도 초점을 받은 상태입니다.
:hover는 마우스 커서가 있는 요소에 적용됩니다. (마우스를 올렸을 때를 의미합니다.)
:active는 사용자 입력으로 활성화된 요소를 의미하는데, <a>를 클릭할 때 또는 <button>를 눌렀을 때처럼 순간적으로 활성화됩니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
a:focus { background-color: yellow }
a:hover { font-weight: bold }
a:active { color: red }
</style>
</head>
<body>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>
</body>
</html>
참고자료
'코딩 공부' 카테고리의 다른 글
| 비전공자를 위한 HTML/CSS-구체성 (0) | 2022.05.03 |
|---|---|
| 비전공자를 위한 HTML/CSS-가상 선택자 2 (0) | 2022.05.03 |
| 비전공자를 위한 HTML/CSS-문서 구조 관련 선택자 (0) | 2022.05.03 |
| 비전공자를 위한 HTML/CSS-선택자3 (0) | 2022.05.03 |
| 비전공자를 위한 HTML/CSS-선택자2 (0) | 2022.05.03 |