CSS 타입 선택자의 의미와 삽입 위치 및 예제


CSS 타입 선택자 또는 태그 선택자는 HTML 태그를 CSS 선택자로 지정하는 기능입니다. 별다른 기호 없이 부등호 <> 기호를 제거하고 태그 이름을 삽입하면 타입 선택자로 지정됩니다.

타입 선택자(Type Selector)

타입 선택자 또는 태그 선택자(Tag Selector) 또는 요소 선택자(Element Selector)는 HTML의 태그를 CSS 선택자로 지정하는 가장 기본적인 선택자입니다.

타입 선택자로 지정할 태그를 부등호(< >)를 제거하고, 맨 앞에 작성합니다. 그리고 디자인 효과를 줄 선언 블록의 문법을 중괄호{ } 사이에 작성합니다.

p {
    color:red;
}

위의 코드의 의미는 p 태그를 선택자로 지정해서, 글씨색(color)을 빨강색(red)로 지정하라는 의미입니다.


타입 선택자의 위치

타입 선택자는 <head> 태그 사이에 있는 <style> 태그 사이에 위치합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
          color: red;
      }
    </style>
  </head>
  <body>
    <h1>타입 선택자</h1>
      <p>빨강색 1</p>
      <p class="babo">빨강색 2</p>
      <ol>
       <li>변하지 않음 1</li>
       <li>변하지 않음 2</li>
      </ol>
  </body>
</html>

<body> 태그 사이에 있는 모든 <p> 태그 사이의 글자색이 빨강색으로 변하게 됩니다.