CSS 선택자

 

• 선택자

• 전체 선택자: *
• 태그 선택자
• 클래스 선택자: .

• /*CSS*/
  .class1 { background: yellowgreen; color: darkgreen;} 
  div.class2 { background: darkgreen; color: tellowgreen;} //범위를 div 태그에 한
  <p class="class1">클래스 선택자</p> //class1이라는 class 속성값을 가진 모든 태그 선택
  <p class="class2">클래스 선택자</p>
  <div class="class2">클래스 선택자</div>
  

  • id 선택자: #

  /*CSS*/
  #id1 { background: yellowgreen; color: darkgreen;} 
  div#id2 { background: darkgreen; color: tellowgreen;} //범위를 div 태그에 한
  <p class="class1">클래스 선택자</p> //class1이라는 class 속성값을 가진 모든 태그 선택
  <p class="class2">클래스 선택자</p>
  <div class="class2">클래스 선택자</div>
  

 

<클래스 선택자 vs id 선택자>

 

class 속성: 어떤 분류 안 요소의 특성을 정의하는데 사용, 속성값을 2개 이상 가질 수 있음

id 속성: 어떤 요소에 대해 "유일한" 특성을 정의( ID 속성값은 오직 하나만 있어야 한다.)

• 클래스 선택자: 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일에 사용. 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정
• ID 선택자: 단 한 번 유일하게 사용될 스타일에 사용, 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용함.
• 우선순위: ID 선택자 > 클래스 선택자