[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #3. 가상 선택자

1. 가상 선택자 : 특정 상태를 만족할 때만 태그를 적용하는 선택자. 가상 클래스와 가상 요소가 있다.

1) 가상 클래스 : 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스.

-> 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줌.

✔ 대표적인 가상클래스

(1) first-child(가장 앞에 오는 값에 적용), last-child(가장 마지막에 오는 값에 적용)

ex) <head> <style> li:first-child { color:red; }

li:last-child { color:blue; } </style></head>

👉 HTML은 빨간색, JS는 파란색으로 지정된다.

(2) link(아직 방문하지 않은 하이퍼링크 / 앵커), visited(이미 방문한 하이퍼링크 / 앵커)

ex) <head><style> a:link { color :blue; }

a:visited { color:gray; } </style></head>

👉 방문하지 않은 링크는 파란색, 한번이라도 클릭하여 방문한 링크는 회색이 된다

(3) focus(현재 입력 포커스를 가지고 있는 요소에 적용), hover(현재 마우스 포인터가 위치해있는 요소에 적용), active(사용자 입력에 의해 활성화된 요소에 적용)

ex) <head><style> a:focus { background-color:yellow; } </style></head>

👉 Tab키로 포커스를 지정할 경우 배경색이 노란색으로 바뀐다

ex) <head><style> a:hover { font-weight:bold; } </style></head>

👉 '네이버' 글자에 마우스를 올릴 경우 굵게 바뀐다

ex) <head><style> a:active { color:red; } </style></head>

👉 '네이버' 글자를 클릭하는 순간 글자가 빨간색으로 바뀐다

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

✔ 대표적인 가상요소

(1) before: 가장 앞에 요소(content)를 삽입

ex) <head><style> p:before { color:red; content: "before 가상 요소를 활용한 내용"; }</style></head>

👉 p 앞에 "before 가상 요소를 활용한 내용"라는 문장을 삽입

(2) after : 가장 뒤에 요소(content)를 삽입

(3) first-line : 요소의 첫 번째 문장에 효과를 적용.

ex) <head><style> p:first-line { color:yellow; } </style></head>

👉 첫 문장인 ~~~~~~~가 노란색으로 바뀐다.

(4) first-letter : 블록 레벨 요소의 첫 번째 글자를 감싸는 요소를 생성

[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #5. 단위, 색상, 백그라운드 (0)	2022.04.11
[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #4. 가상 선택자 구체성, 상속 (0)	2022.04.06
[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #2. 선택자 (0)	2022.03.29
[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #1. CSS 기초(문법/주석/연결방식) (0)	2022.03.28
[HTML 배우기] 엘리스 코딩 무료 강의 HTML 코스 기초 기록 (기본 태그) (0)	2022.03.20