문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS :active Selector ======
<WRAP left notice 80%>
  * description : %%CSS :active%% Selector 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-01
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article====
[[https://www.w3schools.com/cssref/sel_active.asp|CSS :active Selector]]\\

====Example====
활성 링크를 선택하고, 스타일을 지정합니다.\\
\\
<code css>
<head>
    <style>
        a:active {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <a href="https://www.w3schools.com">w3schools.com</a>
    <a href="https://www.wikipeida.org">wikipedia.org</a>
    <p><b>Note:</b> The :active selector styles the active link.</p>
</body>
</code>

=====Definition and Usage=====
''%%:active%%'' 선택자는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.\\
\\
링크를 클릭하면 활성화됩니다.\\
\\
**Tip:** %%:active%% 선택자는 링크 뿐만 아니라 모든 요소에서 사용할 수 있습니다.\\
\\
**Tip:** link 선택자를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고\\ 
%%:visited%% 선택자를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고\\ 
%%:hover%% 선택자를 사용하여 마우스를 올렸을 때의 링크에 대한 스타일을 설정합니다\\
\\
%%Note:%% active가 유효하려면 %%CSS%% 정의에서 %%:hover%% (있는 경우) 뒤에 와야 합니다!\\

=====Syntax=====
<code css>
:active {
  css declarations;
</code>

=====More Examples=====

====Example====
클릭할 때 %%<p>, <h1>%% 및 %%<a>%% 요소를 선택하고 스타일을 지정합니다.\\

<code css>
<head>
  <style>
    p:active,
    h1:active,
    a:active {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <h1>Welcome to My Homepage</h1>
  <div class="intro">
    <h2 id="firstname">My name is Donald</h2>
    <p id="hometown">I live in Duckburg</p>
    <p>My <b>best</b> friend is Mickey</p>
  </div>
  <h2>Links:</h2>
  <p>Here are my favorite websites:</p>
  <a href="https://www.w3schools.com">w3schools.com</a>
  <a href="http://www.disney.com" target="_blank">disney.com</a>
  <a href="https://www.naver.com" target="_top">naver.com</a>
  <p><b>Note:</b>Click on the paragraph, headers, and links to see what is getting a style.</p>
  <p><b>Note:</b>In IE7, this example will only work on links.</p>
</body>
</code>

====Example====
방문하지 않은 링크, 방문한 링크, 마우스 오버 링크 및 활성 링크를 선택하고 스타일을 지정합니다.\\

<code css>
<head>
    <style>
        /* unvisited link */
        a:link {
            color: crimson;
        }

        /* visited link */
        a:visited {
            color: green;
        }

        /* mouse over link */
        a:hover {
            color: red;
        }

        /* selected link */
        a:active {
            color: dodgerblue;
        }
    </style>
</head>

<body>
    <p>Mouse over and click the link: <a href="https://www.w3schools.com">w3schools.com</a></p>
</body>
</code>

====Example====
링크를 다양한 스타일로 설정합니다.\\
<code css>
<head>
  <style>
    a.ex1:hover,
    a.ex1:active {
      color: red;
    }

    a.ex2:hover,
    a.ex2:active {
      font-size: 150%;
    }

    a.ex3:hover,
    a.ex3:active {
      background: red;
    }

    a.ex4:hover,
    a.ex4:active {
      font-family: monospace;
    }

    a.ex5:visited,
    a.ex5:link {
      text-decoration: none;
    }

    a.ex5:hover,
    a.ex5:active {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p>Mouse over the links to see them change layout.</p>
  <p><a class="ex1" href="default.asp">This link changes color</a></p>
  <p><a class="ex2" href="default.asp">This link changes font-size</a></p>
  <p><a class="ex3" href="default.asp">This link changes background-color</a></p>
  <p><a class="ex4" href="default.asp">This link changes font-family</a></p>
  <p><a class="ex5" href="https://www.naver.com">This link changes text-decoration</a></p>
</body>
</code>




{{tag>오션, CSS :active Selecltor,}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
