Multi Developer SuHo

CSS 가상 선택자(Pseudo-selector) 본문

html5+CSS3

CSS 가상 선택자(Pseudo-selector)

Dreaming Developer Student 2024. 2. 24. 17:58
SMALL

안녕하세요~ 새학기가 다가오고 있습니다. 새학기 준비 잘하시고, 건강이 우선이랍니다!!  
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com

오늘은 가상 선택자(Pseudo-selector)에 대해 알아보겠습니다. 우선 가상 선택자(Pseudo-selector )가 무엇인지 살펴보겠습니다.가상 선택자(Pseudo-selector)란?  -  특정 상태에 있는 요소를 선택할 때 사용하는 선택자를 의미합니다. 여기서  가상 선택자는 두 가지 유형이 존재합니다.  하나는 가상 클래스 선택자이고 다른 하나는 가상 요소 선택자입니다.
가상 클래스 선택자: 요소의 특정 상태를 기반으로 선택합니다.
예를 들어, :hover는 요소 위에 마우스가 올라갔을 때, :focus는 요소가 포커스를 받았을 때, :visited는 사용자가 방문한 링크를 선택할 때 사용합니다. 또한 :nth-child(n) 같은 구조적 가상 클래스도 있습니다.
가상 요소 선택자: 요소의 특정 부분을 선택합니다. 가상 요소 선택자는 :: 두 개의 콜론으로 표시합니다. 예를 들어, ::before는 요소의 내용 전에, ::after는 요소의 내용 후에 콘텐츠를 추가할 때 사용합니다.

다음 소스코드는 :visited (가상선택자) 예시를 둔  소스코드 입니다.  특정 링크를 사용자가 방문했을 때 다른 색상으로  표시 되도록 하였습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      background-color: chartreuse;
      margin-bottom: 15px;
    }

    a:visited {
      color: deeppink;
    }
  </style>
</head>
<body>
  <div></div>
  <a href="https://www.naver.com">네이버로 이동하기</a>
</html>

 


이렇게 a 태그의 해당된 링크가 설정된 색상으로 변경된 것을 보실 수 있습니다.


다음은 :active (가상 선택자)를 사용한 소스코드와 결과입니다.
:active는 가상 클래스 선택자 중 하나로, 사용자가 요소를 활성화시키는 순간에 적용되는 스타일을 정의합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      background-color: chartreuse;
      margin-bottom: 15px;
    }

    div:active {
      background-color: aqua;
    }

    a:visited {
      color: deeppink;
    }
  </style>
</head>
<body>
  <div></div>
  <a href="https://www.naver.com">네이버로 이동하기</a>
</html><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      background-color: chartreuse;
      margin-bottom: 15px;
    }

    div:active {
      background-color: aqua;
    }

    a:visited {
      color: deeppink;
    }
  </style>
</head>
<body>
  <div></div>
  <a href="https://www.naver.com">네이버로 이동하기</a>
</html>

 

이렇게 박스에 마우스를 클릭하게 되면 지정된 스타일로 변경되신 것을 보실 수 있습니다. 

마지막으로 :focus (가상 선택자)를 사용한 소스코드와 결과입니다.
 :focus는 가상 클래스 선택자 중 하나로, 사용자가 요소를 선택하거나 입력에 초점을 맞추었을 때 적용되는 스타일을 정의합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      background-color: chartreuse;
      margin-bottom: 15px;
    }

    div:active {
      background-color: aqua;
    }

    a:visited {
      color: deeppink;
    }
    input:focus {
      background-color: gold;
      text-align: center;
    }
  </style>
</head>
<body>
  <div></div>
  <a href="https://www.naver.com">네이버로 이동하기</a>
  <input type="text" placeholder="계정을 입력하세요..."/>
</html>





이렇게 텍스트 입력창에 클릭을 하게 되면 스타일이 적용됩니다. 
이상으로 오늘 소개할 내용은 여기까지입니다. 설명이 부족한 부분이 있더라도 참고용으로 생각해주시면 감사하겠습니다.

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

CSS 여백과 테두리 스타일 적용  (0) 2024.02.29
CSS 배경에 적용할 수 있는 속성(Background-Style)  (0) 2024.02.29
CSS 링크(link), 리스트 스타일(list-style)  (0) 2024.02.24
CSS 텍스트와 폰트 스타일  (0) 2024.02.23
CSS 선택자의 종류와 개념  (0) 2024.02.20
'html5+CSS3' Related Articles more