목차
id 예제 - JS로 텍스트 제어 id 정의 id 구문 id 예제 - 웹페이지 내 특정 위치로 이동 id 예제 - CSS로 스타일 제어 id 예제 - (가능/불가능)한 아이디 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가지 용도로 사용됨.
2.
모든 브라우저 지원.
id 구문
<element id="id ">
[속성값]
id
요소에 대한 고유ID 지정. (※ HTML5에선, 아래 2가지 제약만 존재.)
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>
결과보기
최신댓글