CSS Selector

• 전체 셀렉터

  *{ } 는 전체 범위, 즉 모든 element를 선택한다.

• ID 셀렉터

  # 엘리먼트 { } 는 ID의 element(속성값)이 '엘리먼트'로 지정된 요소를 선택한다.

  <p id="엘리먼트"
  class="show">...
  </p>

• Class 셀렉터

  . 엘리먼트 {...}

  .remark {...} : class가 remark인 element를 선택한다

  .widget {...} : class가 widget인 element를 선택한다

  .center {...} : class가 center인 element를 선택한다

  <div class="center">...
  </div>
  
  혹은
  
  <span id="label"
  class="center">...
  </span>
  
  얘네는 class가 center인 element임.

응용

• #안녕 .하이 {...}

  id가 '안녕' 이면서 동시에 class가 '하이'인 element 선택

  즉,
  <span id="안녕"
  class="하이">...
  </span>
  얘가 예시.

.

📌 # id는 고유한 element, 즉 전체문서 통틀어서 단 한군데에서만 유일한 id로 지정해줄 수 있음.

📌 . class 는 반복되는 항목들.