ID 속성이란 무엇입니까?

웹 페이지 내의 고유 식별자

W3C에 따르면 HTML의 ID 속성은 다음과 같습니다.

요소의 고유 식별자

이것은 매우 강력한 속성에 대한 간단한 설명입니다. ID 속성은 웹 페이지에 대해 몇 가지 작업을 수행 할 수 있습니다.

• 스타일 시트 선택기 - 이것은 대부분의 사람들이 ID 속성을 사용하는 함수입니다. ID가 고유하기 때문에 ID 속성을 사용하여 스타일을 지정할 때 웹 페이지의 항목 하나만을 스타일링 할 수 있습니다. 스타일링 목적으로 ID를 사용할 때의 단점은 매우 높은 특이성을 가지고 있기 때문에 나중에 스타일 시트에서 어떤 이유로 스타일을 덮어 써야 할 경우 매우 어려울 수 있다는 것입니다. 이 때문에 현재 웹 관행은 일반적인 스타일링 목적으로 ID와 ID 선택기 대신 클래스 및 클래스 선택기를 사용하는쪽으로 기울어집니다.

• 링크를위한 명명 된 앵커 - 웹 브라우저를 사용하면 URL 끝에있는 ID를 가리켜 웹 문서의 정확한 위치를 타겟팅 할 수 있습니다. 단순히 페이지 URL 끝에 파운드 기호 (#)가 붙은 ID를 추가하십시오. 또한 a 요소의 href 속성에 파운드 기호 (#)와 ID 이름을 추가하여 페이지 자체에서 이러한 앵커에 연결할 수 있습니다. 예를 들어 연락처 ID가있는 부서가있는 경우 다음과 같이 해당 페이지의 ID에 연결할 수 있습니다.
  
  이것은 링크 텍스트입니다.
• 스크립트에 대한 참조 - Javascript 함수를 작성하는 경우 ID 속성을 사용하여 스크립트에서 페이지의 정확한 요소를 변경할 수 있습니다.
• 기타 처리 - ID를 사용하면 필요한 방식으로 웹 문서를 처리 할 수 ​​있습니다. 예를 들어, HTML을 데이터베이스로 추출하고 ID 속성은 필드를 식별 할 수 있습니다.

ID 속성 사용 규칙

문서의 아무 곳이나 id 속성을 사용하는 유효한 문서를 사용하려면 몇 가지 규칙을 따라야합니다.

• ID는 문자 (az 또는 AZ)로 시작해야합니다.
• 모든 후속 문자는 문자, 숫자 (0-9), 하이픈 (-), 밑줄 (_), 콜론 (:) 및 마침표 (.) 일 수 있습니다.
• 각 ID는 문서 내에서 고유해야합니다. 왜?

ID 속성 사용하기

웹 사이트의 고유 한 요소를 식별하면 스타일 시트를 사용하여 하나의 요소 만 스타일링 할 수 있습니다.

연락처

여기에 몇 가지 텍스트 콘텐츠가 있습니다.

div # contact-section {background : # 0cf;}

- 아니면 그냥 -

# contact-section {background : # 0cf;}

이 두 선택자 중 하나가 작동합니다. 첫 번째 항목 (div # contact-section)은 ID 속성이 "contact-section"인 부분을 대상으로합니다. 두 번째 연락처 (#contact-section)는 ID가 "contact-section"인 요소를 여전히 대상으로하지만, 찾고자하는 것이 부서라는 것을 알지 못합니다. 스타일링의 최종 결과는 정확히 동일합니다.

태그를 추가하지 않고 해당 특정 요소에 연결할 수도 있습니다.

연락처 정보 링크

"getElementById"JavaScript 메소드를 사용하여 스크립트의 단락을 참조하십시오.

document.getElementById ( "contact-section")

ID 속성은 HTML에서 매우 유용합니다. 비록 클래스 선택자가 가장 일반적인 스타일링 목적으로 그들을 대체했지만. ID 속성을 스타일의 훅으로 사용하고 스크립트의 링크 또는 대상 앵커로 사용하는 기능은 오늘날 웹 디자인에서 여전히 중요한 위치를 차지하고 있음을 의미합니다.

제레미 지라드 편집