[CSS] 링크 의사 클래스

gogori6565·2022년 7월 8일
0

CSS

목록 보기
3/4

의사 클래스의 문법

선택자:의사클래스이름 {속성:속성값;}
선택자.클래스이름:의사클래스이름 {속성:속성값;}
선택자#아이디이름:의사클래스이름 {속성:속성값;}
/*class나 id에도 사용가능*/

링크 의사 클래스

: 아직 링크를 방문하지 않은 상태에 적용 (a요소 기본)
대게 <a>, <area>, <link>

a:link{
	backgrond-color: red;
}
/*링크 누르기 전, 배경색 빨강*/

:visited

: 방문한 링크

● 규칙

  • :link 뒤, :hover, :active 앞에 배치해야함

● 스타일 제한

  • 사용가능한 css 속성 : color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color

:hover

: 웹 상에서 마우스 커서를 갖다댄 상태 (클릭 아님!)
= 사용자가 포인팅 장치를 사용해 상호작용 중인 요소

사용예시

p:hover{
	background-color: orange;
}

:active

: 사용자가 활성화한 요소. 마우스를 사용한 경우, 활성이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미.
대게 <a>, <button>

● 규칙

  • :active 규칙은 다른 모든 링크 규칙보다 뒤에 배치되어야 함
a:link { color: green;} /* 방문하지 않은 링크*/
a:visited { clolor: purple;} /*방문한 링크*/
a:hover { color: yellow;} /*마우스 올린 링크*/
a:active { color: red;} /*활성화한 링크*/
profile
p(´∇`)q

0개의 댓글