정의 및 사용 방법

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

기본 예제

HTML 
<a href="#section2">2번 본문으로 이동하기</a>

<!-- 클릭 시 이 위치로 스크롤 이동 -->
<div id="section2">
  <h2>2번 본문 내용</h2>
</div>

사용 목적

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

  1. 해당 요소를 스타일링하기 위한 CSS의 고유한 선택자로 사용
  2. 해당 요소를 자바스크립트로 식별하기 위해 사용
  3. 해당 요소를 URL의 프래그먼트 요소로 식별하기 위해 사용
  4. 해당 요소를 다른 요소와 연결하기 위한 고유한 식별자로 사용

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

CSS 
#css-selector { /* id 속성 값으로 선택하기: #아이디값 선택자 */
    background-color: yellowgreen;
}
HTML 
<p>문단 요소입니다.</p>
<p id="css-selector">문단 요소입니다.</p>
<p>문단 요소입니다.</p>
<p>문단 요소입니다.</p>

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

URL의 프래그먼트(hash URL이라고도 함)

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

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

HTML 
<a href="#section2">2번 본문으로 이동하기</a>

<!-- 클릭 시 이 위치로 스크롤 이동 -->
<div id="section2">
  <h2>2번 본문 내용</h2>
</div>

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

HTML에서는 일부 속성이 다른 요소의 id 값을 참조하여 요소 간 관계를 연결합니다.
이때, id 값은 연결할 요소를 고유하게 식별하는 데 사용됩니다.

이렇게 해당 요소를 다른 요소와 연결해서 요소 간의 관계를 정의하거나 연관된 특정 기능을 구현할 수 있습니다.

다음의 예제로 살펴보겠습니다.

예제: <label>을 <input>에 연결하기

<label>은 사용자 인터페이스를 제공하는 컨트롤 요소의 레이블(label, 이름표)을 나타냅니다. 컨트롤 요소의 이름표를 제공하여 가독성과 웹 접근성을 높이는 역할을 합니다.

<label>을 컨트롤 요소와 연결할 때는 연결할 컨트롤 요소의 id 값을 for 속성의 값으로 지정합니다.
이렇게 지정하면 두 요소가 명시적으로 서로 연결되며, 브라우저와 스크린 리더 같은 보조 기술은 이러한 연결 관계를 활용하여 사용자 경험과 웹 접근성을 향상시킵니다.

HTML 
<!--
    # 매칭할 컨트롤 요소의 id 값인 "user-checking"을
    # label 태그의 for 속성의 값으로 지정했습니다.
-->
<label for="user-checking">저를 클릭하세요.</label>
<input type="checkbox" id="user-checking">

이렇게 연결하면 <label>의 텍스트("저를 클릭하세요.")를 클릭했을 때 연결된 체크박스가 포커스됩니다.
이것은 컨트롤 요소인 <input>의 id 값을 for 속성의 값으로 지정하여 두 요소를 명시적으로 연결했기 때문입니다.

브라우저에서 실제 표시된 모습 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.

id 속성 값의 명명 규칙

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

주의할 점

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

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

브라우저 호환성

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

명세서

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

참고문헌

같이 보기