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 |