11.29 가상 선택자 정리
2023. 11. 29. 12:17ㆍ1단계) 쌩초보 코딩 HTML,CSS
가상 선택자의 종류
-동적 가상 클래스
-구조적 가상 클래스
1.동적가상클래스
;사용자가 특정 액션을 발생시키기 위해, 태그의 상태에 따라 css에서 디자인을 넣을 수 있다.
:acitve
가상 선택자를 사용할 때는 : (콜론)을 붘여서 사용한다. ----193p
마우스로 태그를 누르고있는 동안 보이는 디자인css을 넣어줄 수 있다.
주로, 누르는 버튼과 관련된 a와 button와 같이 동반사용된다.
ex)
button:active{
color: lime;
}<button>클릭</button>
:visited
직전에 방문한 링크를 표시 ----194p
* action과 함께 동반사용시 visited는 action 위에다가 작성해야함*
a:visited {
color: purple;
}
a:active {
color: black;
}<A href="#">클릭</A>
:hover ★ ★ ★ ★ ★
마우스를 갖다대도 전에 지정된 디자인으로 활성화됨
*마우스 올린 위치는 block과 inlaine이 다르다.*
.title:hover {
color: lightblue;
font-size: 2.5em;
border-bottom: 3px solid darkslateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>다른 디자인도 넣어보는 hover 연습2 </title>
<link rel="stylesheet" href="연습2.css">
</head>
<body>
<!-- 여태까지 태그로 style 지정했는데, 태그로만 설정하면
같은 종류의 모든 태그가 같은 style 로 되기 때문에,
특정한 태그에 단 한개만 적용하기 위해 class를 사용함-->
<h1 class="title">제목</h1>
<div class="box">
<p class="word">박스 안에 있습니다</p>
</div>
</html>
'
대그에 바로 hover를 붙이지 않고, 클래스를 사용해서 붙여준다
가상선택자는 앞서 적은 선택자와 물이 쏟는다
ex)p:hover
hover를 이용해서 a태그를 버튼처럼 사용할 수 있다.
구조적 가상 클래스 198p~
html 부모 자식 관계에서 선택할 수 있다.
css애니매이션,전환
'1단계) 쌩초보 코딩 HTML,CSS' 카테고리의 다른 글
| 2023.11.29 (0) | 2023.11.29 |
|---|---|
| 2023.11.27~28 총정리 (0) | 2023.11.28 |
| 2023.11.28 (2) | 2023.11.28 |
| 2023.11.27 복습 및 제작 (0) | 2023.11.27 |
| 보충학습 input 속성들 설명 (3) | 2023.11.26 |