속성 선택자(Attribute Selectors)

CSS/기초

속성 선택자(Attribute Selectors) - [attr], [attr=value]

컴공 윤서혜 학습일기 2021. 1. 7. 18:25

1. attr

속성을 포함한 요소 선택

--> class, id에서 이름짓는건 개발자들에게 여간 힘든일이 아니다. 하지만 id와 class없이도 지정하고 스타일링 할 수 있다!

.disabled{
    opacity : 0.2; /* 20% */
}

<body>
    <input type="text" value = "HEROPY">
    <input type="text" value = "1234">
    <input class = "disabled" type="text" value = "disabled text" disabled>
</body>

****이것을 이렇게 바꾸면 된다.

[disabled]{
    opacity : 0.2; /* 20% */
}

[type=password] {
    opacity : 0.5;
    color : red;
}

<body>
    <input type="text" value = "HEROPY">
    <input type="password" value = "1234">
    <input type="text" value = "disabled text" disabled>
</body>

모든 태그이름이 input이라서 구분이 어려울때 타입으로 지정된 속성으로 "type=password"로 입력해서 CSS설정 해 줄수있다.