차이

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

--- wiki:css:css_note:css:active_selector [2021/04/06 20:17]
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====
+활성 링크를 선택하고, 스타일을 지정합니다.\\
 \\
-__활성 링크__(active link)를 선택하고 스타일을 지정합니다.\\
+<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%%'' 셀렉터는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.\\
+''%%:active%%'' 선택자는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.\\
 \\
 링크를 클릭하면 활성화됩니다.\\
 \\
-**Tip:** %%:active%% 셀렉터는 링크 뿐만 아니라, 모든 요소에서 사용할 수 있습니다.\\
+**Tip:** %%:active%% 선택자는 링크 뿐만 아니라 모든 요소에서 사용할 수 있습니다.\\
 \\
-**Tip:** : link 셀렉터를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고\\
+**Tip:** link 선택자를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고\\
-%%:visited%% 셀렉터를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고\\
+%%:visited%% 선택자를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고\\
-%%:hover%% 셀렉터를 사용하여 링크에 마우스 오버 시 링크 스타일을 지정합니다.\\
+%%:hover%% 선택자를 사용하여 마우스를 올렸을 때의 링크에 대한 스타일을 설정합니다\\
 \\
-**Note:** %%:active%%가 유효하려면, CSS 정의에서 %%:hover%% (있는 경우) 뒤에 와야 합니다!\\
+%%Note:%% active가 유효하려면 %%CSS%% 정의에서 %%:hover%% (있는 경우) 뒤에 와야 합니다!\\
-\\
-====CSS Syntax====
+=====Syntax=====
 <code css>
 :active {
   css declarations;
-}
 </code>
-====More Example====
-클릭 할 때, <p>, <h1> 및 <a> 요소를 선택하고 스타일을 지정하십시오.\\
+=====More Examples=====
-<HTML>
-<!DOCTYPE html>
+====Example====
+클릭할 때 %%<p>, <h1>%% 및 %%<a>%% 요소를 선택하고 스타일을 지정합니다.\\
+<code css>
 <head>
   <style>
-    p:active, h1:active,a:active {background-color: yellow;}
+    p:active,
+    h1:active,
+    a:active {
+      background-color: yellow;
+    }
   </style>
 </head>
 <body>
   <h1>Welcome to My Homepage</h1>
@@ 줄 70: / 줄 80: @@
   <p><b>Note:</b>In IE7, this example will only work on links.</p>
 </body>
-</html>
+</code>
-</HTML>
+====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

사용자 도구

사이트 도구

차이

문서 도구