CSS - 가상 클래스

선택자 뒤에 <:가상이벤트> 를 붙이면 가상 클래스가 됩니다. 특정한 동작을 할 때마다 이벤트를 다르게 지정하면 좀 더 유연한 페이지가 되겠지요.

기본 이벤트

이벤트	설 명
:link	방문하지 않은 링크
:visited	방문한 링크
:hover	마우스 커서를 올려 놓았을 때
:active	마우스로 클릭했을 때
::selection	마우스로 드래그한 텍스트일 때

:hover 예제

<style>
#hover {
  border: 1px solid;
  width:200px;
}
a:hover {
  background-color: yellow;
}
</style>

<div id="hover"><a>마우스를 올려 보세요.</a></div>

마우스를 올렸을 때 노란색으로 바꿉니다.

마우스를 올려 보세요.

<style>
#hover li:hover {
  background-color: yellow;
}
</style>

<ul id="hover">
  <li>익스플로어</li>
  <li>사파리</li>
  <li>크롬</li>
  <li>기타</li>
</ul>

::selection 예제

::selection 은 텍스트를 마우스로 드래그하면 반응하는 이벤트입니다.

<style> ::selection { background-color: yellow; } </style>

이 텍스트를 마우스로 드래그 해보세요.

폼 요소 이벤트

폼 요소 관련 이벤트로 폼 요소를 꾸밀 수 있습니다.

이벤트	설 명
:focus	폼 요소에 포커스가 되었다면…
:enabled	해당 요소가 사용할 수 있는 상태라면…
:disabled	해당 요소가 사용할 수 없는 상태라면…
:checked	라디오나 체크박스에 해당 항목을 선택했을 때
:optional	필수항목이 아닌 요소라면… Ex.) <input type="text"> /* 필수항목이 아니므로 참 */ Ex.2) <input type="text" required > /* 필수항목이므로 거짓 */
:required	필수항목 요소라면…
:out-of-range	최소, 최대값의 범위를 벗어난 요소라면… Ex.) <input type="number" min="1" value="0"> /* 최소 값 1이하 이므로 참 */
:in-range	최소, 최대값 범위 내에 있는 요소라면… Ex.) <input type="number" min="1" max="10" value="5"> /* 최소 값 1이하 이므로 참 */
:read_only	readonly 속성이 있는 요소라면…
:read-write	readonly 가 아닌 요소라면…
::placeholder	폼 속성에 placeholder 가 있는 요소라면…
:valid	폼 요소의 유효한 값이라면… Ex.) <input type="email" value="abc@exp.com"> /* 유효한 이메일 형식이므로 참 */

:checked 예제

<style>
input:checked {
 width: 50px;
}
</style>

<label><input type="radio" name="chk" value="1">익스플로어</label>

<label><input type="radio" name="chk" value="2">크롬</label>

<label><input type="radio" name="chk" value="3">사파리</label>

:valid 예제

<style>
input:valid {
 background-color: red;
}
</style>
<input type="email" value="abc@exp.com" />

이메일이 아닌 값을 입력해 보세요. 빨간색 배경이 없어져요.

:in_range 예제

<style>
input:in-range {
  border: 10px dotted red;
}
</style>

<input type="number" min="1" max="10" value="15">

1과 10 사이의 수를 입력해 보세요. 빨간색으로 변합니다.