선택자 03 - 속성선택자, 가상 선택자

*속성(attribute) 선택자

해당 속성이 있는것들을 바꿀수 있다.

[target] {
            text-decoration: none;
        }


<h1 id="title">css 기본 문법</h1>
<h2>속성 선택자</h2>
<ul>
  <li><a href="#" target="_blank">google</a></li>
  <li><a href="#" target="_blank">daum</a></li>
  <li><a href="#" target="_self">naver</a></li>
</ul>
<a href="mailto:master@abc.com">master@abc.com</a>

li 세곳에 있는 스타일을 바꿀때 속성값 target은 li에만 있다

[속성] 대괄호 를 사용한다. 

[target] { text-decoration: none;}

 

여기서 _blank 값이 있는것에만 색깔을 주고 싶을때

        [target] {
            text-decoration: none;
        }
        [target="_blank"] {
            background-color:blue;
            color:white;
        }
        [target="_blank"] {
            background-color:red;
            color:white;
        }

[속성="속성값"] { 스타일 } 위와 달리 속성에 해당하는 속성값도 넣어준다.

[target="_blank"] { background-color:blue; }

 

여기서 class=link 1, 2 에 있는 bullet(목록 표시)을 없애고 싶을때

 [class^="link"] { list-style:none; }

• class="link"가 아닌 class^="link" 로 ^을 쓴다.
• ^는 클래스 명이 링크로 시작하는~ 이라는 뜻

 

        a[target] { text-decoration: none; }
        a[target="_blank"] {
            background-color:blue;
            color:white;
          }
        a [target="_blank"] {
            background-color:red;
            color:white;
          }

• 앞에 a를 넣어서 사용도 가능
• 요소[속성] a[target] 처럼 a뒤에 공백이 없으면 a중에 선택.
• a [target] 처럼 a뒤에 공백이 있으면 a의 자식중에 선택이다.

 

*가상(pseudo) 선택자

anchor 태그와 연관이 있다.

 

       :link {
           text-decoration:none;
           color:navy;
       }
       a:hover {
           text-decoration:underline;
           color:red;
       }
       a:active {
           background-color:red;
           color:white;
       }
       a:visited {
           color:silver;
       }
       
       
       
<h1 id="title">css 기본 문법</h1>
<h2>가상 선택자</h2>
<ul>
  <li><a href="#">google</a></li>
  <li><a href="#">daum</a></li>
  <li><a href="#">naver</a></li>
</ul>
<a href="mailto:master@abc.com">master@abc.com</a>

:으로 된건 항상 붙여쓴다(공백x)

hover 마우스를 올렸을때

active 마우스를 클릭하고 놓지 않았을때

visited 방문한 싸이트

 

브라우져에서 텝 눌렀을때 포커스가 걸리는데 이 아웃라인은 없애면 안된다.

(웹접근성 관련)

 

- 포커스 없앨땐

       :link {
           text-decoration:none;
           color:navy;
           outline:none;
       }

outline:none; 써주면 사라진다.

 

※아웃라인 없애면 반드시 보안장치를 해줘야한다.

 a:focus {
           background:blue;
           color:#fff;
       }

포커스 걸릴때마다 파란색 하이라이트에 흰색글자로 바꿔준다.

 

link 외에 쓰이는곳은

hover와 focus에 쓰인다.

 

*hover

 h1:hover{
           text-decoration:underline;
       }

 

*input에 focus 걸기

input:focus{
           background-color:red;
           color:white;
       }

 

정리 - :link :visited :active는 링크에만 쓰이지만

         :hover는 어디에나 쓸수있고

         :focus는 input에도 쓸수있다.