■ 요약
▶ "id" 속성은 HTML 요소에 대한 고유 id를 지정하는 데 사용한다.
▶ "id" 속성 값은 HTML 문서안에 고유해야 한다.
▶ "id" 속성은 CSS 및 Javascript에서 특정 요소에의 스타일을 지정/선택하는 데 사용된다.
▶ "id" 속성 값은 대소문자를 구별하지 않는다.
▶ "id" 속성은 HTML 북마크를 생성하는 데 사용된다.
▶ Javascript는 "getElementById()" 메서드에 특정 id를 가진 요소에 접근할 수 있다.
▶ HTML "id" 속성은 HTML 요소에 대해 고유한 id를 지정하는 데 사용된다.
▶ HTML 요소에서 같은 하나 이상의 요소가 같은 id를 가질 수 없다
■ id 속성 사용하기
▶ "id" 속성은 HTML 요소에 대해 고유한 id 를 지정한다.
▶ "id" 속성 값은 HTML 문서 안에서 고유해야 한다.
▶ "id" 속성은 스타일 시트에서 특정 스타일 선언을 가리키는 데 사용된다.
▶ Javascript에서 특정 ID를 가진 요소에 접근하고 조작하는 데 사용된다.
▶ id의 구문 : 해시 문자(#) 다음에 id 이름은 쓴 후에 중괄호 {] 안에 CSS 속성을 정의한다.
▶ 아래에 예시는 "myHeadr" id 이름을 가리키는 <h1> 요소가 있다.
▶ <h1> 요소는 head 섹션에 정의한 #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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_css
※ id 이름은 대소문자를 구별하지 않는다.
※ id 이름은 최소한 문자 하나를 포함해야 하며, 숫자로 시작할 수 없고, 공백을 포함해서는 안된다. (스페이스, 탭 등)
■ class 와 id 차이점
▶ class 이름은 다수 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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_class
■ id와 링크를 사용한 HTML 북마크
▶ HTML 북마크는 독자가 웹 페이지의 특정 부분으로 이동할 수 있도록 도움을 주는데 사용된다.
▶ 북마크는 페이지가 길다면 유용할 수 있다.
▶ 북마크를 사용하려면 먼저 책갈피를 만든 다음 링크를 추가해야 한다.
▶ 그리고 링크를 클릭할 때 페이지는 북마크 위치에 스크롤된다.
■ 예시
▶ 먼저 "id" 속성을 가진 북마크를 생성한다.
<h2 id="C4">Chapter 4</h2>▶ 그리고 같은 페이지에 북마크의 링크를 추가한다.
<a href="#C4">Jump to Chapter 4</a>링크 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_bookmark
▶ 또는 다른 페이지에서 북마크의 링크를 추가한다.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
■ Javascript 에서 id 속성 사용하기
▶ "id" 속성은 특정 요소에 대해 일부 작업을 수행하기 위한 Javascript에서 사용할 수도 있다.
▶ JavaScript는 "getElementById()" 메서드에 특정 id를 가진 요소에 접근할 수 있다.
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_js
출처 : https://www.w3schools.com/html/html_id.asp
HTML - The id attribute
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (37) Javascript (0) | 2023.02.24 |
|---|---|
| HTML / (36) iframes (0) | 2023.02.24 |
| HTML / (34) Class 속성 (0) | 2023.02.22 |
| HTML / (33) Block 과 Inlin 요소 (0) | 2023.02.22 |
| HTML / (32) 다른 목록 (0) | 2023.02.22 |