[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 36회차 미션

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 36일차입니다!

오늘은 가상 요소 선택자와 속성 선택자에 대하여 공부했습니다.

가상 요소 선택자와 속성 선택자 모두 사용해본 적은 있지만 개념이 잘 안 잡혀있던 내용이었는데,

동영상 강의로 설명 듣고 쉬운 예제로 학습하니 바로 머리에 100% 들어오네요...! 😇

 

오늘은 10번째 커리큘럼의 10~13. 가상 요소 선택자 - before, after / 속성 선택자 - [attr], [attr=value], [attr^=value], [attr$=value] 내용을 공부했어요.

---

<Today I Learned>

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

🔶 CSS를 통해서 HTML에 가상 요소를 생성하여 사용

✨ 예전에는 colon 1개 사용하는 것이 표준이었으나 IE 8버전 이후로 colon 2개 사용이 표준이 됨

 

<before>

🔶 E 요소 내부의 앞에, 내용(content)을 삽입

🔶 (CSS) content 속성 필수

🔷 ::before

✨ Emmet 문법 : ul>li{$}*10 작성 후 <Tab>키 : <ul><li>1</li> ... <li>10</li></ul> 자동 생성

 

- 예제

 

<after>

🔶 E 요소 내부의 뒤에, 내용(content)을 삽입

🔶 (CSS) content 속성 필수

🔷 ::after

 

<속성 선택자 (Attribute Selectors)>

✔ HTML 속성: <div class="x"> 에서 class는 속성(Attribute)

✔ CSS 속성: color: red; 의 color는 속성(Property)

 

<attr>

🔶 속성 attr을 포함한 요소 선택

- 예제

 

 

<attr=value>

🔶 속성 attr을 포함하며 속성 값이 value인 요소 선택

- 예제

 

 

<attr^=value>

🔶 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택

 

<attr$=value>

🔶 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택

 

- 예제

 

---

강의 링크: https://bit.ly/3m0t8GM