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. 끵끵
    정말 쉬운 설명이네요 !
    대화보기
    • 로버트한
      감사합니다. 잘보았씁니다.^^
    • 고유르
      복습완료
    • Robert Eric
      태그 선택자/id 선택자/클래스 선택자
      아이디 선택자는 단 한번. 클래스 선택자는 grouping이다.

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