HTML에서 특정 요소에 고유한 ID를 부여하려면 id 속성을 사용합니다. ID는 문서 내에서 단 하나의 요소에만 적용되어야 하며, CSS 스타일링이나 JavaScript로 해당 요소를 조작할 때 유용하게 활용됩니다.
id 속성의 주요 규칙
- ID 값은 문서 전체에서 중복될 수 없습니다.
- 공백을 포함해서는 안 되며, 의미 있는 이름으로 작성하는 것이 좋습니다.
- JavaScript의
getElementById()메서드나 CSS의#id선택자와 함께 사용됩니다.
예제 코드
아래 예제는 id 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 JavaScript가 id가 myid인 요소를 찾아 텍스트 내용을 변경합니다.
<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"> 태그는 고유 ID를 가진 문단 요소입니다. 버튼을 클릭하면 display() 함수가 실행되고, document.getElementById("myid")를 통해 해당 요소에 접근하여 innerHTML 속성으로 새로운 텍스트를 삽입합니다. 이처럼 id 속성은 DOM 조작의 핵심 역할을 합니다.