HTML ID 속성
HTML id속성은 HTML 요소의 고유 ID를 지정하는 데 사용됩니다.
HTML 문서에는 동일한 ID를 가진 요소가 두 개 이상 있을 수 없습니다.
id 속성 사용하기
id속성은 HTML 요소의 고유 ID를 지정합니다 . 속성 값은 id
HTML 문서 내에서 고유해야 합니다.
속성 은 id스타일 시트의 특정 스타일 선언을 가리키는 데 사용됩니다. 또한 JavaScript에서 특정 ID를 가진 요소에 액세스하고 조작하는 데 사용됩니다.
id의 구문은 다음과 같습니다. 해시 문자(#)와 id 이름을 차례로 작성합니다. 그런 다음 중괄호 {} 안에 CSS 속성을 정의합니다.
다음 예 <h1>에는 ID 이름 "myHeader"를 가리키는 요소가 있습니다. 이 요소는
헤드 섹션의 스타일 정의에 <h1>
따라 스타일이 지정됩니다 .#myHeader
예시
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
참고: ID 이름은 대소문자를 구분합니다!
참고: ID 이름은 하나 이상의 문자를 포함해야 하고 숫자로 시작할 수 없으며 공백(공백, 탭 등)을 포함할 수 없습니다.
클래스와 ID의 차이점
클래스 이름은 여러 HTML 요소에서 사용할 수 있지만 ID 이름은 페이지 내에서 하나의 HTML 요소에서만 사용해야 합니다.
예시
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
팁: CSS 튜토리얼 에서 CSS에 대해 더 많이 배울 수 있습니다 .
ID 및 링크가 있는 HTML 책갈피
HTML 책갈피는 독자가 웹 페이지의 특정 부분으로 이동할 수 있도록 하는 데 사용됩니다.
페이지가 매우 긴 경우 책갈피가 유용할 수 있습니다.
책갈피를 사용하려면 먼저 책갈피를 만든 다음 링크를 추가해야 합니다.
그런 다음 링크를 클릭하면 페이지가 책갈피가 있는 위치로 스크롤됩니다.
예시
id먼저 다음 속성 을 사용하여 책갈피를 만듭니다 .
<h2 id="C4">Chapter 4</h2>
그런 다음 동일한 페이지 내에서 책갈피("4장으로 이동")에 대한 링크를 추가합니다.
예시
<a href="#C4">Jump to Chapter 4</a>
또는 다른 페이지에서 책갈피("4장으로 이동")에 대한 링크를 추가합니다.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
JavaScript에서 id 속성 사용하기
속성 은 idJavaScript에서 특정 요소에 대한 일부 작업을 수행하는 데 사용할 수도 있습니다.
getElementById()JavaScript는 다음 메소드 를 사용하여 특정 ID를 가진 요소에 액세스할 수 있습니다 .
예시
속성을 사용하여 idJavaScript로 텍스트를 조작 하십시오.
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
팁: HTML JavaScript 장 또는 JavaScript Tutorial 에서 JavaScript를 공부하십시오 .
단원 요약
id속성은 HTML 요소의 고유 ID를 지정하는 데 사용됩니다 .- 속성 값은
idHTML 문서 내에서 고유해야 합니다. id속성은 CSS 및 JavaScript에서 특정 요소의 스타일 지정/선택에 사용됩니다 .- 속성 값
id은 대소문자를 구분합니다 . id속성은 HTML 책갈피를 만드는 데에도 사용됩니다 .getElementById()JavaScript는 메소드 를 사용하여 특정 ID를 가진 요소에 액세스할 수 있습니다.