HTML/CSS - 가상선택자

1. 가상선택자란?

미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소.

 

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

 

실제 태그가 존재하지는 않지만 css를 통해 마치 태그가 있는 것처럼 동작할 수 있는 것이다.

꾸밈을 위해 의미없는 태그를 더 추가해야할 때 굳이 추가 하지 않고 가상으로 처리할 수 있게 해주는 css기능이다.

 

 

2. 가상선택자는 언제 쓰나?

의미없는 태그를 쓰지 않도록 도와준다.

-목록형 꾸밈

-버튼 꾸밈

-간단한 아이콘 만들 때

-이미지 아이콘을 넣고 싶을 때

 

tag::after {
content : “ 여기에 내용 적으면 됨”;
attr : value1;
attr : value2;
attr : value3;
}

 

3. 가상선택자 적용이 안되는 경우  

1. 폼태그와 이미지태그는 가상선택자가 적용되지 않음

2. ie7 이하버전은 지원되지 않는다.

 

 

 

-참고: https://green-webdesigner.tistory.com/20

        http://uxuiz.cafe24.com/wp/archives/4726 (가상클래스 활용법)