차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css:active_selector [2021/04/06 19:56]
emblim98 만듦
+++ wiki:css:css_note:css:active_selector [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ====== CSS :active Selector ======
 <WRAP left notice 80%>
-  * description : CSS :active Selector
+  * description : %%CSS :active%% Selector
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2021-04-06
+  * lastupdate  : 2021-07-01
 </WRAP>
 <WRAP clear></WRAP>
 \\
-====Ref====
+=====The source of this article====
 [[https://www.w3schools.com/cssref/sel_active.asp|CSS :active Selector]]\\
+====Example====
+활성 링크를 선택하고, 스타일을 지정합니다.\\
 \\
-활성 링크를 선택하고 스타일을 지정합니다.\\
+<code css>
-<HTML>
-<!DOCTYPE html>
 <head>
     <style>
-        a:active {background-color: yellow;}
+        a:active {
+            background-color: yellow;
+        }
     </style>
 </head>
 <body>
     <a href="https://www.w3schools.com">w3schools.com</a>
@@ 줄 24: / 줄 28: @@
     <p><b>Note:</b> The :active selector styles the active link.</p>
 </body>
-</html>
+</code>
-</HTML>
+=====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

사용자 도구

사이트 도구

차이

문서 도구