👩🏻💻 쉬운 듯 어려운 '가상 클래스'와 '가상 요소'
배울때는 '아~' 하고, 선생님이 하시는 걸 보고 따라 할때는 쉬웠던 것들인데
막상 혼자 하니 어려웠고 이렇게 사용하는게 맞나 싶었다. 🤦🏻♀️
머리속에 있는 것을 글로 적으면 더 명확하게 알 수 있기에
혼자서 정리를 한번 해보는 시간을 갖도록 하자.
📍 '가상 클래스' 란 무엇인가?
선택자 뒤에 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있다. 쉽게 말해 단순히 html 구조와, css 단순 스타일만으로는 구현하기 힘든 스타일을 사용자의 이벤트 마다 예쁘게 적용 시킬 수 있다. (ex. 그림에 마우스를 올렸을 때 그림 테두리 색이 진해진다.)
📍 '가상 클래스' 종류 (많이 사용하는 것들만)
📒 가상 클래스는 css문서에서 선택자 뒤에 ':' 로 시작함.
- :hover - 마우스를 올렸을 때 (여태 경험으로 제일 많이 사용함) ⭐️ hover 많이 사용함
- :link - 방문한 적 없는 링크
- :visied - 방문한 적 있는 링크
- :focus - 포커스 되었을때
- :active - 마우스를 클릭한 상태일때 (딸깍 중에 딸 일때)
- :not(선택자 또는 이름) - 앞 선택자 컨텐츠 중에 괄호 안의 선택자 또는 이름 부분만 빼고 스타일 적용
- :first-child - 부모태그 바로 아래 첫번재 자식태그
- :last-chilid - 부모태그 바로 아래 마지막 자식태그
✓ :hover → :focus → :active 순으로 작성되어야지 3가지 모두 다 한꺼번에 적용시킬때는 잘 적용.
👉 여기서 부턴 'nth 시리즈들' ( 태그들의 순서에 따라 특정 태그 지정 가능)
- :nth-child(숫자 또는 짝홀수) - 선택자 태그의 자식 중 몇번째 태그
- :nth-of-type(숫자 또는 짝홀수) - 선택자 중 몇번째 태그
- :nth-last(first)-child(숫자 또는 짝홀수) - 선택자 태그의 자식 중 마지막(첫번째) 태그
- :nth-last(first)-of-type(숫자 또는 짝홀수) - 선택자 중 마지막(첫번째) 태그
📍 '가상 요소' 란 무엇인가?
선택자에게 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다. 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드. (ex. p태그의 컨텐츠 앞이나 뒤에 무엇인가 컨텐츠를 추가하고 싶다)
📍 '가상 요소' 종류 (이것도 많이 사용하는 것 위주)
📒 가상 요소는 css 문서에서 선택자 뒤에 '::' 으로 시작함. 📒 but ':' 으로도 구현됨 (구버전에서는 '::' 지원안했음)
- ::before - 요소 내용 앞쪽에 새 컨텐츠를 추가함
- ::after - 요소 내용 뒷쪽에 새 컨텐츠를 추가함
⭐️ before, after 는 진짜 많이 사용함,content값을 필수로 가짐!!
- ::first-letter/first-line - 요소의 컨텐츠 의 첫글자 또는 첫 줄에 스타일 적용함
- ::selection - 선택자 요소들 안에서 마우스 드레그 시 스타일 적용함
- ::marker - li 태그 앞에 있는 목록 스타일 모양에 스타일을 적용함.
📌 생각 정리
아직도 배울껏, 할것이 산더미 이지만 개발이 점점 더 재밌어진다. 더 많이 배워서 더 많은 걸 만들어보고 싶다 😆 천상 개발자라고 할 순 없어도, 이정도면 나도 개발자랑 잘 맞을지도 (?) 💁🏻♀️
front-end ing