HTML id 속성은 HTML 요소의 고유 ID를 지정하는 데 사용된다.
HTML 문서에 동일한 ID를 가진 요소를 둘 이상 가질 수 없다.
id 속성 사용하기
id 속성은 HTML 요소의 고유 ID를 지정한다. id 특성의 값은 HTML 문서 내에서 고유해야 한다.
id 속성은 스타일시트의 특정 스타일 선언을 가리키는 데 사용된다. 또한 JavaScript에서 특정 ID로 요소에 액세스하고 조작하는 데 사용된다.
id의 구문은 해시 문자(#)를 쓴 다음 id 이름을 쓴다. 그런 다음 물결 괄호 {} 내에서 CSS 속성을 정의한다.
다음 예제에는 ID 이름 "myHeader"를 가리키는 <h1> 요소가 있다. 이 <h1> 요소는 헤드 섹션의 #myHeader 스타일 정의에 따라 스타일이 지정된다:
| <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h2>id 속성</h2> <p>CSS를 사용하여 ID가 "myHeader"인 요소 스타일 지정:</p> <h1 id="myHeader">나의 헤더</h1> </body> </html> |
참고: ID 이름은 대소문자를 구분합니다!
참고: ID 이름은 하나 이상의 문자를 포함해야 하며 숫자로 시작할 수 없으며 공백(공백, 탭 등)을 포함할 수 없다.
class와 id의 차이점
클래스 이름은 여러 HTML 요소에서 사용할 수 있지만 ID 이름은 페이지 내의 하나의 HTML 요소에서만 사용해야 한다:
| <!DOCTYPE html> <html> <head> <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> </head> <body> <h2>class와 id의 차이점</h2> <p>클래스 이름은 여러 HTML 요소에서 사용할 수 있지만 ID 이름은 페이지 내의 하나의 HTML 요소에서만 사용해야 합니다:</p> <!-- An element with a unique id --> <h1 id="myHeader">나의 도시</h1> <!-- Multiple elements with same class --> <h2 class="city">런던</h2> <p>런던은 영국의 수도이다..</p> <h2 class="city">파리</h2> <p>파리는 프랑스의 수도이다.</p> <h2 class="city">서울</h2> <p>서울은 대한민국의 수도이다.</p> </body> </html> |
id와 링크의 HTML 북마크
HTML 북마크는 독서자가 웹 페이지의 특정 부분으로 이동할 수 있도록 하는 데 사용된다.
페이지가 매우 길 경우 책갈피가 유용할 수 있다.
북마크를 사용하려면 먼저 북마크를 작성한 후 연결을 추가해야 한다.
그런 다음 링크를 클릭하면 페이지가 책갈피가 있는 위치로 스크롤된다.
북마크 활용하기
첫째, ID 속성을 사용하여 북마크를 만든다:
| <h2 id="C4">Chapter 4</h2> |
그런 다음 동일한 페이지 내에서 책갈피에 대한 링크("4장으로 이동")를 추가한다:
| <a href="#C4">Jump to Chapter 4</a> |
| <!DOCTYPE html> <html> <body> <p><a href="#C4">4장으로 이동</a></p> <p><a href="#C10">10장으로 이동</a></p> <h2>1장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>2장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>3장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2 id="C4">4장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>5장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>6장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>7장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>8장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>9장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2 id="C10">10장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>11장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>12장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>13장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>14장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>15장</h2> <p>이 장에서는 발라블라에 대해 설명합니다/p> <h2>16장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>17장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>18장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>19장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> <h2>20장</h2> <p>이 장에서는 발라블라에 대해 설명합니다</p> </body> </html> |
'4장으로 이동'을 클릭하면 4장으로 이동한다.
'10장으로 이동'을 클릭하면 10장으로 이동한다.
Javascript에서 id 속성 사용하기
id 속성은 JavaScript에서 해당 특정 요소에 대한 일부 작업을 수행하는 데 사용할 수도 있다.
JavaScript는 getElementById() 메서드를 사용하여 특정 ID를 가진 요소에 액세스할 수 있다:
| <!DOCTYPE html> <html> <body> <h2>Javascript에서 id속성 사용하기</h2> <p>JavaScript는 getElementById() 메서드를 사용하여 지정된 ID의 요소에 액세스할 수 있습니다:</p> <h1 id="myHeader">Hello World!</h1> <button onclick="displayResult()">Change text</button> <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> </body> </html> |
마무리
- id 특성은 HTML 요소의 고유 ID를 지정하는 데 사용된다
- id 특성의 값은 HTML 문서 내에서 고유해야 한다
- id 특성은 CSS 및 JavaScript에서 특정 요소를 스타일/선택하는 데 사용된다
- id 특성의 값은 대소문자를 구분한다
- id 속성은 HTML 북마크를 만드는 데도 사용된다
- JavaScript는 getElementById() 메서드를 사용하여 특정 ID를 가진 요소에 액세스할 수 있다
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 파일 경로(File Path) (0) | 2023.05.21 |
|---|---|
| HTML Iframe (0) | 2023.05.20 |
| HTML 클래스 속성(Class Attributes) (0) | 2023.05.18 |
| HTML 블록 및 인라인 요소 (0) | 2023.05.17 |
| HTML 기타 리스트 (0) | 2023.05.16 |
댓글