CSS 21 가상 선택자

프론트엔드/CSS

CSS 21 가상 선택자

스펀지연구소 2021. 4. 3. 16:07

Document

Pseudo Class

초보개발자의 성장블로그 : 마우스 이벤트에 따른 링크의 변화를 잘보세요.

가상클래스1 영역

마우스위치에따른박스의스타일변화를보세요.

가상클래스2 영역

마우스위치에따른박스의스타일변화를보세요.

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
  /*가상클래스*/
  a:link{ color: blue; text-decoration: underline; }
  a:visited{ color: red; }a:hover{ text-decoration: overline; }
  a:active{ background-color: yellow; }
  
  div.d1{ border: 1pxdashedred; width: 400px; padding: 5px; }
  /*가상클래스*/
  div.d1:hover{ background-color: yellow; }
  div.d2{ border: 1pxdashedgreen; width: 400px; padding: 5px; }
  /*가상클래스*/
  div.d2:hover{ background-color: green; }
  </style>
</head>
<body>
  <h2>Pseudo Class</h2>
  <p><a href="https://hs0955.tistory.com/">초보개발자의 성장블로그</a>
  : 마우스 이벤트에 따른 링크의 변화를 잘보세요.</p>
  <div class="d1"><h3>가상클래스1 영역</h3>마우스위치에따른박스의스타일변화를보세요. </div>
  <div class="d2"><h3>가상클래스2 영역</h3>마우스위치에따른박스의스타일변화를보세요. </div>
</body>
</html>

Document

가상선택자

가상클래스를이용한애니메이션효과
마우스가위에있으면박스가늘어나요.

<!DOCTYPE html>
<html lang="en">
<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>Document</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: 0.5;transition: all 1.5s linear 0.5s;}
  </style>
</head>
<body>
  <h2>가상선택자</h2>
  <div>가상클래스를 이용한 애니메이션 효과<br>
    마우스가 위에 있으면 박스가 늘어나요.</div>
</body>
</html>

Document

웹프로그래밍

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
  h4:first-child{  /*첫번째태그의텍스트색상*/color: blue; font-size: 20px; }
  h4:last-child{  /*마지막태그의텍스트색상*/color: red; font-size: 20px; }
  h4:nth-child(2n+1){  /*홀수태그*/background-color: green; }
  h4:nth-last-child(2n){  /*짝수태그*/background-color: yellow; }
  </style>
</head>
<body>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  <h4>웹프로그래밍</h4>
  
</body>
</html>

UI 요소 상태 가상 클래스 선택자

- 입력 폼의 상태를 선택할 때 사용

기타 가상 클래스 선택자

Document

states pseudo-classes

문제) 대한민국수도는?

정답작성:

answer

힌트보기:

남대문이있는곳이죠.

정답보기:

서울

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
  div{ color: white; }
  h2:first-letter{ font-size: 30px; color: red; text-transform: uppercase; } 
  h3:first-line{ color: blue; }
  input:focus{ background-color: red; }
  input:checked+div.d1{ background-color: gray; }
  input:checked+div.d2{ background-color: black; }
  </style>
</head>
<body>
  <h2>states pseudo-classes</h2>
  <h3>문제) 대한민국수도는?</h3>
  <p>정답작성: <input type="text"></p>
  <h2>answer</h2>
  힌트보기: <input type="checkbox">
  <div class="d1">남대문이있는곳이죠.   </div>
  정답보기: <input type="checkbox">
  <div class="d2">서울</div>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)