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. violet
    class란?
    어떤 대상을 관리하기 쉽도록 그룹핑하는 것 (학교의 반을 생각해보면 이해가 쉽다.)

    id란?
    한명한명을 관리하기 위해서 부여하는 고유의 값 (예 - 주민등록번호, 학번)
    여러번 등장하는 것이라면 클래스를 사용해서 그룹핑을 해줘야 한다. 클래스를 사용하면 다른 태그도 같이 묶어서 같은 효과를 줄 수 있다.
  3. 오빠는다르다
    감사합니다~!
  4. Id 선택자는 같은 주민번호를 가진 사람이 없듯이 똑같은 Id선택자를 여러번 사용하면안된다, 단 한번만 사용할것
    클래스 선택자는 grouping의 개념으로 class로 그룹핑하면 여러번 사용가능
  5. 강지후
    강의 완료 20170630
    "id는 한번, class는 여러번"
  6. 민정
    정말 이해하기 쉽게 알려줏요. 감사합니다.
  7. 현업에서 그런말을 하는건 프론트앤드 영역을 퍼블리싱 작업자가 처음부터 끝까지 작업/관리 하지않기 않기때문에 나온 이야기입니다
    서버사이드 개발자가 프론트앤드쪽을 어느정도 관여하게될경우 해당부분을 컨트롤하기위해 보통 아이디를 사용하는데 아이디는 페이지에 하나만 나와야하는 조건이 있기때문에 중복의 문제와 엘리먼트에 아이디는 하나만 할당할 수 있기때문에 이미 아이디가 발급된 엘리먼트에 추가적용이 불가능하기때문입니다
    퍼블리싱 산출물의 유연성을위해 클래스와 아이디는 적절하게 사용하는게 맞습니다
    보통 아이디 선택자는 페이지에 하나만 올 수있는 곳 또는 레이아웃에서 사용합니다
    대화보기
    • id값이 select인 것에 효과를 준다.
      샵을 붙여준다. #select


      클래스 선택자는 . (점)


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