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.15 OK 감사합니다
  2. 미래도비
    1.12
  3. 새콤달콤
    감사합니다
  4. 덕자
    완료!
  5. DreamBoy
    2023.09.15. CSS - 선택자의 종류 파트 완료했습니다.
  6. 다겸란
    수강완료
  7. JH의꿈
    8월 15일 화요일 23년 학습
  8. 고원규
    완료
  9. AgainstartJH
    2022년 11월 02일 수요일 학습완료!
  10. 헤밍웨이
    220822
  11. vigorously27
    2022년 7월 19일 화요일 학습완료!
  12. Joshep Woo
    감사합니다.
  13. jjy_lee2468
    22.02.03수강완료
  14. 임앤강
    2022-01-27 좋은강의 언제나 감사합니다 ^^
  15. 강수빈
    2022.1.26 수강완료 양질의 강의 잘 배우고 있습니다. 감사합니다. 애셋엄마도 코딩 배운다. 허허
  16. 뭉치우석
    오.. id와 class도 차이가 있는 것이었군요!!
  17. 코딩혁명
    2021.11.30 감사합니다
  18. 드림보이
    2021.11.09. 선택자의 종류 파트 수강완료
  19. 밀보리
    211024 학습완료 감사합니다
  20. 황금아가리
    2110003
  21. neal
    2021.09.22 완료
  22. 이현수
    2021.09.02(목)
  23. 두드
    2021.07.21 완료
  24. 감자먹는넘
    감자
  25. jeisyoon
    2021.06.21 선택자 종류 - OK
  26. barozaqu
    20210518.
  27. Jeong Il Haan
    20210512
  28. 무탕
    2021.5.7 완료
  29. 짜rr
    감사히 잘 보았습니다.
  30. gkalsdlf
    ㅇㄹ~
  31. Minint
    2021.02.28
  32. HyeonHui Jeong
    20210216
  33. sunghun328
    210210
  34. 임태경
    css 기초다지기 감사합니다
  35. 스마일가이
    2021.01.26 완료 감사합니다
  36. 개발자
    태그 선택자, id 선택자, class 선택자가 있고, id 선택자는 한 번, class 선택자는 여러 번 등장한다.
  37. 따뜻한츄르
    201229
  38. Gili
    201223 ✅
  39. 201213
  40. 몽실엄마
    또 하나 배워갑니다.
  41. Seunghyuk Rodrigo Kim
    감사합니다
  42. switpotato
    20201122: 2차학습 완료
  43. 켄드릭
    2020.10.29(목) 1차 학습완료
  44. 만듀
    1028
  45. Hyuk-Jin
    2020.10.26
  46. jaehyunlee
    완료
  47. 오석민
    완료
  48. 박병진
    2020.09.30 감사합니다
  49. 코딩에미치다
    2020-09-27 수업 완료했습니다! css 강의 3일안에 다 듣기 도전합니다ㅎㅎ
  50. 콜라
    20200926 완료
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기