19. HTML Id

 

 

---

ID 속성 사용

---

id 속성은 HTML 요소의 고유 ID를 지정합니다.

(HTML 문서 내에서 ID가 중복되면 안 됩니다.)

CSS 및 JavaScript는 id 값을 이용하여 특정 id값을 가진 요소에 대해 특정 작업을 수행할 수 있습니다.

CSS에서 특정 ID를 가진 요소를 선택하려면 해시(#) 문자를 쓰고 그 뒤에 요소의 ID를 입력하세요.

See the Pen 01.Using The id Attribute by heunho (@heunho) on CodePen.

TIP : id 속성은 모든 HTML 요소에서 사용할 수 있습니다. 참고 : id값은 대소문자를 구분합니다. 참고 : id값은 하나 이상의 문자를 포함해야 하며 공백을 포함해서는 안됩니다.

 

 

 

 

Class와 ID의 차이점

---

HTML 페이지는 하나의 특정 요소에 하나의 고유 ID만 가질 수 있습니다. 하지만 클래스는 여러 요소에서 사용할 수 있습니다.

See the Pen 02.Difference Between Class and ID by heunho (@heunho) on CodePen.

 

 

 

 

ID와 링크를 활용한 북마크 기능

---

HTML 북마크는 사용자가 웹 페이지의 특정 부분으로 이동할 수 있도록 도와주는 데 사용합니다.

웹페이지가 너무 길다면 북마크를 사용해보세요 유용합니다.

 

북마크를 만들려면 먼저 이동할 요소에 ID를 지정해서 북마크를 만들고, 링크를 추가해야 합니다.

추가한 링크를 클릭하면 지정한 ID 요소 즉, 북마크 위치로 스크롤됩니다.

 

예제

먼저 id 속성으로 북마크를 만듭니다.

<h2 id="C4">챕터 4</h2>

같은 페이지에서 북마크에 대한 링크를 추가하세요.

<a href="#C4">챕터 4로 이동</a>

전체 예제

See the Pen 03.Bookmarks with ID and Links by heunho (@heunho) on CodePen.

 

 

 

 

JavaScript에서 id 속성 사용

---

JavaScript는 getElementById() 메소드를 사용하여 지정된 ID를 가진 요소를 액세스 할 수 있습니다.

JavaScript로 텍스트를 조작하려면 id 속성을 사용하세요.

 

See the Pen 04.Using The id Attribute in JavaScript by heunho (@heunho) on CodePen.

 

 

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML id