반응형
css 가상 클래스 셀렉터에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 가상 클래스 셀렉터에 대하여 알아보도록 하겠습니다.
가상 클래스 셀렉터도 id와 class 셀렉터만큼이나 자주 쓰이는 셀렉터라서 되게 중요한 셀렉터입니다.
그래서 이번 포스팅에서는 이 가상 클래스 셀렉터를 사용하는 방법에 대하여 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 가상 클래스 셀렉터
가상 클래스 셀렉터는 '가상'이라는 말에서 알 수 있듯이,
어떤 일이 일어났을 때에만 적용이 되는 셀렉터입니다.
이 셀렉터를 쓸 때는 ':'를 이용하는데,
우리가 적용하고자 하는 태그 뒤에 ':'를 붙이고,
그 뒤에 그것과 연결을 지을 셀렉터 속성을 입력하면 해당 셀렉터가 실행이 될 때 실행이 됩니다.
제가 간단한 예를 하나 보여드리도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>셀렉터 만들기</title>
<style>
li:hover { background : yellowgreen; }
h3:first-letter { color : red; }
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div>60점 이하는 F!</div>
</div>
</body>
</html>
반응형
이렇게 한 번 작성을 해봤습니다.
여기에 hover라는 속성과 first-letter라는 속성이 있을 겁니다.
각각은 마우스 커서가 올라갈 때, 그리고 해당 태그의 첫 글자를 강조할 때 이벤트가 일어나도록 하는 속성입니다.
그래서 결과 화면은 이렇게 나옵니다.
 |
 |
이렇게 마우스 커서가 올라가지 않았으면 아무것도 뜨지 않는데,
마우스 커서가 올라가면 배경색이 초록으로 바뀝니다.
여기까지 가상 클래스 셀렉터에 대하여 알아보았습니다.
다음 포스팅에서는 이 가상 클래스 셀렉터가 사용하는 이벤트 속성에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css 여러 가지 셀렉터 조합하는 방법에 대하여 알아보기 (0) | 2023.03.13 |
|---|---|
| css 이벤트 속성에 대하여 알아보기 (0) | 2023.03.13 |
| css 속성 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 전체 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css id 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
댓글