html & css/개념

선택자의 종류 1 : 아이디 선택자

Doo Hee 2023. 9. 15. 00:10

태그 선택자

: 태그 그 자체를 선택

<!DOCTYPE html>
<html>
  <head>
    <style>
      li {
        color: red;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li id="select">CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

웹페이지의 모든 li태그에 색상 적용

 

id 선택자

: 특정 id의 속성 값이 있는 태그에 적용

: #을 앞에 붙여 id임을 인식하게 한다.

<!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인 태그에 적용한다.