CSS 가상 선택자, 가상 요소

pseudo selector

-> 현재 존재하지 않는 구조

-> 특정 요소의 상태를 미리 추정

 

가상 클래스 ( pseudo class )

-> 미리 정의해놓은 상황에 적용이 되도록, 보이지 않는 클래스

정의되어있는 가상 클래스

-> https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 

 

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

-> first-child : 첫 번쨰 자식 요소, last-child : 마지막 자식 요소

 

링크 가상 클래스

-> link : 아직 방문하지 않은 링크, visited:방문한 링크

 

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

-> focus: 입력 포커스를 갖는 요소에 적용

-> hover: 마우스 포인터가 위치해 있는 요소에 적용

-> active: 사용자 입력에 의해 활성화된 요소에 적용

 

 

가상 요소 ( pseudo element )

-> 현재 html코드 내에 존재하지 않는 요소에 스타일 부여

-> 미리 정의해놓은 위치에 삽입이 되도록

• before:가장 앞에 요소 삽입
• after: 가장 뒤에 요소 삽입
• first-line:요소의 첫 번째 줄에 있는 text
• first-latter: 블록 레벨 요소 중 첫 번째 문자

-> 내용을 추가하려면 content 라는 속성에 값을 넣어주면 된다