HTML의 id 속성은 요소에 고유한 식별자를 부여하는 역할을 합니다. 이를 통해 CSS나 JavaScript에서 특정 요소 하나만 정확하게 선택하여 스타일을 적용하거나 동작을 제어할 수 있습니다.
id 속성의 핵심 규칙
id 속성을 사용할 때는 다음 규칙을 반드시 기억해야 합니다.
- 하나의 HTML 페이지 내에서 동일한 id를 가진 요소는 단 하나만 존재해야 합니다. 두 개 이상의 요소가 같은 id를 사용하면 안 됩니다.
- CSS에서 id 선택자는 해시 기호(
#)로 시작합니다. 예를 들어#outer는 id가 'outer'인 요소를 가리킵니다. - JavaScript에서는
document.getElementById()메서드를 통해 해당 요소에 접근합니다.
참고: HTML5부터는 숫자로 시작하는 id 값도 허용됩니다. 다만 하위 버전 브라우저와의 호환성을 고려한다면 영문자로 시작하는 id를 사용하는 것이 좋습니다.
id 속성 활용 예제
아래 예제는 마우스 이벤트(clientX)와 함께 id 속성을 활용한 간단한 미니 게임입니다. 각 영역과 요소를 구분하기 위해 여러 개의 id가 사용되었습니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-clientX</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.clientX;
var y = event.clientY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
} else {
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
1) 'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역에 있는 경우 − 게임이 진행 중임을 알 수 있습니다.
2) 'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역 끝에 도달한 경우 − 성공 메시지가 표시됩니다.
3) 'Start' 버튼을 클릭한 후 커서가 빨간색(위험) 영역으로 이동한 경우 − 실패 메시지가 출력되며 게임이 종료됩니다.
