[CSS] 선택자(Selector) - 속성선택자, 가상선택자
- Etc
- 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>태그를 사용함
'Etc' 카테고리의 다른 글
| [애드센스 승인] 티스토리 애드센스 승인 후기(무한반복신청) (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 |