CSS day4
| 가상클래스선택자 | 구조 가상 선택자 | 가상 요소 | 속성선택자 |
선택자
10. 가상 클래스 선택자
사용자 동작에 반응하는 가상 클래스는 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려 놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용하면된다.
:link
웹문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되나 :link 선택자를 사용하면 링크의 밑줄을 없애거나 색상을 바꿀 수 있다.
:visit
웹 문서의 링크 중에서 한 번 이상 반문한 링크에 스타일을 적용한다. 한 번 이상 반문한 텍스트 링크는 보라색이 기본 값으로 사용자가 반운한 텍스트 링크와 색상이 달라지지 않게 하려면 :visit 선택자를 사용하면된다.
:hover
웹 요소 위로 마우스 포인터를 올려놓을때 스타일을 적용한다.
:active
웹 요소의 링크나 이미지 등을 클릭했을 때 스타일을 지정한다.
:focus
웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다.
예제를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 클래스 선택자</title>
<style>
a:link {text-decoration: none; color: green; font-weight: bolder;}
a:visited{text-decoration: none; color: green; font-weight: bolder;}
</style>
</head>
<body>
<p><a href="http://spring.io">스프링공식사이트</a></p>
<p><a href="https://www.naver.com">네이버</a></p>
</body>
</html>
결과를 보면, a 태그의 방문 전과 방문 후의 색을 모두 green으로 설정한 것이 확인 가능하다. :hove나 :active 등을 사용하면 더 역동적인 웹 문서를 꾸밀 수 있다.
11. 구조 가상 선택자
구조 가상 클래스는 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 선택자다. 웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id 를 사용하지만, 요소가 여러개 나열되어 있을 경우 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇번째인지를 확인하여 스타일 적용이 가능하다.
:first-child
요소 중에서 첫번째 해당하는 요소의 스타일을 적용
:last-child
요소 중에서 마지막 해당하는 요소의 스타일을 적용
:nth-child(n)
요소 중에서 n번째 해당하는 요소의 스타일을 적용
:nth-child(odd)
요소 중에서 홀수번째 해당하는 요소의 스타일을 적용
:nth-child(even)
요소 중에서 짝수번째 해당하는 요소의 스타일을 적용
예제를 보며 자세히 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구조 가상 선택자</title>
<style>
.list1 > li:first-child {color: deeppink;}
.list1 > li:last-child {color: purple;}
.list1 > li:nth-child(2) {color: deepskyblue;}
.list1 > li:nth-child(odd) {background-color: greenyellow;}
</style>
</head>
<body>
<h2>구조 가상 선택자</h2>
<ul class="list1">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html>
결과를 보면, li 첫번째 요소의 글자색은 deeppink로 li 마지막 요소 글자색이 purple, li 두번째 요소의 글자색은 deepskyblue로 적용된 것이 확인 된다. 또 li 요소중 홀수번에 해당하는 요소의 배경색이 greenyellow로 적용된 것을 볼 수 있다. 이렇듯 원하는 요소의 몇번째 요소인지 알면 쉽게 class나 id를 사용하지 않고도 스타일 적용이 가능하다.
12. 가상 요소
가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다. 가상 요소를 만들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기위한 것이다.
:before
글, 이미지, 그라데이션 등을 요소 앞에 삽일할 때 사용
:after
글, 이미지, 그라데이션 등을 요소 뒤에 삽입할 때 사용
예제를 보며 자세히 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상요소선택자</title>
<style>
.txt1::before{content: '🎄';}
.txt2::after{content: '🎃';}
</style>
</head>
<body>
<h2>가상요소선택자</h2>
<p class="txt1">before</p>
<p class="txt2">after</p>
</body>
</html>
예제 결과를 보면, 클래스 txt1인 요소의 content 앞으로 특수문자’🎄’가 붙고 클래스 txt2인 요소의 content 뒤로 특수문자’🎃’가 붙어 출력되는 것을 확인할 수 있다.
13. 속성 선택자
html 요소에서 src, href, style, type, id, class.. 과 같은 속성을 선택자로 지정해서 스타일로 적용
[속성명 ~= “속성값”] : 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택한다. [속성명 *= “속성값”] : 속성값이 포함된 모든 문자를 가지는 요소를 선택한다. [속성명 $= “속성값”] : 속성값이 접미사로 끝나는 모든 문자를 가지는 요소를 선택한다. [속성명 |= “속성값”] : 속성값이 접두사로 시작되는 문자 중에서 완벽히 일치하는 문자 또는 ‘-‘으로 연결된 문자를 가지는 요소를 선택한다. [속성명 ^= “속성값”] : 속성값이 접두사로 시작되는 모든 문자를 가지는 요소를 선택한다.