HTML id 속성 – 올바른 이해와 사용 방법

`id` 속성의 정의 및 사용법

id 속성은
해당 요소의 고유식별자(ID, unique identifier)를 지정하는 속성입니다.
이 속성의 값은 문서(웹 페이지)에서 유일하고 고유해야 합니다.

사용 목적

id 속성은 글로벌(전역) 속성입니다.
이 속성으로 지정된 값인 해당 요소의 고유식별자는 다양한 목적으로 사용될 수 있습니다.

해당 요소를 스타일하기 위한 CSS의 고유한 선택자로 사용
해당 요소를 자바스크립트로 식별하기 위해 사용
해당 요소를 URL의 프래그먼트 요소로 식별하기 위해 사용

해당 요소를 스타일하기 위한 CSS의 고유한 선택자로 사용

다음은 id 속성으로 지정된 값을 사용해서 해당 요소를 스타일하기 위한 선택자로 사용한 예제입니다.

CSS는 다양한 방법으로 HTML 요소를 선택해서 스타일을 적용할 수 있습니다.
다양한 방법 중에서 id 속성으로 지정된 값으로도 해당하는 요소를 선택할 수 있습니다. 위 예제처럼 # 문자 다음에 아이디값을 입력(#css-selector)하면 됩니다.

이렇게 하면, 아이디의 값이 css-selector인 요소만을 위한 스타일을 적용할 수 있습니다. 실제 적용된 모습을 보면 해당 요소의 배경색이 yellowgreen으로 스타일 되었습니다.

해당 요소를 자바스크립트로 식별하기 위해 사용

다음은 id 속성으로 지정된 값을 사용해서 해당 요소를 자바스크립트 구현을 위한 식별자로 사용한 예제입니다.

HTML

<p id="txt">환영합니다.</p>
<button type="button" id="btn">클릭해서 텍스트 바꾸기</button>

<script>
    const txt = document.getElementById("txt"); // id="txt" 식별
    const btn = document.getElementById("btn"); // id="btn" 식별

    btn.addEventListener("click", () => {
        txt.innerHTML = "반갑습니다.";
    });
</script>

위 코드 예제는 id="btn"에 해당하는 <button> 요소를 클릭하면 id="txt"에 해당하는 요소의 텍스트가 "환영합니다."에서 "반갑습니다."로 변경되는 자바스크립트 코드입니다.

이때, 자바스크립트에서도 id="btn"에 해당하는 <button> 요소를 식별하거나, id="txt"에 해당하는 요소를 식별할 때 둘 다 해당 요소들을 id 속성으로 지정된 값으로 식별한 것입니다.

해당 요소를 URL의 프래그먼트 요소로 식별하기 위해 사용

먼저 URL(혹은 URI)의 프래그먼트(Fragment)가 무엇인지 알아보겠습니다. URL은 도메인과 함께 일반적으로 부르는 경로 등으로 구성되어 있습니다. 여기 일반적인 URL 뒤에 #이 포함된 주소가 있습니다.

여기에서는 빨간색으로 표시된 #example에 해당하는 부분입니다. 이것을 프래그먼트 혹은 hash URL이라고 부릅니다.

URL에서 프래그먼트는 # 문자 다음의 문자가 해당하는 URL의 웹 페이지 내의 id 속성으로 지정된 값인데, 브라우저는 이 프래그먼트가 있는 URL의 웹 페이지가 로드될 때 해당하는 id 속성으로 지정된 값의 요소를 찾아서 화면의 맨 위(상단)으로 스크롤을 이동시켜 사용자가 볼 때 화면의 맨 위에서 보여지게 합니다.

이와 같이 id 속성으로 지정된 값은 해당 요소를 URL의 프래그먼트 요소로 식별하기 위해 사용하기도 합니다.

이 밖에도 id 속성으로 지정된 값은 위 예제의 목적 이외에도 다양한 곳에서 사용될 수 있습니다. 예를 들자면, 특정 프레임워크나 라이브러리 등에서도 특별한 목적을 위해 특정 요소의 고유한 식별자로 사용할 수 있습니다.

`id` 속성 값의 명명 규칙

문서(웹 페이지)에서 유일하고 고유해야 합니다.
id 속성 값은 공백 문자(띄어쓰기나 탭)가 없는 하나 이상의 문자를 포함해야 합니다.
숫자로만 구성되거나, 숫자로 시작하거나, 밑줄(_)로 시작하거나, 구두점(.)만으로 구성될 수 있습니다. 그 밖의 특별한 제한이 없습니다.

주의할 점

문서(웹 페이지)에서 유일하고 고유해야 합니다.
만약 중복되는 id 속성 값이 있으면, 해당 요소를 스타일하기 위한 CSS의 고유한 선택자로 사용하거나, 자바스크립트로 식별하기 위해 사용하거나, 해당 요소를 URL의 프래그먼트 요소로 식별하기 위해 사용할 때 등 id 속성 값이 고유식별자라는 전제로 작성된 모든 CSS, 자바스크립트, 기타 응용프로그램 등은 예상하지 못하는 에러가 발생할 수 있습니다.

HTML

<p>문단 요소입니다.</p>
<p id="css-selector">문단 요소입니다.</p>
<p id="css-selector">문단 요소입니다.</p> <!-- 중복 -->
<p>문단 요소입니다.</p>

브라우저 호환성

id 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`id`	1	12	32	1

명세서

id 속성의 명세서 사양
명세서 사양
`id`	HTML Standard #global-attributes:the-id-attribute-2

참고문헌

MDN - id

id 속성의 정의 및 사용법