Active

active의 한 구절은 영어로 "active"로 해석되는데, 이는 마우스 클릭을 의미합니다. 액티브 셀렉터의 가장 일반적인 예는 아마도 링크에 적용될 것입니다. 그러나 링크를 여는 것은 순간적인 동작이므로 액티브 셀렉터의 특성을 잘 반영하지 못합니다.

Active의 특징

사실 active로 링크를 열 때 active를 활성화시키는 과정이 있는데, 모듈을 릴리즈할 때까지 해당 모듈을 클릭하는 것입니다. 이 과정에 걸리는 시간을 따로 명시하지 않으면 기본적으로 수십분의 1초 정도 걸리는 것 같아요.

<!DOCTYPE html><html>
  <head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
      <style>
      a{
        display:block;
        width:30px;
        margin:20px;
        border-radius:8px;
        padding:20px 50px;
        text-align:center;
        background:green;
      }
      a:active{
        background:indigo;
      }
    </style>
  </head>
  
  <body>
    <a href="paris.jpg">link</a>
  </body></html>

로그인 후 복사

전환 속성을 통해 이 시간을 조정할 수 있습니다.

      a:active{
        background:indigo;
        transition:3s;
      }

로그인 후 복사

독자는 실험을 수행하고 전환 값을 변경한 다음 avtive 선택기에 소요된 시간을 테스트할 수 있습니다.

ACTIVE example

<!DOCTYPE html><html>
  <head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style> 
       p      {
        width:100px;
        height:100px;
        background:red;
        transition: 5s;
       }

        p:active       {
        width:300px;
        height:300px;
        transition:3s;
        }
      </style>
  </head>
  <body>
  <p></p>
  </body></html>

로그인 후 복사

전환이 두 개 있다는 것은 전환이 두 개 있다는 뜻입니다.