so woon!

[의사 클래스] Focus 의사 클래스(Pseudo Class) 본문

CSS/개념정리

[의사 클래스] Focus 의사 클래스(Pseudo Class)

xowoony 2022. 9. 7. 09:07

학습일 : 2022. 09. 05

Focus 의사 클래스
- Focus 의사 클래스(Pseudo Class)는 선택된 요소에 포커스(Focus)가 있을 때에 대한 의사 클래스이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)

 "선택자":focus {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>focus 의사 클래스</title>
    <style>
        body {
            background-color: rgb(10,15,20);
            color: rgb(245,250,255);
        }

        input {
            background-color: rgb(20,25,30);
            border: 0.0625rem solid rgb(30,35,40);
            border-radius: 0.33rem;
            color: rgb(245,250,255);
            outline: none;
            padding: 0.5rem 0.75rem;
        }

        input:hover {
            background-color: rgb(25,30,35);
        }

        input:focus❤ {
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

=================실행결과=====================

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[속성] background-image 외 속성들  (0) 2022.09.07
[의사 클래스] Not 의사 클래스(Pseudo Class)  (0) 2022.09.07
[의사 클래스] first-of-type 및 nth-of-type, last-of-type 의사 클래스  (0) 2022.09.07
[의사 클래스] first-child 및 nth-child, last-child 의사 클래스  (0) 2022.09.07
[의사클래스] disabled 의사 클래스  (0) 2022.09.07
'CSS/개념정리' Related Articles more
Comments