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. id값이 select인 것에 효과를 준다.
    샵을 붙여준다. #select


    클래스 선택자는 . (점)


    아이디: 학생 한명 한명 식별, 한번만 등장 ...
    클래스: 1반 2반 3반 ..대상을 관리하기 쉽도록 그룹핑
  2. 쿠쿠다스
    감사합니당^^
  3. 공삼이육
    감사합니다
  4. 14번째
    5.6.
  5. php가 첫취업?
    2017-04-30
  6. spacepublisher
    물론 됩니다. 문법적인 오류는 전혀 없습니다.
    오히려, 현업에서는 '권유'되는 방식입니다.
    '아이디를 사용을 자제하자.' '아이디 사용을 금지하자'라는 말들을 협업자들끼리 꽤 일반적으로 합니다.
    대화보기
    • 코딩왕될래
      감사합니다.
    • 오원구
      고맙습니다.
    • Sol Lee
      써도 됩니다 id 를 쓰는게 컨벤션 이긴 하지만요
      대화보기
      • YoungWoong Ha
        질문있습니다. 아이디 선택자를 하나도 쓰지 않고 한번만 적용할 경우에도 클래스 선택자를 써도 되나요?
        추후에 다른곳에도 적용할 가능성이 있을걸 대비해서요
      • jgatsby
        잘 듣고 갑니다!
      • 샐리의 법칙
        소중한 강의 정말 감사합니다.
        복많이 받으셔요...
      • matheios
        강의 감사합니다~
      • 임지호
        선택자의 종류
        - 태그 선택자 : 모든 선택자에 디자인 적용(그냥 태그 이름)
        - 아이디 선택자 : 고유한 하나의 태그에만 아이디 부여해서 디자인 적용(#아이디 이름)
        - 클래스 선택자 : 여러 개의 태그를 클래스로 그룹핑해서 디자인 적용(.클래스 이름)
        (*꼭 같은 이름의 태그일 필요 없음, 여러가지 태그를 그룹핑해도 됨)
      • 최현승
        161008완료
      • 람타
        쉬운강의 감사합니다.
      • 추석연휴
        웹어플리케이션 만들기, HTML 수업을 지나 CSS 수업 시작했습니다. 항상 감사합니다!
      • 잘 봤습니다!
      • 감성팔이
        감사합니다!
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기