가상 클래스(:) & 가상 요소(::)

▼ 가상 클래스

문서 트리에 존재하는 요소의 특정 상태를 선택하는데 사용

---

* 사용자 동작에 반응하는 가상 클래스

:link 

방문하지 않은 링크에 스타일 적용 ex. 텍스트 링크의 밑줄 없애거나 색상 바꿈

 

:visited

방문한 링크에 스타일 적용 

 

:hover

특정 요소에 마우스 포인터를 올려놓으면 스타일 적용

 

:active

웹 요소를 활성화했을 때 스타일을 적용

(링크나 이미지 클릭했을 때)

 

:focus

웹 요소에 초점이 맞추어져있을 때 스타일 적용

---

* 요소 상태에 따른 가상 클래스

:target

문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때는 링크 이용, 같은 문서 안에서 다른 위치로 이동할 때는 앵커 이용 → 앵커(a)의 목적지가 되는 부분의 스타일을 적용

 

:enabled :disabled

요소가 사용할 수 있는 상태일 때 & 사용할 수 없는 상태 (ex. 회원약관 입력)

 

:checked

폼의 라디오박스나 체크박스에서 checked 속성 있는 요소(선택한 항목)의 스타일 지정

 

:not

특정 요소를 제외하고 스타일 적용할 때 사용

---

▶ 구조 가상 클래스

웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일 적용할 때 사용

요소가 여러 개 나열돼 있는 경우 몇 번째인지 따짐

 

:only-child

부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택

A:only-type-of

부모 안에 A 요소가 하나뿐일 때 선택

 

:first-child

부모 안에 있는 모든 요소 중 첫 번째 자식 요소 선택

:last-child

부모 안에 있는 모든 요소 중 마지막 자식 요소 선택

 

A:first-of-type

부모 안에 있는 A 요소 중 첫 번째 요소 선택

A:last-of-type

부모 안에 있는 A 요소 중 마지막 요소 선택

 

:nth-child(n)

부모 안에 있는 모든 요소 중 n번째 자식 요소 선택 (ex. h1, p 상관없이 3번째))

:nth-last-child(n)

부모 안에 있는 모든 요소 중 끝에서 n번째 자식 요소 선택

 

A:nth-of-type(n)

부모 안에 있는 A 요소 중에서 n번째 요소 선택 (ex. p중에 3번째)

A:nth-last-of-type(n)

부모 안에 있는 A 요소 중 끝에서 n번째 요소 선택

---

▶ 가상 요소

문서 안 특정 부분에 스타일 지정하기 위해 가상으로 요소 만들어 추가해줌 (가상 클래스는 웹 문서에서 원하는 요소 선택)

 

Q. 굳이 가상 요소 만들어 쓰는 이유? 

A. HTML 문서를 수정하지 않고도 스타일을 변경하거나 콘텐츠를 추가할 수 있어 HTML 문서의 구조와 스타일을 분리하는데 도움이 됨

 

::first-line

지정한 요소의 첫 번째 줄에 스타일 적용

::first-letter

지정한 요소의 첫 번째 줄 첫 번째 글자에 스타일 적용 

 

::before ::after

지정한 요소의 내용 앞 뒤에 스타일 적용

(ex. html 태그 안에는 텍스트 표시 없지만 스타일로 표현 가능)