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. 2021.09.22 완료
  2. 이현수
    2021.09.02(목)
  3. 두드
    2021.07.21 완료
  4. 감자먹는넘
    감자
  5. jeisyoon
    2021.06.21 선택자 종류 - OK
  6. barozaqu
    20210518.
  7. Jeong Il Haan
    20210512
  8. 무탕
    2021.5.7 완료
  9. 감사히 잘 보았습니다.
  10. gkalsdlf
    ㅇㄹ~
  11. Minint
    2021.02.28
  12. HyeonHui Jeong
    20210216
  13. sunghun328
    210210
  14. 임태경
    css 기초다지기 감사합니다
  15. 스마일가이
    2021.01.26 완료 감사합니다
  16. 개발자
    태그 선택자, id 선택자, class 선택자가 있고, id 선택자는 한 번, class 선택자는 여러 번 등장한다.
  17. 따뜻한츄르
    201229
  18. 201223 ✅
  19. 201213
  20. 몽실엄마
    또 하나 배워갑니다.
  21. Seunghyuk Rodrigo Kim
    감사합니다
  22. switpotato
    20201122: 2차학습 완료
  23. 켄드릭
    2020.10.29(목) 1차 학습완료
  24. 만듀
    1028
  25. Hyuk-Jin
    2020.10.26
  26. jaehyunlee
    완료
  27. 오석민
    완료
  28. 박병진
    2020.09.30 감사합니다
  29. 코딩에미치다
    2020-09-27 수업 완료했습니다! css 강의 3일안에 다 듣기 도전합니다ㅎㅎ
  30. 콜라
    20200926 완료
  31. 여니여니
    200920 감사합니다! id 는 1번 class 는 여러번^^
  32. switpotato
    20200824 완료-감사합니다!!
  33. 성훈
    클래스라는것은 프로그래밍에서 매우 중요하지요. 강의감사합니다
  34. 김성곤
    20200716 감사합니다!
  35. 열심히사는사람
    완료
  36. 한강
    id 선택자 : 학번1명 #
    Class 선택자 : 반전체 .
    편안한 저녁 되세요~!!!
    200526
  37. 노래하는프로그래머
    완료!
  38. green diseny
    클래스 태그 영상보기!
  39. Henry park
    好极了!
  40. 태그 속성 id부여 속성값에 css명령을 넣으려할 때
    <style><style>사이
    id태그 #속성값 { css명령어 }

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

    <li id="select">css</li>
  41. 무지개반사
    완료
  42. opper
    2020.1.6 수업완료
  43. Blanc
    2020.01.04
  44. 없으면안돼요
    수강완료
  45. Grigo
    id선택자는 한개한번 (#이용)
    class선택자는 여러개 그룹핑 사용 (.이용)

    완료
  46. alpha
    191001 수강완료
  47. 태태
    수강완료 #id 는 1개 .class는 여러개 !!
  48. 치디우기
    2019/8/25 수강완료
  49. 류석현
    수강완료
  50. 박재빈
    수강완료!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기