선택자_가상요소

가상요소 선택자(Pseudo-Elements)

가상요소 선택자: 가상의 요소를 선택하는 선택자

• 콜론 하나도 적용되나 웹표준을 지키기위해서는 :: 콜론 두개를 사용하는 걸 권장 

 

 

::before 

 

::before : 선택자 요소의 내부앞에 내용(content)을 삽입

• 삽입되는 내용은 inline요소
• content 속성은 꼭 작성해야한다(글자 안넣고 가상요소 어떤걸 만들때 content:"";)

 

코드펜 예제 

 

See the Pen 선택자_가상요소 by 김선미 (@tjsalsun) on CodePen.

 

::after

 

::after: 선택자 요소 내부 뒤에 내용(content)을 삽입

• 삽입되는 내용은 inline요소
• content 속성은 꼭 작성해야한다(글자 안넣고 가상요소 어떤걸 만들때 content:"";)

 

코드펜 예제

 

See the Pen 선택자_가상요소2 by 김선미 (@tjsalsun) on CodePen.

 

 

TIL

keypoint

가상요소 after, before 할때는 content 속성 필수 

 

느낀 점

글자만 넣는게 아닌 다른걸 만들수도 있다

 

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐