[11강] 원하는 요소만 선택해서 스타일 지정하기 2

• 가상선택자

⭐ 가상 선택자

🌕 hover

: 마우스를 올리고 있을 때 나타날 스타일 지정.

➰ div에 hover을 적용해도 아무런 변화가 없다?!
➰ 마우스를 올리고 있는 게 보이지는 않지만, 마우스를 올려야만 효과가 나타난다.
➰ 그냥 있을 때는 아무런 변화가 없지만?!
➰ 마우스를 가져다대니 로그인 버튼 부분이 바뀐다!

🌕 focus

: input 같은 곳에 무언가를 쓰려고 할 때, 마우스가 있는 곳을 포커싱 상태라고 한다. ➡ 지금 선택된 지점을 나타내는 것이다.

탭을 통해 focus를 변경할 수 있다.

➰ 커서를 ID input 부분에 포커싱하니 스타일이 바꼈다.

❗ 이때 보튼 또한 포커싱 되지만, 스타일은 변하지 않는다.

❓ 포커싱 되는 모든 곳에 스타일을 적용시키고 싶을 때는?

✅ *{} 로 입력

• *은 모든 태그들을 다 선택해 스타일 적용!
  ➡ 세부적으로, 자세하게 선택된 애들이 우선적으로 적용된다. = 그 모습으로 출력된다.
  ➡ 똑같은 우선순위이면 아래에 작성한 css 모습으로 출력된다.

➰ 이제 로그인 버튼에도 스타일이 적용된다!

🌕 after, before

🌔 after: div 뒤쪽에 스타일을 적용. 이 '뒤'는 div 요소 네모 다음 칸을 말하는 듯!

➰ div 뒤쪽에 아무런 컨텐츠가 없기 때문에 content='test'로 test라는 텍스트를 넣어주고 스타일을 적용해준다.

➰ display: block을 넣어주면 태그를 추가한 것 마냥 넓은 폭의 네모가 추가된다.

🌔 before: div 앞쪽에 추가해 스타일을 적용.

➰ 주로 꾸며주는 텍스트를 많이 쓴다고 한다.
➰ 리스트를 표현할 때도 before 속성들이 기본적으로 적용되어 있다.

🍒 정리

여기서 가상 선택자를 배울 줄은 꿈에도 몰랐다! 진작 인강을 들었어야 했다ㅠㅠ 괜히 밀려가지고 이해하지도 못한 코드를 쓰고 있었으니...
웹 페이지 메인 화면 만들기에서 당연히 hover와 after, before 가상 선택자를 사용했다. 그 덕분에 예쁜 화면이 만들어지기는 했는데, 이해하려고 열심히 찾아보기도 하고, 유튜브도 보고, 정리도 해보았지만 제대로 이해가 되지는 않았었다. 물론 지금도 완벽하게 이해한 것은 아니지만, 그래도 이걸 먼저 봤으면 조금이라도 이해가 빠르지 않았을까..? 했지만 오히려 그때 배워놔서 지금 이해가 빠른 것일 수도 있다! 어찌됐든 복습이든 예습이든 되었으니 만족한다.
비슷한 내용을 여러 번 하니 꽤 외워지는 것 같기도 하고. 역시 반복이 최고인 듯 하다. hover 효과가 멋진 게 너무 많아서 제일 많이 배워보고 싶었다. 나중에 게시판 만들 때 여러 효과를 넣어봐야지!! 열심히 찾아봐야겠다!!