CSS 아이디 선택자 의미와 사용법 및 예제

by

CSS 아이디 선택자 의미는 HTML 태그의 id 속성을 CSS 선택자로 지정할 때 사용하는 용어입니다. id 속성은 선택자 지정시 # 샵 기호를 사용합니다.

CSS 아이디 선택자

아이디 선택자(ID Selector)는 HTML 태그의 ID 속성을 선택자로 지정할 수 있는 기능입니다.

아이디 속성은 선택자로 지정시 샵 # 기호를 이름 앞에 붙입니다. 아이디명이 abc인 경우 #abc로 작성합니다.

#abc {
        color: red;
      }

아이디 속성이 abc인 태그의 값이 붉은 글씨(color : red;)로 변하게 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #abc {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 id="abc">아이디 선택자</h1>
  </body>
</html>

아이디 값 중복 불가

HTML 태그의 아이디 속성명은 중복될 수 없습니다. 따라서 여러 아이디 값을 주고 싶다면 독립적인 이름을 작성해야 합니다.

따라서 아이디 선택자도 각각 따로 작성해서 호출해야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #abc {
        color: red;
      }
      #xyz {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 id="abc">아이디 선택자</h1>
      <p id="xyz">아이디 값은 중복될 수 없습니다.</p>
  </body>
</html>

궁금해서 사용해보면, 아이디 속성도 클래스 속성처럼 중복해서 적용은 됩니다. 하지만 나중에 자바스크립트나 제이쿼리 등과의 프로그래밍 언어과 결합해서 사용할 경우 문제가 생길 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #abc {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 id="abc">아이디 값</h1>
      <p id="abc">아이디 값도 중복은 됩니다.</p>
      <p id="abc">하지만 나중에 제이쿼리 등의 선택자와 결합시 충돌이 일어나게 됩니다.</p>
  </body>
</html>

따라서 CSS 아이디 속성값은 중복하지 않고 사용하는 것이 좋습니다.