사용자 동작에 반응하는 가상 클래스

사용자 동작에 반응하는 가상 클래스

• 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용합니다.
• 메뉴에서 몇 번째 항목이라든가 단락의 첫 번째 글자 등을 선택하고 싶은 경우 클래스 이름 앞에 콜론(:)을 붙여 ㅍ표시하는 가상 클래스와 클래스 이름 앞에 콜론 두개(::)를 붙여 표시하는 가상 요소를 사용합니다.

:link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용

• 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다.
• 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용합니다.

:visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용

• 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다.
• 방문한 텍스트 링크는 기본적으로 자주색으로 표시되는데 사용하자 방문했던 링크도 일반 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조정합니다.

:hover 가생 클래서 선택자 - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

• 웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정합니다.
• 이미지 위로 아무스 커서를 올려놓으면 다른 이미지로 바뀌었다가 마우스 커서를 치우면 원래 이미지로 돌아오는 롤오버 효과(rollover)를 만들 수 있습니다.

:active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용

• 링크나 이미지 등 웹 요소를 활성화했을 때(누르고 있을때)의 스타일을 지정합니다.
• 링크를 클릭했을 때의 스타일을 지정합니다.

:focus 가상 클래스 선택자 - 웹 요소에 포커스가 맞추어졌을 때의 스타일 적용

• 웹 요소에 포커스가 맞추어졌을 때의 스타일을 지정합니다.
• 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 tab을 눌러 포커스를 이동했을 때의 스타일을 지정합니다.

가상 선택자의 순서

• 가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다.
• 순서대로 :link 선택자부터 정의하고 :visited, :hover(:focus), :active 순서대로 정의해야 합니다.
• 위의 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않습니다.