CSS 선택자 종류 여러개 정리

선택자는 CSS 언어에서 매우 중요하게 작용하게 되면 웹페이지를 만들면서 선택자를 모른다면 CSS를 사용할수가 없으므로 필수 선택자로 태그, 클래스, 아이디 3가지는 꼭 알고 넘어가야할 부분이기도 합니다.

태그 선택자

선택한 태그에 효과를 주기 위해서 예제와 같이 특정한 li 태그에 디자인을 적용하기 위해서 style에 font 폰트, color 컬러, 배경화면을 디자인 하였습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      li{
        font-size: 30px;
        color:#0100FF;
        background-color:yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

아이디선택자

특정한 태그를 디자인하기 위해서는 html 속성으로 id 선택자를 추가하게 되며 id=”select” 이름을 지정하고 style에 #select{} 속성에 효과태그를 넣어주시면 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <style>    
      #select{
            font-size:30px;
	color:red;
	background-color:yellow;
      }
    </style>
  </head>
  <body>
    <ul>
  <li id="select">CSS</li>
  <li>HTML</li>     
  <li>JavaScript</li>
    </ul>
  </body>
</html>

클래스선택자

보통 다중태그에 디자인을 적용하기 위해서 클래스(class) 선택자가 사용되며 html 태그에 class=”name” 을 지정하여 style에 .name{} 형식으로 속성을 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>      
  .list{
    font-size:30px;
    color:#0100FF;
    background-color:yellow;
	  }
    </style>
  </head>
  <body>
    <ul>
      <li class="list">CSS</li>
      <li class="list">HTML</li>     
      <li>JavaScript</li>
    </ul>
  </body>
</html>