[프론트엔드][CSS3] 12. 가상선택자 (1) - 요소선택자, 반응선택자

가상클래스선택자

: 선택될 요소의 특별한 상태를 지정하는 선택자이다.

태그:가상선택자 이러한 형식으로 입력한다.

 

요소선택자

- 태그::before

  : 특정요소의 앞에 삽입을 하는 것으로, 내용이나 가상의 요소를 넣어서 표현한다.

 

- 태그::after

  : 특정요소의 뒤에 삽입을 하는 것으로, 내용이나 가상의 요소를 넣어서 표현한다.

 

<h2>태그 내용의 맨 앞 부분에 글을 추가하고, 글에 색상, 크기 스타일을 적용시켜주었다.

 

<p>태그 내용의 맨 마지막 부분에 글을 추가하고, 글에 색상, 크기, 굵기 스타일을 적용시켜주었다.

 

 

 

 

반응선택자

: 사용자가 마우스로 특정한 행동을 취했을 때 CSS 속성을 지정할 수 있는 선택자

 

- 태그:hover  : 마우스를 올려 놓으면 보여지는 스타일

- 태그:active  : 마우스로 클릭했을 때 보여지는 스타일

- 태그:visited  : 클릭한 후 보여지는 스타일

- 태그:link  : 방문하지 않은 링크에 보여지는 스타일