[attribute] HTML - id 속성 ★★★★★ - 요소 고유식별자 지정 (= id속성 = 아이디속성) ※ CSS 아이디선택자 명명규칙

1. id 예제 - JS로 텍스트 제어
2. id 정의
3. id 구문
4. id 예제 - 웹페이지 내 특정 위치로 이동
5. id 예제 - CSS로 스타일 제어
6. id 예제 - (가능/불가능)한 아이디
7. id 예제 - 1글자 숫자 아이디는 CSS는 작동 X

id 예제 - JS로 텍스트 제어

 

<h1 id="hz">홈짱닷컴</h1>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").innerHTML = "Homzzang.com";

}

</script>

 

결과보기

id 정의

 

요소에 대한 고유 식별자 지정.

 

---

 

1. 주로 아래 3가지 용도로 사용됨.

• JS로 요소 제어.
• 페이지 내 특정 위치로 이동.
• 요소에 대한 CSS 스타일 지정.

 

2.

모든 브라우저 지원.

 

id 구문

 

<element id="id">

 

---

[속성값]

 

id

요소에 대한 고유ID 지정. (※ HTML5에선, 아래 2가지 제약만 존재.)

• 최소 1글자 이상
• 공백 포함 금지

 

PS.

(JS로 요소 제어 / 특정 위치로 이동)위해선 위 조건만 잘 지키면 됨.

그러나, CSS까지 고려 시, CSS id 선택자 명명 규칙 제한 고려 필요.

• 숫자로 시작 금지
• 언더코어( _ ) / 하이픈( - )" 제외한 특수문자 사용 금지

 

id 예제 - 웹페이지 내 특정 위치로 이동

 

<style>

body {min-height:1000px;}

a {position:absolute; top:980px;

</style>

<h2 id="hz">홈짱닷컴 Homzzang.com</h2>

<p>홈페이지 제작관리 강의</p>

<p>....</p>

<a href="#hz">맨위로 이동</a>

 

결과보기

id 예제 - CSS로 스타일 제어

 

<style>

#hz {color: red;  text-align: center;}

</style>

<h1 id="hz">홈짱닷컴 Homzzang.com</h1>

 

결과보기

id 예제 - (가능/불가능)한 아이디

 

<style>

#1 {color:red;} /* 작동 X */

#12 {color:red;} /* 작동 X */

#h {color:blue} /* 작동 O */

#h z {color:red;} /* 작동 X */

#h-z {color:blue;} /* 작동 O */

#h_z {color:blue;} /* 작동 O */

#홈짱 {color:blue;} /* 작동 O */

</style>

 

<p id="1">홈짱닷컴 Homzzang.com</p>

<p id="12">홈짱닷컴 Homzzang.com</p>

<p id="h">홈짱닷컴 Homzzang.com</p>

<p id="h z">홈짱닷컴 Homzzang.com</p>

<p id="h-z">홈짱닷컴 Homzzang.com</p>

<p id="h_z">홈짱닷컴 Homzzang.com</p>

<p id="홈짱">홈짱닷컴 Homzzang.com</p> 

 

결과보기

id 예제 - 1글자 숫자 아이디는 CSS는 작동 X

• (JS로 요소 제어 / 특정 위치로 링크 이동) : 작동 O
• CSS 선택자 : 작동 X

 

<style>

body {height:1000px;}

div {position:absolute; top:1000px;}

#i {color:red;} /* 작동 X */

</style>

 

<a href="#1">1번으로 이동</a>

<div id="1">홈짱닷컴 Homzzang.com</div?

 

<style>

var one = document.getElementById("1");

one.style.background = "yellow";

</style>

 

결과보기