CSS

선택자의 종류

선택자의 타입들

이번 수업에서는 다양한 형태의 선택자를 알아봅니다.

  • 태그 선택자
  • 클래스 선택자
  • 아이디 선택자

3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 더 배우면 됩니다. 

태그 선택자

태그를 선택합니다. 아래 코드는 이 문서의 모든 li 태그라는 뜻입니다. 

li{color:red}

아이디 선택자

아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이  select인 태그라는 뜻입니다. 

#select{font-color:50px;}

예제 selector_1.html

 
<!DOCTYPE html>
<html>
  <head>
    <style>
      li{
        color:red;
        text-decoration:underline;
      }
      #select{
        font-size:50px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li id="select">CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

클래스 선택자

 클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다. 

댓글

댓글 본문
작성자
비밀번호
  1. 오원구
    고맙습니다.
  2. Sol Lee
    써도 됩니다 id 를 쓰는게 컨벤션 이긴 하지만요
    대화보기
    • YoungWoong Ha
      질문있습니다. 아이디 선택자를 하나도 쓰지 않고 한번만 적용할 경우에도 클래스 선택자를 써도 되나요?
      추후에 다른곳에도 적용할 가능성이 있을걸 대비해서요
    • jgatsby
      잘 듣고 갑니다!
    • 샐리의 법칙
      소중한 강의 정말 감사합니다.
      복많이 받으셔요...
    • matheios
      강의 감사합니다~
    • 임지호
      선택자의 종류
      - 태그 선택자 : 모든 선택자에 디자인 적용(그냥 태그 이름)
      - 아이디 선택자 : 고유한 하나의 태그에만 아이디 부여해서 디자인 적용(#아이디 이름)
      - 클래스 선택자 : 여러 개의 태그를 클래스로 그룹핑해서 디자인 적용(.클래스 이름)
      (*꼭 같은 이름의 태그일 필요 없음, 여러가지 태그를 그룹핑해도 됨)
    • 최현승
      161008완료
    • 람타
      쉬운강의 감사합니다.
    • 추석연휴
      웹어플리케이션 만들기, HTML 수업을 지나 CSS 수업 시작했습니다. 항상 감사합니다!
    • 잘 봤습니다!
    • 감성팔이
      감사합니다!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기