나의 개발일지

의사(가상)클래스에 대하여~ 본문

CSS

의사(가상)클래스에 대하여~

heew0n 2023. 10. 11. 07:59
의사클래스(가상클래스)는 선택자에 추가하는 키워드로
요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다

 

 

선택자:의사클래스 {

        속성명: 속성값;

     }

 

 

 

의사클래스 의미
hover 마우스 포인터가 요소에 올라가 있을 때 속성값이 변경된다
active 사용자가 요소를 활성화했다 (ex. 마우스 클릭)
focus 요소가 포커스를 받고 있다
disabled 비활성 상태의 요소이다
nth-child() 형제 사이에서의 순서에 따라 요소를 선택한

 

hover / active
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [type="button"] {
            width: 100px; height: 30px;
            background-color: tomato; color: white;
            border: none; border-radius: 8px;
        }
        [type="button"]:hover {
            background-color: gray;
        }
        [type="button"]:active {
            background-color: black;
        }
    </style>
</head>
<body>
    <input type="button" value="button">
</body>
</html>

 

 

 

기본 상태
hover : 마우스 커서를 올렸을 때 배경색이 바뀐다
active : 마우스 커서를 클릭했을 때 배경색이 바뀐다

 

 

 

 

focus / disabled
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            color: white;
            background-color: khaki;
        }   
    </style>
</head>
<body>
    <input type="text" placeholder="이곳에 입력하세요"> 
</body>
</html>

 

 

 

포커가 됐을 때 배경색과 글자색이&nbsp; &nbsp; &nbsp;바뀐다

 

 

 

 

 

 

disabled
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            color: white;
            background-color: khaki;
        }
        input:disabled{
            height: 150px;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="이곳에 입력하세요" disabled>
</body>
</html>

 

 

 

비활성화 상태일 때 높이가 바뀌었다

 

 

 

 

nth-child()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   body {
        display: flex;
        justify-content: space-between;
    }
    .box {
        width: 50px; height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="box">1번</div>
    <div class="box">2번</div>
    <div class="box">3번</div>
    <div class="box">4번</div>
    <div class="box">5번</div>
</body>
</html>

 

 

 

 

 

 

 

 

만약 여기서 3번 박스의 색깔만 바꾸고 싶다면?

 

    <style>
   body {
        display: flex;
        justify-content: space-between;
    }
    .box {
        width: 50px; height: 50px;
        background-color: pink;
    }
    .box:nth-child(3) {
        width: 50px; height: 50px;
        background-color: orange;
    }
    </style>

 

 

 

 

 

() :  괄호 안에 숫자를 써서 바꿔준다

 

(n) : 양의 정수가 들어가서 모든 박스의 색깔이 바뀐다

 

(2n) : 2 * n --> 짝수 박스의 색깔이 바뀐다

 

(2n-1) : 홀수 박스의 색깔이 바뀐다

 

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

z-index에 대하여~  (0) 2023.10.12
상속(Inheritance)에 대하여~  (0) 2023.10.11
의사요소/after/before/first-line/marker/placeholder  (0) 2023.10.11
특성 선택자와 결합선택자에 대하여~  (0) 2023.10.10
float과 clear에 대하여~  (0) 2023.10.10
'CSS' Related Articles more