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

안녕하세요 웹아이 입니다.!!

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 박스가 포커스 될 때 배경색을 노란색으로 적용합니다.