💅Decorate from CSS : 가상 클래스 선택자

💅CSS/⚡ver.0

💅Decorate from CSS : 가상 클래스 선택자

4:Bee 2024. 2. 13. 13:30

728x90

이번 시간에는 가상클래스 선택자(pseudo class selector)를 포스팅 해볼 것이다. 가상 클래스 선잭자는 특정 상태나 특징을 가진 요소를 선택하기 위해 사용되는 CSS 선택자이다. 이러한 클래스는 요소의 상태나 특징에 따라 동적으로 스타일을 적용하는 데 사용된다. 가상 클래스 선택자는 콜론(:)으로 시작하며, 해당 요소의 상태나 특징을 정의하는데 사용된다. 대표적인 예시로는 hover와 같은 것들이 있다. 우선 html태그를 살펴보면 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

이것들을 먼저 클릭 했을 때 반응을하는 강상클래스는 아래와 같다.

a:active {

color: green;

}

그리고 우리가 가장 많이 사용되는 hover기능은 아래와 같다.

a:hover {

color: yellow;

}

a태그가 선택 되었을 때 반응을하는 가상 클래스 선택자는 focus가 있다.

a:focus {

color: white;

}

그리고 방문이 되었을 때는 기본적으로 보라색이지만 이를 변경하기 위해선 visited를 사용하면 된다.

a:visited {

color: red;

}

마지막으론 링크가 걸려 있는 a태그는 파란색으로 표기가 되는데 이것을 변경하기 위해선 link를 사용하면 된다.

a:link {

color: black;

}

추가적으로 input태그에 focus를 사용하면 값을 기입하는 구간이 계속 선택되어 있다 인식한다. 아래 코드를 사용하면 input태그가 선택 되었을 때 박스 안쪽은 검은색으로 변경될 것이다.

input:focus {

background-color: black;

color: white;

}

728x90

저작자표시 (새창열림)