class tag, id tag 차이점

class tag

1. 클래스 태그 (class)

정의: class 속성은 여러 HTML 요소에 공통적으로 적용할 수 있는 스타일을 정의합니다.
용도: 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용합니다. 하나의 클래스는 여러 요소에 적용할 수 있습니다.

---

ID tag

2. ID 태그 (id)

정의: id 속성은 문서 내에서 고유한 요소를 식별하기 위해 사용됩니다. 각 ID는 문서 내에서 단 하나만 존재해야 합니다.
용도: 특정한 요소에만 스타일을 적용하거나 JavaScript로 해당 요소를 쉽게 찾고자 할 때 사용합니다.

• code

  <!-- class tag -->
  <p>**class** ----------------------------</p>
  <p class="red">class tag</p>
  <p class="red yellow-bg">class tag + yellow-bg</p>
  <p class="red fancy">class tag + fancy</p>
  
  <!-- id tag -->
  <p>**ID** ----------------------------</p>
  <h2 id="IDheader">ID</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, optio
    corrupti suscipit perferendis temporibus eveniet amet voluptate ea, et non
    repudiandae? Modi deleniti praesentium doloremque nihil? Ipsam ea odio
    amet!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, optio
    corrupti suscipit perferendis temporibus eveniet amet voluptate ea, et non
    repudiandae? Modi deleniti praesentium doloremque nihil? Ipsam ea odio
    amet!
  </p>

  /* class tag ------------------- */
  .red {
    color: #f33;
  }
  
  .yellow-bg {
    background: #ffa;
  }
  
  .fancy {
    font-weight: bold;
    text-shadow: 4px 4px 3px #77f;
  }
  
  /* ID tag------------------- */
  #IDheader {
    background-color: rgb(255, 162, 218);
  }

---

3. 차이점

특성	클래스 (class)	ID (id)
고유성	여러 요소에 적용 가능	문서 내에서 유일해야 함
선택자 우선순위	낮음 (ID보다 우선순위가 낮음)	높음 (ID는 클래스보다 우선)
사용 예시	여러 요소에 공통 스타일 적용	특정 요소에 고유 스타일 적용

결론

클래스는 여러 요소에 스타일을 적용할 수 있어 재사용성이 높습니다.ID는 특정 요소에 대한 고유한 식별자로, 주로 JavaScript와 CSS에서 특정한 요소를 선택할 때 사용됩니다.

💻 reference

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors