[CSS] 가상선택자

 

가상클래스(Pseduo class)

✅ 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스
✅ 직접 요소에 클래스를 선언하는 것이 아니다.
✅ 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다.
✅ 가상클래스는 :(콜론)기호를 써서 나타낸다.

 

문서 구조와 관련된 가상 클래스

 :first-child 
   - 첫 번쨰 자식 요소 선택
 :last-child   
   - 마지막 자식 요소 선택

 

앵커 요소와 관련된 가상 클래스

:link 
   - 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited 
   - 이미 방문한 하이퍼 링크를 의미

사용자 동작과 관련된 가상 클래스

✅주로 <a> 태그에 많이 쓰인다.

:focus 
   - 현재 입력 초점을 가진 요소에 적용된다.
   - 현재 선택 받는 것을 의미한다.
:hover
   - 마우스 포인터가 있는 요소에 적용된다.(마우스를 올렸을 때를 의미)
:active
   - 사용자 입력으로 활성화된 요소에 적용된다.
   - <a> 태그를 클릭할 때 or <button> 태그를 눌렀을 때처럼 순간적으로 활성화된다.

 

 

가상요소 선택자(Pseudo element)

✅ HTML코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다.
✅ 가상 클래스처럼 문서 내에 보이지 ㅇ낳지만 미리 정의한 위치에 삽입되도록 약속되어있다.

선언방법

✅ 가상클래스와 같이 콜론을 사용한다.
✅ CSS3 부터는 가상클래스와 가상 요소를 구분하기 위해 가상요소에는 ::(더블콜론) 기호를 사용한다.
✅ 단, 하위 브라우저에서 ::문법을 지원하지 않는 문제가 있으니 상황에 따라 사용해야한다.

:before 
   - 가장 앞에 요소를 삽입한다.
:after 
   - 가장 뒤에 요소를 삽입한다.
:first-line 
   - 요소의 첫번째 줄에 있는 텍스트
:first-letter
   - 블록레벨요소의 첫번째 문자

 

 

 

 

 

---

학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고  정리한 글입니다.

 

Reference

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS