HTML id 속성

정의와 사용법

id 속성은 HTML 요소의 독특한 id를 정의합니다.(이 값은 HTML 문서에서 독특해야 합니다).

id 속성은 가장 자주 스타일 시트의 스타일을 지정하거나 JavaScript(HTML DOM을 통해)를 통해 특정 id를 가진 요소를操作하는 데 사용됩니다

id 속성은 링크 앵커로도 사용될 수 있습니다

또한 참조:

HTML 강의:HTML id

HTML 강의:HTML 속성

CSS 강의:CSS 문법

CSS 참조서:CSS #id 선택자

HTML DOM 참조서:HTML DOM getElementById() 메서드

HTML DOM 참조서:HTML DOM id 속성

HTML DOM 참조서:HTML DOM Style 객체

实例

예제 1

JavaScript를 통해 id 속성을 사용하여 텍스트를 변경합니다：

<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">텍스트 변경</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

직접 시험해 보세요

页面下方提供更多实例。

문법

<element id="id">

속성 값

값 설명
id

요소에 독특한 id를 지정합니다. 명명 규칙：

  • 최소한 하나의 문자를 포함해야 합니다
  • 공백 문자를 포함할 수 없습니다

更多实例

예제 2

id 속성을 사용하여 페이지 내 특정 id를 가진 요소로 링크합니다：

<html>
<body>
<h2><a id="top">특정 제목</a></h2>
<p>많은 텍스트 ....</p>
<p>많은 텍스트 ....</p>
<p>많은 텍스트 ....</p>
<a href="#top">뒤로가기</a>
</body>
</html>

직접 시험해 보세요

예제 3

CSS 스타일을 통해 id 속성을 사용하여 텍스트를 스타일링하는 예제:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com은 최고입니다!</h1>
</body>
</html>

직접 시험해 보세요

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원