HTML 가상 선택기

커서를 올리지 않았을때

커서를 올렸을때

커서를 클릭했을때

<style type="text/css">
h1:hover { /* 마우스가 태그 위에 위치 (커서를 위에올리면 실행)*/
	color: red;
}
h1:active {/* (커서를 눌렀을때 실행)*/
	color: blue;
}
div#sp1 {
	width: 100px; height: 100px;
	border: 1px solid black;
}
div#sp1:hover {
	background-color: green;
}
div#sp1:active {/* (커서를 눌렀을때 실행)*/
	background-color: blue;
}
---------------------------------
 <h1>클릭하세요</h1>
 <div id="sp1">div 공간입니다.</div>
 <hr>

- 반응 선택자
이벤트에 따라 적용되는 스타일.
마우스의 동작에 따라 다른 스타일을 적용

hover : 커서를 위에 올리면 실행

active : 커서를 눌렀을때 실행

기본형태

포커스(텍스트 포인트가 깜빡거릴때)가 맞춰졌을떄

포커스를 제거했을떄

input:focus {
	color: white;
	background-color: gray;
}
---------------
<input type="text">

포커스를 텍스트에 맞출때 배경컬러는 그레이(gray) 폰트컬러는 화이트(white)로 설정해준 모습이다.

평범한 문구들

텍스트를 숨겨준 모습

렉걸린게 아니라 애니메이션 효과처럼 1초에 걸려서 텍스트를 숨겨주는 상황

input[type="checkbox"]:checked + div {
	height: 0px;/*수직으로 0px만 표출하기때문에 안보이는것처럼 적용됨*/
}
input + div {
	overflow: hidden;
	width: 800px; height: 200px;
	transition-duration: 1s; /*애니메이션 효과(1초동안 천천히 보여지는 속성)*/
}
--------------------------------------------------------------
<input type="checkbox">보이기/숨기기
  <div>
  	<h2>Lorem Ipsnm</h2>
  	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ......</p>
  </div>

체크박스 타입을 넣어줌 체크를할 시

height: 0px로 하여 수직으로 0픽셀만 보여지기때문에 실제로 보이지않게됨

 

overflow: hidden = 정해준 칸을 벗어날 시 숨김처리 해준다.

transition-duration: 1s; = 애니메이션 효과(1초동안 천천히 보여지는 속성을 지정한모습)

 

-상태 선택자
  태그의 상태에 따라 적용되는 스타일.
  :checked : 체크 박스의 체크 상태에 따라 스타일 적용.
  :focus : 입력 양식이 포커스를 가지게 되면 적용.
  :enabled : 사용 가능한 입력 양식에 적용.
  :disabled : 사용 불가능한 입력 양식에 적용.