Front-end/HTML 5, CSS3

css 선택자

prden 2023. 7. 23. 10:37

1. 가상클래스와 가상요소

웹 요소를 클릭하거나 마우스 커스를 올러놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 활용한다.

1) : link, 가상 클래스 선택자 : 방문하지 않은 링크 스타일에 적용

2) : visited : 방문한 링크 스타일에 적용

3) : hover : 마우스 커서를 올려놓았을 때 스타일 적용

4) : active : 웹 요소를 활성화 했을 때 스타일 적용

5) : focus : 웹 요소에 초점이 맞추어졌을 때 스타일 적용

6) : enabled, :disabled : 요소를 사용할 수 있을 때와 없을 때

7) :checked : 라디오 박스나 체크 박스에서 해당항목을 선택했을 때의 스타일 지정

8) :root : 문서 전체에 적용하기 

...

ex13) ::before, ::after

https://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

 

[공유]::before와::after, 그들의 정체는? | Hivelab Blog

[공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한

blog.hivelab.co.kr

 

 

'Front-end > HTML 5, CSS3' 카테고리의 다른 글

가운데 정렬  (0) 2023.07.26
Flexbox  (0) 2023.07.23
세부적으로: 테두리 border vs. outline, 100% vs 100vs, 100vh  (0) 2023.07.21
반응형 css (Making our Website Responsive)  (0) 2023.07.16
Css Advanced (Section 7~)  (0) 2022.11.12