📌 css

📍 선택자 (selector)

✏️ 태그이름 선택자

p {
 }

✏️ 아이디 선택자

#container {
 }

✏️ 클래스 선택자

.detail {
 }

✏️ 모든 요소 선택자 (공통적으로 적용시킬떄 : font)

* {
 }

✏️ 가상요소 선택자: 요소가 있다고 가정
<img 별이미지 />

<p>본문입니다</p>
::before 
    특정태그 앞에있는 가상요소
::after
    특정태그 뒤에있는 가상요소
::marker
    li 태그 마커 부분을 의미
::selection
    드래그 시 영역을 의미
::first-letter
    요소의 첫글자 부분을 의미

✏️ 복합 선택자

p { p태그에 적용되는 디자인 }
#a {id='a'인 태그에 적용되는 디자인}
.a {class='a'인 태그에 적용되는 디자인}
::before { 모든태그의 첫번째 자식인 가상요소에 적용되는 디자인 }

클래스가 a 인 p 태그한테 적용시키고 싶은대?
  p.a { p태그 이면서 클래스이름이 a인 요소한테 적용되는 디자인}
  img#logo {img 태그이면서 id가 logo 인 요소한테 적용되는 디자인 }
  h1#tittle.red {h1태그이면서 id가 title이면서 class 가 red인 요소}
  h1.red.detail { h1태그이면서 class가 red이면서 class가 detail인 요소}
  p::before {p태그이면서 그 태그의 before 가상요소에 적용되는 디자인}

✏️ 가상클래스선택자(가상의 집단)
:을 사용한다

마우스가 올라가져있는 집단
a태그가 방문한 링크인 집단
a태그가 방문된 적이 없는 링크인 집단
n번째 요소인 집단

 :first-child
 :nth-child
 :last-child
 :hover
 :focus
 ...