[CSS] 선택자(Selector) - 속성선택자, 가상선택자

Etc2

[CSS] 선택자(Selector) - 속성선택자, 가상선택자

ㅣ굴굴ㅣ 2020. 2. 23. 21:37

속성선택자(attribute selector) [태그의 속성] {속성:값; 속성:값;}

<head>
    <style>
        [target] {
                text-decoration:none;
        }
        [target="_blank"] {
                background-color:blue;
                color:white;
        }
    </style>
</head>
<body>
    <h1>선택자의 종류</h1>
    <h2>속성선택자</h2>
    <ul>
        <li><a href="http://naver.com" target="_blank">네이버</a></li>
        <li><a href="http://google.com" target="_blank">구글</a></li>
        <li><a href="http://daum.net" target="_self">다음</a></li>
    </ul>
    <a href="mailto:master@abc.com">master@abc.com</a>
</body>

가령 target이라는 속성처럼 속성을 선택자로 사용할 때는 [ ] { }를 사용합니다. [target]{ } 이렇게 사용할 수도 있고, [속성="속성값"] { } 이렇게 사용할 수도 있습니다.

<head>
    <style>
        [target] {
                text-decoration:none;
        }
        [target="_blank"] {
                background-color:blue;
                color:white;
        }
        [class^="link"] {
                list-style:none;
        }
    </style>
</head>
<body>
    <h1>선택자의 종류</h1>
    <h2>속성선택자</h2>
    <ul>
        <li class="google"><a href="http://google.com" target="_blank">구글</a>
        <li class="link1"><a href="http://naver.com" target="_blank">네이버</a>
        <li class="link2"><a href="http://daum.net" target="_self">다음</a>
    </ul>
    <a href="mailto:master@abc.com">master@abc.com</a>
</body>

위의 예제에서는 class와 href와 target이 모두 list 태그(tag)의 속성(attribute)입니다. 따라서 스타일 지정시 속성선택자로 활용할 수 있습니다. [class="link"] { } 이렇게 된 것은 class명이 정확하게 link인 것들에 스타일을 주는 것이고, [class^="link"] { } 이렇게 된 것은 class명이 link로 시작되는 것들에 스타일을 주는 것입니다.

또, [target] 같은 경우에 a[target]으로 사용하여 anchor태그 중 target속성에 스타일을 주고 싶다의 식으로 스타일을 지정할 수 있습니다. a와 [target]은 붙여야 합니다. 공백이 있으면 자손 중에, 공백이 없으면 자신 중에.

가상선택자(pseudo selector) :link :hover :active :visited :focus

가상선택자는 주로 a태그와 관련이 있는 선택자입니다.

<head>
    <style>
        a:link {
            text-decoration:none;
            color:navy;
        }
        a:hover {
            color:red;
            text-decoration:underline;
        }
        a:active {
            background-color:red;
            color:white;
        }
        a:visited {
            color:green;
        }
        a:focus {
            background-color:blue;
            color:white;
        }
        h1:hover {
            background-color:green;
            color:yellow;
        }
        input:focus{
            background-color:blue;
            color:white;
        }
    </style>
</head>
<body>
    <h1>선택자의 종류</h1>
    <h2>속성선택자</h2>
    <ul>
        <li><a href="#" target="_blank">구글</a>
        <li><a href="#" target="_blank">네이버</a>
        <li><a href="#" target="_self">다음</a>
    </ul>
    <a href="mailto:master@abc.com">master@abc.com</a>
    <input type="text" placeholder="이름 입력">
</body>

a:link { } 와 같은 형식으로 스타일을 지정하면 됩니다. 다만 anchor태그의 경우 :link { } 와 같이 지정하거나, a { } 와 같이 지정해도 동일합니다. 그래도 명확하게 하기 위해 a:link 를 습관화 하는 것이 좋을 듯 합니다.

아래의 가상선택자들은 a와 콜론, 그 뒤의 link 들은 붙어있어야 합니다.

a:link { } ---------------> 링크 걸린 텍스트의 스타일 지정

a:hover { } -------------> 마우스를 올렸을 때의 스타일 지정

a:active { } ------------> 마우스를 누르는 순간의 스타일 지정

a:visited { } ------------>이미 눌렀던 것의 스타일 지정

a:focus { } -------------> tab키를 눌렀을 때의 스타일 지정

추가로 알아둘 것은 웹페이지에서 tab을 누르면 링크가 걸린 것들은 박스로 감싸지면서 엔터를 누르면 그 링크로 들어가지게 되는 기능이 있습니다. 이 때 이 박스를 없애고 싶으면 a:link{ outline:none; } 의 스타일을 지정해주면 됩니다. 다만, 이 아웃라인을 없애면 반드시 보안장치가 필요합니다. 이 때 쓰는 것이 a:focus{ } 입니다.

가상선택자들 중에서 링크 말고도 쓰이는 것들은 hover와 focus입니다.

<추가로 배운 사항>

회원가입 폼 같은것을 만들때 <input>태그를 사용함

저작자표시

'Etc2' 카테고리의 다른 글

[애드센스 승인] 티스토리 애드센스 승인 후기(무한반복신청) (5)	2020.03.05
[CSS] display속성 - block과 inline (0)	2020.02.25
[CSS] 선택자(Selector) 우선순위 (0)	2020.02.24
[CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자 (0)	2020.02.24
[CSS] 선택자(Selector) - 자손, 자식, 인접형제선택자 / 그룹화 (0)	2020.02.23
[CSS] 선택자(Selector) - 태그, 전체, class, id선택자 (0)	2020.02.23
[CSS] 단위 - vm, vh, vmin, vmax (0)	2020.02.23
[CSS] 단위 - px, %, em, rem (0)	2020.02.23

현재글[CSS] 선택자(Selector) - 속성선택자, 가상선택자

굴리고 굴리는 블로그