[인프런/생활코딩] 선택자 공부 팁? 가상 클래스 선택자?

3. 선택자 공부 팁

'선택자'는 CSS에서 '주어'와 같은 의미. 대단히 중요!
CSS가 발전하면서 그 양도 늘어났기에, HTML 문법처럼 기본형태만 알고 모르는 건 찾아보는 게 좋다.

1) Selector 수련방(들어가서 이 곳의 목표는 움직이고 있는 애들을 타이핑해라 하는 의미!!)

flukeout.github.io/

CSS Diner

★ 진도 다 빼고 여기서 공부하고 정리도 하기 ★

 

2) 'css cheatsheet selector' (구글 이미지에 검색)
- 필요한 '선택자'를 그때 그때 찾아볼 수 있는 커닝 페이퍼 느낌. 

 

4. 가상 클래스 선택자(Pseudo class selector)
: id 선택자와 태그 선택자가 아니다. 
즉, 어느 한 가지만을 선택하는 것이 아닌 동시에 태그 선택자처럼 모든 태그에 대해 선택하는 것도 아니란 의미.
클래스 선택자는 아니면서 여러 특수한 표현들을 하는 선택자라고 생각.

이렇게 하면 동시에 작동하지 않음.

ex) 위의 그림처럼 표현하면 active와 hover가 동시에 작동하지 않는 경우를 볼 수가 있다.
★ 이땐, hover를 우선순위를 두어 아래 그림처럼 올려주면 동시에 작동이 된다!!

이렇게 하면 정상 작동

오늘 배운 가상 클래스 선택자들 예시

:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때(링크에 마우스 갖다 대었을 때)
:active - 마우스를 클릭했을 때(링크를 클릭했을 때)

 

조금 주의해야 할 점! :visited 같은 경우, 보안 문제로 인해, visited 내에서 사용할 수 있는 속성들이 제한적이라는 점..
일부 속성만 사용가능.

 :focus 는 말 그대로 '포커싱'하는 효과. 그래서 포커스를 적용하고 난 후 웹사이트에서 탭 키를 누르면 작동하는 걸 볼 수 있다. 근데, 포커스는 웬만하면 가상 클래스 중 맨 마지막에 적도록 하자. (왜인지는 마법이다.)
얘가 a 태그 외에도 input 태그 등으로 활용될 수 있다. hover 또한, 마찬가지이니 열공하자!

 

-- 혼자 공부하다 알게 된

1) active랑 focus 동시에 색깔을 적용하면 focus 색으로 맞춰진다. 에러인진 모르겠으나 일단 이런 게 있다는 정도만

2) ★ 아마도 가상클래스는 태그 혹은 클래스 선택자 뒤에 : 로 오는 것 같은디 맞나?