CSS

선택자의 종류

Crucifi 2019. 7. 13. 08:10

이번 시간에서는 다양한 형태의 선택자를 알아봅니다.

  • 태그 선택자
  • 클래스 선택자
  • 아이디 선택자

3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 더 배우면 됩니다. 

 

먼저 아이디선택자에 대해 알아봅시다.

 

<!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>

아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이  select인 태그라는 뜻입니다. 

#select{font-color:50px;}

 

흔히 인스타에서 해시태그라고 하는 #을 써서 css라는 텍스트만 영향을 끼치도록 해보았습니다.

#을 적지않으면 명령문에 있는 모든 텍스트에 영향을 줍니다.

 

select라고 선언한 css라는 텍스트의 크기를 50px로 정해서 글자크기를 키워보겠습니다.

 

크다..

 

이런식의 결과가 나옵니다.