HTML id 속성(HTML The id Attribute)

Using The id Attribute

id 속성 사용하기

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

이 id속성은 HTML 요소의 고유 ID를 지정합니다 (값은 HTML 문서 내에서 고유해야합니다).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.

id 값은 CSS 및 JavaScript에서 지정된 id 값을 갖는 고유 요소에 대한 특정 작업을 수행하는 데 사용할 수 있습니다.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:

CSS에서 특정 id를 가진 요소를 선택하려면 요소의 id 다음에 해시 (#) 문자를 씁니다.

Example

Use CSS to style an element with the id "myHeader":

id를 "myHeader"로 사용하여 요소 스타일을 지정하려면 CSS를 사용하십시오.

<style>
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
} 
</style>
 
<h1 id="myHeader">My Header</h1>

Result:

My Header

Try it Yourself »

Tip: The id attribute can be used on any HTML element.

팁 : id 속성은 모든 HTML 요소 에서 사용할 수 있습니다 .

Note: The id value is case-sensitive.

참고 : id 값은 대 / 소문자를 구분합니다.

Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

참고 : id 값은 하나 이상의 문자를 포함 해야하며 공백 (공백, 탭 등)을 포함 해서는 안됩니다 .

---

Difference Between Class and ID

클래스와 ID의 차이점

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

HTML 요소는 단일 요소에 속한 하나의 고유 ID 만 가질 수 있지만 클래스 이름은 여러 요소에서 사용될 수 있습니다.

Example

<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>
 
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
 
<!-- Multiple similar elements -->
<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>

Try it Yourself »

Tip: You can learn much more about CSS in our CSS Tutorial.

팁 : CSS에 대한 자세한 내용은 CSS 자습서를 참조하십시오 .

---

Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Try it Yourself »

---

Using The id Attribute in JavaScript

자바 스크립트에서 id 속성 사용하기

JavaScript can access an element with a specified id by using the getElementById() method:

자바 스크립트는 다음 getElementById()메소드 를 사용하여 지정된 id를 가진 요소에 액세스 할 수 있습니다 .

Example

Use the id attribute to manipulate text with JavaScript:

JavaScript로 텍스트를 조작하려면 id 속성을 사용하십시오.

<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Try it Yourself »

Tip : Study JavaScript in the chapter HTML JavaScript, or in our JavaScript Tutorial.

팁 : HTML JavaScript 장 또는 JavaScript 자습서 에서 JavaScript를 학습하십시오 .

---

Test Yourself with Exercises!

---

출처 : W3School.com