가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.
[ 특정 상태의 예 ]
- 마우스가 올라와 있을 때
- 링크를 방문했을 때와 아직 방문하지 않았을 때
- 포커스가 들어와 있을 때
이러한 특정 상태에는 원래 class가 존재하지 않지만, 가상 class를 임의로 지정하여 선택하는 방법이다.
가상 클래스는 마침표(.) 대신, 콜론(:)을 사용한다.
CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
selector:pseudo-class {
property: value;
}
# 예시
다음은 a 요소가 hover 상태일 때(마우스가 올라와 있을 때-특정 상태) 글자색이 red로 변경되고, input요소가 focus 상태(특정 상태)일 때 backgroud-color가 yellow로 지정하는 예.
<!DOCTYPE html>
<html>
<head>
<style>
/* a 요소가 hover 상태일 때 */
a:hover { color: red; }
/* input 요소가 focus 상태일 때 */
input:focus { background-color: yellow; }
</style>
</head>
<body>
<a href="#">Hover me</a><br><br>
<input type="text" placeholder="focus me">
</body>
</html>See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.
*출처 ▼
CSS3 Selector | PoiemaWeb
CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용
poiemaweb.com
'CSS' 카테고리의 다른 글
| CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript (1) | 2023.12.12 |
|---|---|
| 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ by 드림코딩 (0) | 2023.12.10 |
| [CSS] transition (트랜지션) (0) | 2023.10.10 |
| HTML파일에 CSS 적용하는 방법 3가지 (0) | 2023.07.10 |
| 박스를 가운데정렬해주는 방법 margin: 0 auto (0) | 2022.09.06 |
