[DOM]ID, Class, Name 속성에 대해

HTML 문서를 작성하다 보면 태그 안에 속성 값으로 id, class, name이 존재하는 것을 경험할 수 있다. 

오늘은 이 속성들의 차이를 명확히 구분짓고 가는 것이 후에 도움이 될 것 같아서 이렇게 정리하는 시간을 가지게 되었다.

차이

---

이 셋의 차이를 Mozilla 사이트의 내용을 참고하면서 간단하게 비교해보자.

1. Id

먼저 공식 Mozilla 사이트에서 살펴보면 ID를 다음과 같이 설명하고 있다.

id

Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

즉 여러 Element 중에서 하나의 Element를 위한 유일한 식별자로, 문서 내에서 유일한 값이어야 한다.  만일 내가 다음과 같이 여러 개의 <p> 태그를 지니고 있고 이 중 가장 맨 위의 태그만을 변경하기를 원한다면 이 때 id 속성 값을 할당하여 해당 태그만을 참조할 수 있다. 

<p id="introducing"> Hello, My name is Catnap. </p>

<p> Nice to meet you. </p>

<p> I want to know a lot about you. </p>

2. Name

Name에 대해서 Mozilla 사이트에선 이를 구식(Obsolete) 표현이라고 설명하고 있다. 

id 속성이 여러 태그 내에서 사용가능하다면, name 태그 같은 경우엔 <a> 태그에서만 사용가능하다. 허나 이는 HTML 4 버전에만 해당되는 내용으로 HTML 5 이후로는 name을 사용하지 않고, id만을 사용한다.

3. Class

class

Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method Document.getElementsByClassName().

Class는 여러 Element를 위한 식별자로, 문서 내에서 유일할 필요가 없다.  class같은 경우 style에서 정의된 형식을 가져다 와서 사용하기 위해 많이 사용한다.  다음과 같이 예시를 들 수 있다.

<p id = "introducing" class = "introduction"> Hello, My name is Catnap. </p>

<p class = "introduction"> Nice to meet you. </p>

<p class = "introduction"> I want to know a lot about you. </p>

4. 사용

만약 위 태그들이 어떻게 쓰이는 지, 정확히 어떻게 정의되어있는 지가 궁금하다면 모질라 공식 사이트를 참고하자.

모질라 공식 사이트

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes