HTML id 속성
- 이전 페이지 HTML 클래스
- 다음 페이지 HTML 내장 프레임
HTML id 속성은 HTML 요소에 유일한 id를 지정하는 데 사용됩니다.
한 HTML 문서에서는 같은 id를 가진 여러 요소가 존재할 수 없습니다.
id 속성 사용
id 속성은 HTML 요소의 유일한 ID를 지정합니다. id 속성 값은 HTML 문서에서 유일해야 합니다.
id 속성은 스타일 시트에 특정 스타일 선언을 지정하는 데 사용됩니다. JavaScript도 특정 ID를 가진 요소에 접근하고操作할 수 있습니다.
id의 문법은: #을 써서 id 이름을 따르고, 그 다음 {} 안에 CSS 속성을 정의합니다.
아래의 예제에서 우리는 <h1> 요소가 id 이름 "myHeader"을 가리키기 때문에 이 <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>
주의사항:id 이름은 대소문자에 민감합니다!
주의사항:id는 최소한 하나의 문자를 포함해야 하며, 공백 문자(공간, 탭 등)를 포함할 수 없습니다.
클래스와 ID의 차이점
동일한 클래스 이름은 여러 HTML 요소에서 사용할 수 있지만, id 이름은 페이지에서 하나의 HTML 요소에서만 사용할 수 있습니다:
예제
<style>
/* id가 "myHeader"인 요소의 스타일을 설정 */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* 클래스 이름이 "city"인 모든 요소의 스타일을 설정 */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- 유일한 id를 가진 요소 -->
<h1 id="myHeader">My Cities</h1>
<!-- 동일한 클래스 이름을 가진 여러 요소 -->
<h2 class="city">런던</h2>
<p>런던은 영국의 수도입니다.</p>
<h2 class="city">파리</h2>
<p>파리는 프랑스의 수도입니다.</p>
<h2 class="city">도쿄</h2>
<p>도쿄는 일본의 수도입니다.</p>
ヒント:우리의 CSS 강의 CSS 지식을 더 배우기 위해
HTML 책갈피는 ID와 링크를 통해 구현됩니다.
HTML 책갈피는 독자가 웹페이지의 특정 부분으로 이동할 수 있도록 합니다.
페이지가 매우 길다면, 책갈피가 매우 유용할 수 있습니다.
책갈피를 사용하려면 먼저 생성해야 하며, 그 후에 링크를 추가해야 합니다.
링크를 클릭하면 페이지가 책갈피 위치로 스크롤됩니다.
예제
먼저, id 속성을 사용하여 책签을 생성하면
<h2 id="C4">第四章</h2>
그런 다음, 같은 페이지에서 이 책签에 링크를 추가하세요（"第四章로 이동"）：
예제
<a href="#C4">第四章로 이동</a>
또는, 다른 페이지에서 이 책签을 가리키는 링크를 추가하세요（"第四章로 이동"）：
<a href="html_demo.html#C4">第四章로 이동</a>
JavaScript에서 id 속성 사용
JavaScript는 id 속성을 사용하여 특정 요소에 대한 특정 작업을 수행할 수 있습니다
JavaScript는 사용할 수 있습니다 getElementById() 특정 id를 가진 요소에 대한 메서드 접근:
예제
id 속성을 사용하여 JavaScript로 텍스트를 처리합니다:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
ヒント:다음에 HTML 자바스크립트 이 장에서나, 우리의 JavaScript 강의 JavaScript를 배우는 중에
이 장 요약
id속성은 HTML 요소에 독립적인 id를 지정하기 위해 사용됩니다id속성의 값은 HTML 문서에서 독립적이어야 합니다- CSS와 JavaScript는 사용할 수 있습니다
id속성을 사용하여 요소를 선택하거나 특정 요소의 스타일을 설정합니다 id속성의 값은 대소문자를 구분합니다id속성은 HTML 책签을 생성하기 위해도 사용할 수 있습니다- JavaScript는 사용할 수 있습니다
getElementById()특정 id를 가진 요소에 대한 메서드 접근
- 이전 페이지 HTML 클래스
- 다음 페이지 HTML 내장 프레임
