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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css » active_selector
wiki:css:css_note:css:active_selector

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css:active_selector [2021/04/06 20:29]
emblim98 		wiki:css:css_note:css:active_selector [2023/01/13 18:44] (현재)
줄 1: 줄 1:
 ====== CSS :active Selector ====== ====== CSS :active Selector ======
 <WRAP left notice 80%> <WRAP left notice 80%>
-  * description : CSS :active Selector +  * description : %%CSS :active%% Selector 
   * author      : 오션   * author      : 오션
   * email       : shlim@repia.com   * email       : shlim@repia.com
-  * lastupdate  : 2021-04-06+  * lastupdate  : 2021-07-01
 </WRAP> </WRAP>
 <WRAP clear></WRAP> <WRAP clear></WRAP>
 \\ \\
-====Ref====+=====The source of this article====
 [[https://www.w3schools.com/cssref/sel_active.asp|CSS :active Selector]]\\ [[https://www.w3schools.com/cssref/sel_active.asp|CSS :active Selector]]\\
 +
 +====Example====
 +활성 링크를 선택하고, 스타일을 지정합니다.\\
 \\ \\
-__활성 링크__(active link)를 선택하고 스타일을 지정합니다.\\ 
 <code css> <code css>
-<!DOCTYPE html> 
 <head> <head>
     <style>     <style>
-        a:active {background-color: yellow;}+        a:active { 
 +            background-color: yellow; 
 +        }
     </style>     </style>
 </head> </head>
 +
 <body> <body>
     <a href="https://www.w3schools.com">w3schools.com</a>     <a href="https://www.w3schools.com">w3schools.com</a>
줄 24: 줄 28:
     <p><b>Note:</b> The :active selector styles the active link.</p>     <p><b>Note:</b> The :active selector styles the active link.</p>
 </body> </body>
-</html> 
 </code> </code>
-\\+
 =====Definition and Usage===== =====Definition and Usage=====
-''%%:active%%'' 셀렉터는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.\\+''%%:active%%'' 선택자는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.\\
 \\ \\
 링크를 클릭하면 활성화됩니다.\\ 링크를 클릭하면 활성화됩니다.\\
 \\ \\
-**Tip:** %%:active%% 셀렉터는 링크 뿐만 아니라, 모든 요소에서 사용할 수 있습니다.\\+**Tip:** %%:active%% 선택자는 링크 뿐만 아니라 모든 요소에서 사용할 수 있습니다.\\
 \\ \\
-**Tip:**\\ +**Tip:** link 선택자를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고\\  
-**%%:link%%** 셀렉터를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고\\  +%%:visited%% 선택자를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고\\  
-**%%:visited%%** 셀렉터를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고\\  +%%:hover%% 선택자를 사용하여 마우스를 올렸을 때의 링크에 대한 스타일을 설정합니다\\
-**%%:hover%%** 셀렉터를 사용하여 링크에 마우스 오버 시 링크 스타일을 지정합니다.\\+
 \\ \\
-**Note:** %%:active%%가 유효하려면, CSS 정의에서 %%:hover%% (있는 경우) 뒤에 와야 합니다!\\ +%%Note:%% active가 유효하려면 %%CSS%% 정의에서 %%:hover%% (있는 경우) 뒤에 와야 합니다!\\ 
-\\ + 
-====CSS Syntax====+=====Syntax=====
 <code css> <code css>
 :active { :active {
   css declarations;   css declarations;
-} 
 </code> </code>
-====More Example==== + 
-클릭 할 때, <p>, <h1> 및 <a> 요소를 선택하고 스타일을 지정하십시오.\\+=====More Examples===== 
 + 
 +====Example==== 
 +클릭할 때 %%<p>, <h1>%% 및 %%<a>%% 요소를 선택하고 스타일을 지정합니다.\\ 
 <code css> <code css>
-<!DOCTYPE html> 
 <head> <head>
   <style>   <style>
-    p:active, h1:active,a:active {background-color: yellow;}+    p:active, 
 +    h1:active, 
 +    a:active { 
 +      background-color: yellow; 
 +    }
   </style>   </style>
 </head> </head>
 +
 <body> <body>
   <h1>Welcome to My Homepage</h1>   <h1>Welcome to My Homepage</h1>
줄 71: 줄 80:
   <p><b>Note:</b>In IE7, this example will only work on links.</p>   <p><b>Note:</b>In IE7, this example will only work on links.</p>
 </body> </body>
-</html> 
 </code> </code>
-\\ + 
-unvisited, visited, hover, 그리고 활성 링크를 선택하여 스타일을 지정합니다.\\+====Example==== 
 +방문하지 않은 링크, 방문한 링크, 마우스 오버 링크 및 활성 링크를 선택하고 스타일을 지정합니다.\\ 
 <code css> <code css>
-<!DOCTYPE html> 
 <head> <head>
     <style>     <style>
         /* unvisited link */         /* unvisited link */
-        a:link {color: crimson;}+        a:link { 
 +            color: crimson; 
 +        } 
         /* visited link */         /* visited link */
-        a:visited {color: green;}+        a:visited { 
 +            color: green; 
 +        } 
         /* mouse over link */         /* mouse over link */
-        a:hover {color: red;}+        a:hover { 
 +            color: red; 
 +        } 
         /* selected link */         /* selected link */
-        a:active {color: dodgerblue;}+        a:active { 
 +            color: dodgerblue; 
 +        }
     </style>     </style>
 </head> </head>
 +
 <body> <body>
     <p>Mouse over and click the link: <a href="https://www.w3schools.com">w3schools.com</a></p>     <p>Mouse over and click the link: <a href="https://www.w3schools.com">w3schools.com</a></p>
 </body> </body>
-</html> 
 </code> </code>
-\\ + 
-링크에 다양한 스타일을 지정합니다.\\+====Example==== 
 +링크를 다양한 스타일로 설정합니다.\\
 <code css> <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> </code>
  
줄 103: 줄 165:
  
  
-  
 {{tag>오션, CSS :active Selecltor,}} {{tag>오션, CSS :active Selecltor,}}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css/active_selector.1617708594.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki