차이

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

--- wiki:css:css_note:css:active_selector [2021/07/01 15:14]
emblim98
+++ wiki:css:css_note:css:active_selector [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== CSS :checked Selector ======
+====== CSS :active Selector ======
 <WRAP left notice 80%>
-  * description : %%CSS :checked%% Selector
+  * description : %%CSS :active%% Selector
   * author      : 오션
   * email       : shlim@repia.com
@@ 줄 9: / 줄 9: @@
 \\
 =====The source of this article====
-[[https://www.w3schools.com/csSref/sel_checked.asp|CSS :checked Selector]]\\
+[[https://www.w3schools.com/cssref/sel_active.asp|CSS :active Selector]]\\
 ====Example====
-선택된(checked) 모든 <input> 요소의 높이와 너비를 설정합니다.\\
+활성 링크를 선택하고, 스타일을 지정합니다.\\
+\\
 <code css>
-  <style>
+<head>
-    input:checked {
+    <style>
-      height: 50px;
+        a:active {
-      width: 50px;
+            background-color: yellow;
-    }
+        }
-  </style>
+    </style>
 </head>
-<body>
-  <form action="">
-    <input type="radio" checked="checked" value="male" name="gender"> Male<br>
-    <input type="radio" value="female" name="gender"> Female<br>
-    <input type="checkbox" checked="checked" value="Bike"> I have a bike<br>
-    <input type="checkbox" value="Car"> I have a car
-  </form>
+<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=====
-''%%:checked%%'' 선택자는 모든 선택된 %%<input>%% 요소 (라디오 버튼 및 체크박스만 해당) 및 %%<option>%% 요소와 일치합니다.\\
+''%%:active%%'' 선택자는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.\\
+\\
+링크를 클릭하면 활성화됩니다.\\
+\\
+**Tip:** %%:active%% 선택자는 링크 뿐만 아니라 모든 요소에서 사용할 수 있습니다.\\
+\\
+**Tip:** link 선택자를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고\\
+%%:visited%% 선택자를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고\\
+%%:hover%% 선택자를 사용하여 마우스를 올렸을 때의 링크에 대한 스타일을 설정합니다\\
+\\
+%%Note:%% active가 유효하려면 %%CSS%% 정의에서 %%:hover%% (있는 경우) 뒤에 와야 합니다!\\
-=====CSS Syntax=====
+=====Syntax=====
 <code css>
-:checked {
+:active {
-   css declarations;
+  css declarations;
-}
 </code>
@@ 줄 46: / 줄 52: @@
 ====Example====
-선택한 모든 %%<option>%% 요소인 텍스트의 폰트 크기와 두께, 컬러가 변경됩니다.\\
+클릭할 때 %%<p>, <h1>%% 및 %%<a>%% 요소를 선택하고 스타일을 지정합니다.\\
 <code css>
+<head>
   <style>
-    option:checked {
+    p:active,
-      /* height: 100px;
+    h1:active,
-      width: 100px; */
+    a:active {
-      color: red;
+      background-color: yellow;
-      font-weight: bolder;
-      font-size: 20px;
     }
   </style>
 </head>
 <body>
+  <h1>Welcome to My Homepage</h1>
-  <select>
+  <div class="intro">
-    <option value="volvo">Volvo</option>
+    <h2 id="firstname">My name is Donald</h2>
-    <option value="saab">Saab</option>
+    <p id="hometown">I live in Duckburg</p>
-    <option value="opel">Opel</option>
+    <p>My <b>best</b> friend is Mickey</p>
-    <option value="audi">Audi</option>
+  </div>
-  </select>
+  <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 :checked Selecltor,}}
+{{tag>오션, CSS :active Selecltor,}}

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

사용자 도구

사이트 도구

차이

문서 도구