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. green diseny
    클래스 태그 영상보기!
  2. Henry park
    好极了!
  3. 태그 속성 id부여 속성값에 css명령을 넣으려할 때
    <style><style>사이
    id태그 #속성값 { css명령어 }

    예제
    <style>
    #select{
    font-size:50pixel;
    }
    </style>

    <li id="select">css</li>
  4. 무지개반사
    완료
  5. 2020.1.6 수업완료
  6. 2020.01.04
  7. 없으면안돼요
    수강완료
  8. id선택자는 한개한번 (#이용)
    class선택자는 여러개 그룹핑 사용 (.이용)

    완료
  9. 191001 수강완료
  10. 태태
    수강완료 #id 는 1개 .class는 여러개 !!
  11. 치디우기
    2019/8/25 수강완료
  12. 류석현
    수강완료
  13. 박재빈
    수강완료!
  14. 이만재
    수강완료!
  15. freemac
    수강완료!
  16. 20190727 완료
  17. 다나가
    190718 - 완료!!
  18. 김주엽
    수업완료
  19. 잘될자
    190502 목요일 수강완료!
  20. 뿌에에엥
    2019.03.27. 완료
  21. 노혜주
    완료!
  22. lygon
    2019-02-22 완료
  23. steal
    20190124 완료
  24. n941212
    class는 한번 id는 여러번 사용할 수 있다
  25. 숨이
    완료햇습니당
  26. 또롱
    감사합니다.
  27. 김민영
    완료
  28. 끵끵
    정말 쉬운 설명이네요 !
    대화보기
    • 로버트한
      감사합니다. 잘보았씁니다.^^
    • 고유르
      복습완료
    • Robert Eric
      태그 선택자/id 선택자/클래스 선택자
      아이디 선택자는 단 한번. 클래스 선택자는 grouping이다.

      감사합니다.
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      감사합니다! 지식이 점점 정제화되는거 같아요 ㅎㅎ
    • JN87
      180101 감사합니다.
    • 김성인
      완료!
    • 푸른하늘
      9일차 공부 감사합니다
    • 키썬
      정말 감사합니다아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ
      컴터 젬병이였던 내가 이해가 막됨
    • violet
      class란?
      어떤 대상을 관리하기 쉽도록 그룹핑하는 것 (학교의 반을 생각해보면 이해가 쉽다.)

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


        클래스 선택자는 . (점)


        아이디: 학생 한명 한명 식별, 한번만 등장 ...
        클래스: 1반 2반 3반 ..대상을 관리하기 쉽도록 그룹핑
      • 쿠쿠다스
        감사합니당^^
      • 공삼이육
        감사합니다
      • 14번째
        5.6.
      • php가 첫취업?
        2017-04-30
      • spacepublisher
        물론 됩니다. 문법적인 오류는 전혀 없습니다.
        오히려, 현업에서는 '권유'되는 방식입니다.
        '아이디를 사용을 자제하자.' '아이디 사용을 금지하자'라는 말들을 협업자들끼리 꽤 일반적으로 합니다.
        대화보기
        • 코딩왕될래
          감사합니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기