반응형

a 태그의 링크중 선택안되었던것은 파란색 선택된것은 보라색 으로 된걸 본적있을것이다.

이렇게 마우스의 기능에 따라 css가 바뀌는걸 가상클래스 수도클래스 라고한다

a:active{ color : green; //마우스 클릭시 css 적용 } a:hover{ //롤오버 마우스 올려놨을시 css 적용 color : red; }

마우스로 클릭시 green 으로 바뀜

마우스를 올려놨을때 red로 바뀜

만약 이경우에 a태그에 마우스를 올려놓고 클릭하였을경우

green 으로 바뀌지 않음 , 이유는 클릭과 롤오버의 이벤트가 둘다 발생하였지만

css 는 나중에 설정한 값이 우선순위가 높기때문임 그래서

hover를 위로 배치 active를 아래로 배치해야한다

hover 기능은 여러가지 다른태그에도 사용 가능

a:visited{ //방문한 링크 css 적용 color : orange; }

방문한 링크는 orange 적용

visited는 보안상 문제때문에 안에 적용하는 속성값이 상당히 제한적이다

a:link{ color : black; }

a태그의 링크의 색깔은 black 으로 적용

a:focus{ color : white; }

a태그가 tab키 등으로 인하여 포커싱이 잡혓을경우 css가 적용된다.

focus css 같은경우엔 여러가지 이유로 인해서 css의 가장 말단에 넣는것이 좋다.

input:focus 도 같은효과


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - margin 겹침  (0) 2019.03.03
CSS - 우선순위 cascading(캐스캐이딩)  (0) 2019.03.02
CSS - display 속성  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02
CSS - @media 쿼리  (0) 2019.03.02

+ Recent posts