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