Css #15 - 속성 선택자, 반응 선택자

속성선택자

태그에서 어떤 특정한 속성을 가지고 있는 태그만 선택하는 선택자.

[기본형]
선택자[속성]{ 속성 : 값 ;}

: 태그에 해당하는 속성이 있는 태그만 선택함.

선택자[속성='값']{ 속성 : 값 ;} or 선택자[속성="값"]{ 속성 : 값 ;}

: 태그에 해당하는 속성과 값이 일치하는 태그만 선택함.

<a href="https://www.naver.com" title="네이버링크" target="_blank" >네이버</a>
<a href="#">임시경로</a>코드를 입력하세요

/* css */
/* 속성선택자 */
a[href]{
    background-color:lavender;
}

a[target='_blank']{
    color:salmon;
}

반응 선택자

반응 선택자는 사용자의 행위에 따라 반응하는 선택자를 말함.

[기본형]
- 선택자 : hover { 속성 : 값 ;} ★

: 사용자가 해당 태그 위에 마우스를 올리면 반응(특정 동작을 수행)함.
- 선택자 : active{ 속성 : 값 ;}

: 사용자가 해당 태그를 클릭하면 반응(특정 동작을 수행)함.

 <div></div>
     <h2>제목2</h2>
     <a href="#">임시경로</a>

/* css */
div{
            width: 200px;
            height: 200px;
            background-color: azure;
        }
        /* div에 마우스가 올라가면 해당 속성을 적용 */
        div:hover{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border-radius: 40px;
        }
        /* div를 클릭하는 순간 해당 속성을 적용 */
        div:active{
            background-color: lightcoral;
            width: 200px;
            height: 200px;
        }
        
        h2:hover{
            color: tomato;
            background-color: lightgoldenrodyellow;
        }
        h2:active{
            background-color: bisque;
        }

        a:hover{
            text-decoration: none;
            font-size: 30px;
            background-color: lavender;
        }

        a:active{
            text-decoration: underline;
            font-size: 50px;
            font-weight: bold;
            background-color: paleturquoise;
            color: darkorange;
        }

제목2 위로 마우스 올라왔을 때

<a> 태그 위로 마우스 올라왔을 때

<a> 태그 마우스 클릭할 때