FRONTEND/HTML

HTML 튜토리얼 - HTML id Attribute

우진하다 2023. 8. 4. 16:25

HTML id Attribute

HTML의 id 속성은 웹 페이지 내의 특정 요소를 고유하게 식별하는 데 사용됩니다.
id 속성의 값은 전체 페이지에서 유일해야 합니다.
이것은 CSS와 JavaScript에서 해당 요소에 접근하는 데 매우 중요하게 사용됩니다.

Using The id Attribute

고유성
페이지 내에서 id의 값은 고유해야 합니다. 즉, 같은 id를 가진 두 개 이상의 요소가 있어서는 안 됩니다.

CSS에서 사용하기
id를 사용하여 특정 HTML 요소에 스타일을 적용할 수 있습니다. CSS에서 id는 해시(#) 기호를 이용해 참조됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>CSS를 사용하여 ID가 "myHeader"인 요소의 스타일을 지정합니다</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

The id Attribute

CSS를 사용하여 ID가 "myHeader"인 요소의 스타일을 지정합니다

My Header

JavaScrpipt에서 사용하기
JavaScript에서 id를 사용하여 특정 요소를 선택하고 조작할 수 있습니다.
document.getElementById() 함수를 사용하여 해당 요소를 선택할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader1">헤더 섹션입니다.</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader1").innerHTML = "바뀐 텍스트입니다.";
}
</script>

</body>
</html>

Using The id Attribute in JavaScript

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

헤더 섹션입니다.

HTML에서 사용하기

<!DOCTYPE html>
<html>
<body>

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

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C7">Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>


</body>
</html>

Jump to Chapter 4

Jump to Chapter 7