HiDevelop

CSS- 가상 클래스 본문

HTML&&CSS

CSS- 가상 클래스

꽃달린감나무 2022. 7. 16. 18:08
728x90
  • 가상 클래스( pseudo class)
    • 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다.
    • 직접 요소에 클래스를 선언하는 것이 아니라, 약속된 상황이 만족되면 브라우저 스스로 클래스를 적용해준다.

 

 

  • 문서 구조와 관련된 가상 클래스
    • :first-child : 첫 번째 자식 요소 선택
    • :last-child : 마지막 자식 요소 선택
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child { color: red; }
        li:last-child { color: blue; }
    </style>
  

</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</body>
</html>

첫 번째 <li>와 마지막 <li>에 가상 클래스가 적용됩니다.

실제 <li>요소에는 class 속성이 없지만 가상 클래스가 적용되어 아래의 코드처럼 실행됩니다.

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

 

 

  • 앵커 요소와 관련된 가상 클래스
    • :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
    • :visited : 이미 방문한 하이퍼링크를 의미
    • (하이퍼 링크는 앵커 요소에 herf 속성이 있는 것을 의미)
a:link { color: blue; }
a:visited { color: gray; }

 

  • 사용자 동작과 관련된 가상 클래스
    • :focus: 현재 입력 초점을 가진 요소에 적용
    • :hover: 마우스 포인터가 있는 요소에 적용
    • :active: 사용자 입력으로 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

:focus는 현재 입력 초점을 가진 요소에 적용된다. 예를 들어, 링크 네이버 검색창에 텍스트를 입력하기위해 마우스 클릭해서 커서가 깜빡거릴 때 그때 검색창이 초점을 받는 상태입니다. 또 바탕화면에서 키보드의 탭 키를 이용해서 각 아이콘을 탐색할때 하얀색 네모박스가 아이콘마다 이동하는 것을 볼 수 있는데 이것 또한 초점을 받은 상태입니다.

 

:hover는 마우스 커서가 있는 요소에 적용됩니다. (마우스를 올렸을 때를 의미)

 

:active는 사용자 입력으로 활성화된 요소를 의미하는데, 에를 들어 버튼을 눌렀을 때 버튼이 순간적으로 눌리는 액션을 본적이 있을 실 겁니다. 이것이 active입니다.

 

728x90

'HTML&&CSS' 카테고리의 다른 글

CSS-문서구조 관련 선택자  (0) 2022.07.16
CSS- Selector(선택자)  (0) 2022.05.24
CSS  (0) 2022.05.24
콘텐츠 모델, 시멘틱 마크업, 블록 레벨, 인라인 레벨  (0) 2022.05.20
HTML태그(5) -Form 관련 태그(4)  (0) 2022.05.19
'HTML&&CSS' Related Articles more