선택자(1)_기본 선택자

가장 기본적인 선택자(Selector)에 대해 알아보자!

전체 선택자

  • * - 모든 요소 선택
  * {
      font-size: 20px;
  }


태그 선택자

  • tag - 해당 태그 이름을 가진 모든 요소 선택
  div {
      font-size: 20px;  /* 태그 이름이 `div`인 요소 선택 */
  }


클래스 선택자

  • .class - 해당 클래스 특성을 가진 모든 요소 선택
  .box {
      font-size: 20px;  /* 클래스가 box인 요소 선택 */
  }


아이디 선택자

  • #id - 해당 아이디 특성을 가진 모든 요소 선택

  • 해당 id를 가진 요소는 문서 내 하나만 존재해야 함

  #box {
      font-size: 20px;  /* 아이디가 box인 요소 선택 */
  }


그룹 선택자

  • , - 여러 선택자를 같이 사용할 때 ,로 구분하여 연결

  • 같은 코드를 여러번 작성할 필요가 없어 코드가 간결해짐

h1, h2 {
    color: orange;
}

좋은 웹페이지 즐겨찾기