CSS의 선택자_세번째 | 속성선택자_가상클래스 - STUDY

CSS의 선택자 중에 가상클래스에 대해서 알아보겠습니다.
가상클래스는 '슈도클래스'라고도 합니다.
웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 지정하여 사용하는 것을 말합니다.

:link 선택자

문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용할 때 사용합니다.
텍스트 링크는 기본으로 파란색 글씨와 밑줄로 표시되는데, 링크의 밑줄을 없애거나 글자의 색상을 바꿀 때 사용합니다. a:link { color:black; text-decoration:none; } A 태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 검은색으로 적용합니다.

:visited 선택자

문서 안의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용할 때 사용합니다.
방문한 링크의 텍스트는 기본으로 purple색으로 표시되는데, 이 텍스트의 스타일을 바꿀 때 사용합니다. a:visited { color:black; } A 태그로 중 한 번 이상 방문하한 링크는 글자를 검은색으로 적용합니다.

:active 선택자

해당 요소가 활성화 되었을 때의 스타일을 지정합니다.
링크요소를 예를 들면, 링크를 클릭 했을 때의 스타일을 지정할 때 사용합니다. a:active { color:black; } A 태그로 링크를 건 부분을 클릭하는 순간 검은색 글자를 표시합니다.

:hover 선택자

해당 요소 위에 마우스 포인터를 올려놓았을 때의 스타일을 적용합니다.
링크요소를 예로 들면, 링크에 마우스를 올려놓았을 때의 스타일을 적용합니다. a:hover { color:red; text-decoration:underline; } A 태그로 링크를 건 부분 중 마우스를 올려놓았을 때 글자색을 빨간색으로 하고 밑줄이 생기도록 적용합니다.

:focus 선택자

해당 요소에 초점이 맞춰졌을 때의 스타일을 지정합니다.
예를 들면 아이디를 입력하기 위해 텍스트필드를 클릭해 안에 마우스 커서가 깜박이는 상태라거나 Tab키를 눌러 포커스를 이동했을 때의 스타일을 지정합니다. input:focus { background-color:yellow; } INPUT 박스가 포커스 될 때 배경색을 노란색으로 적용합니다.