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. matheios
    강의 감사합니다~
  3. 임지호
    선택자의 종류
    - 태그 선택자 : 모든 선택자에 디자인 적용(그냥 태그 이름)
    - 아이디 선택자 : 고유한 하나의 태그에만 아이디 부여해서 디자인 적용(#아이디 이름)
    - 클래스 선택자 : 여러 개의 태그를 클래스로 그룹핑해서 디자인 적용(.클래스 이름)
    (*꼭 같은 이름의 태그일 필요 없음, 여러가지 태그를 그룹핑해도 됨)
  4. 최현승
    161008완료
  5. 람타
    쉬운강의 감사합니다.
  6. 추석연휴
    웹어플리케이션 만들기, HTML 수업을 지나 CSS 수업 시작했습니다. 항상 감사합니다!
  7. 잘 봤습니다!
  8. 감성팔이
    감사합니다!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기