wiki:css:css_note:css:active_selector
문서의 이전 판입니다!
CSS :active Selector
- description : CSS :active Selector
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-06
Ref
CSS :active Selector
활성 링크(active link)를 선택하고 스타일을 지정합니다.
<!DOCTYPE html> <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> </html>
Definition and Usage
:active 셀렉터는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.
링크를 클릭하면 활성화됩니다.
Tip: :active 셀렉터는 링크 뿐만 아니라, 모든 요소에서 사용할 수 있습니다.
Tip:
:link 셀렉터를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고
:visited 셀렉터를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고
:hover 셀렉터를 사용하여 링크에 마우스 오버 시 링크 스타일을 지정합니다.
Note: :active가 유효하려면, CSS 정의에서 :hover (있는 경우) 뒤에 와야 합니다!
CSS Syntax
:active { css declarations; }
More Example
클릭 할 때, <p>, <h1> 및 <a> 요소를 선택하고 스타일을 지정하십시오.
<!DOCTYPE html> <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> </html>
unvisited, visited, hover, 그리고 활성 링크를 선택하여 스타일을 지정합니다.
<!DOCTYPE html> <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> </html>
링크에 다양한 스타일을 지정합니다.
/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
