🧑🏼‍💻 가상 클래스 선택자?

텍스트 색상도 바꿔보고 배경도 꾸며봐도 정적인 웹 페이지는 매력이 떨어집니다. 사용자가 많은 웹 페이지에서는 마우스만 올려놔도 이미지가 움직이고, 메뉴바가 생기는 장면을 봤을 것입니다. 이번에는 웹 페이지를 좀더 동적이게 바꿀 수 있는 가상 클래스 선택자에 대해 알아보겠습니다.

🤹‍♀️ : 가상이벤트

가상 클래스 선택자는 tag뒤에 :(가상이벤트)를 붙이는 형식의 문장구조를 사용합니다.

.myClass img:hover{ 
	opacity: 0;
}

위의 코드는 myClass클래스 안에 있는 이미지 요소들에게 hover라는 이벤트가 발생 했을 때 적용될 스타일을 표현합니다.

:link

:link는 a 태그에 적용되는 가상 선택자로 방문하기 전 링크들을 선택합니다. 반대의 경우에는 :visited를 사용하여 선택합니다.

.Contact a:link{
	color: red;
}

:hover

:hover는 마우스가 롤오버 되었을때 스타일이 적용되는 선택자입니다. 쉽게말해 마우스 커서를 올리면 스타일이 바뀌죠. 자주 사용되는 가상 선택자로 알아두면 좋습니다. 비슷한 가상 선택자로는 마우스를 클릭하였을 때 적용되는 :active가 있습니다.

.About h1:hover{
	background-color: blue;
}

:focus

:focus는 보통 input태그에서 자주 사용되는 선택자로 포커스 되었을때 스타일이 적용됩니다.

input:focus{
	background: orange;
}

:first-child

:first-child와 :last-child 선택자는 각각 첫번째와 마지막 자식 요소를 선택하게 됩니다. 더 나아가 :nth-child(2n+1)는 홀수번째 자식을 선택합니다.

.Work>div:nth-child(2n+1){
	background-color: gold;
}