의사 클래스의 문법
선택자:의사클래스이름 {속성:속성값;} 선택자.클래스이름:의사클래스이름 {속성:속성값;} 선택자#아이디이름:의사클래스이름 {속성:속성값;} /*class나 id에도 사용가능*/
: 아직 링크를 방문하지 않은 상태에 적용 (a요소 기본)
대게 <a>
, <area>
, <link>
a:link{
backgrond-color: red;
}
/*링크 누르기 전, 배경색 빨강*/
: 방문한 링크
● 규칙
:link
뒤, :hover
, :active
앞에 배치해야함● 스타일 제한
: 웹 상에서 마우스 커서를 갖다댄 상태 (클릭 아님!)
= 사용자가 포인팅 장치를 사용해 상호작용 중인 요소
사용예시
p:hover{
background-color: orange;
}
: 사용자가 활성화한 요소. 마우스를 사용한 경우, 활성이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미.
대게 <a>
, <button>
● 규칙
:active
규칙은 다른 모든 링크 규칙보다 뒤에 배치되어야 함a:link { color: green;} /* 방문하지 않은 링크*/
a:visited { clolor: purple;} /*방문한 링크*/
a:hover { color: yellow;} /*마우스 올린 링크*/
a:active { color: red;} /*활성화한 링크*/