본 문서는 https://www.w3schools.com/html/default.asp를 공부하기 좋게 요약해 놓은 것입니다.
HTML id속성은 HTML 요소의 고유 ID를 지정하는 데 사용됩니다.
HTML 문서에는 동일한 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>
ID 및 링크가 있는 HTML 책갈피
HTML 책갈피는 독자가 웹페이지의 특정 부분으로 이동할 수 있도록 하는 데 사용됩니다.
책갈피를 사용하려면 먼저 책갈피를 만든 다음 링크를 추가해야 합니다.
그런 다음 링크를 클릭하면 페이지가 책갈피가 있는 위치로 스크롤됩니다.
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
JavaScript에서 id 속성 사용하기
id속성은 특정 요소에 대한 몇 가지 작업을 수행하는 자바 스크립트로도 사용할 수 있습니다.
JavaScript는 다음 getElementById()메소드를 사용하여 특정 ID를 가진 요소에 액세스할 수 있습니다 .
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
'Develop > HTML' 카테고리의 다른 글
| HTML 기초8 JavaScript (0) | 2021.08.15 |
|---|---|
| HTML 기초7 Iframes (0) | 2021.08.15 |
| HTML 기초5 Classes (0) | 2021.08.11 |
| HTML 기초4 Block and Inline Elements (0) | 2021.08.11 |
| HTML 기초3 List (0) | 2021.08.11 |
