HTML에서 요소에 고유 ID를 부여하려면 id 속성을 사용합니다. id 속성은 문서 내에서 해당 요소를 유일하게 식별할 수 있도록 해주며, CSS 스타일 지정이나 JavaScript로 특정 요소를 조작할 때 매우 유용하게 활용됩니다.
id 속성 사용 시 주의사항
id 값은 하나의 HTML 문서 내에서 반드시 고유해야 합니다. 동일한 id를 여러 요소에 중복해서 사용하면 JavaScript의 getElementById() 메서드가 의도한 대로 작동하지 않을 수 있습니다.
예제
아래 코드를 실행하면 id 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 버튼을 클릭하면 id가 "myid"로 지정된 단락의 텍스트가 JavaScript에 의해 변경됩니다.
<html>
<body>
<h1>Tutorialspoint</h1>
<p id = "myid">We provide Tutorials!</p>
<button onclick = "display()">More...</button>
<script>
function display() {
document.getElementById("myid").innerHTML = "We provide learning videos as well";
}
</script>
</body>
</html>코드 설명
위 예제에서는 <p> 태그에 id = "myid"를 지정했습니다. 버튼을 클릭하면 display() 함수가 호출되고, 이 함수 내부의 document.getElementById("myid")가 해당 요소를 찾아 innerHTML 속성을 통해 새로운 텍스트로 교체합니다.
이처럼 id 속성은 HTML과 JavaScript를 연결하는 핵심 역할을 하며, DOM(Document Object Model) 조작의 기본이 되는 개념입니다.