ENFJ 비전공자 개발스터디

CSS pseudo-classes 가상 클래스 선택자(link, visited, active, hover, text-decoration) 본문

HTML CSS

CSS pseudo-classes 가상 클래스 선택자(link, visited, active, hover, text-decoration)

madb 2022. 1. 21. 17:25
반응형

CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다.

 

CSS pseudo-classes 가상 클래스 선택자(link, visited, active, hover, text-decoration)

 -> 가짜 : 실체가 없다, 눈에 보이는 가시화가 없다 

 

웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 가상 선택자로 이용

 

이벤트 가상 클래스 선택자 -> 행위에 의해 그때그때 달라진다 

사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라서 스타일 시트 다르게 적용 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
	div {
		width : 200px;
		height: 100px;
		color: blue;
		background: green;
		opacity: 0.9 ;
	}
	div:hover{
		width : 400px;
		height: 50px;
		color: red;
		background: yellow;
		opacity: 1;
		/* transition: all 1.5s linear 0.5s; */
	}

</style>
</head>
<body>
	<h2> 가상 선택자 </h2>
	<div> 
		가상 클래스를 이용한 애니메이션 효과 <br>
		마우스가 위에 있으면 박스가 늘어나요 
	
	</div>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML CSS' 카테고리의 다른 글

HTML 공간 분할 연습  (0) 2022.01.20
HTML5 폼 태그 Form Tag GET POST 방식  (0) 2022.01.18
HTML5, 태그  (0) 2022.01.17
'HTML CSS' Related Articles more