가상 클래스

chhaewxn·2022년 5월 22일
0

웹 UI 개발

목록 보기
7/19
post-thumbnail

가상 클래스(pseudo class)

가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다.

예를 들어, <p>가 있다고 가정하겠습니다. 이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요? 가상 클래스가 없다면 이런 과정을 거치게 됩니다.

임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다.
p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다.
p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다.

여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없습니다. 어쩔 수 없이 다른 언어를 사용해야 하는데, 이는 개발 비용이 들어가는 일입니다. 그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했습니다.

:pseudo-class {
property: value;
}

위처럼 가상 클래스는 :(콜론) 기호를 써서 나타냅니다.

가상 클래스를 이용하면 아래의 경우에도 CSS만으로 처리가 가능하므로 훨씬 효율적입니다.

":hover 가상 클래스 선택자를 이용해서 스타일 규칙을 만든다. (hover는 마우스 커서가 올라갔을 때 적용이 되도록 정의되어 있습니다.)"

문서 구조와 관련된 가상 클래스

문서 구조와 관련된 가상 클래스는 first-childlast-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>
+) 그외의 CSS 선택자

https://www.w3schools.com/cssref/css_selectors.asp

profile
@chhaewxn

0개의 댓글