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

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

    <li id="select">css</li>
  50. 무지개반사
    완료
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기