jiraynor’s 하루 2시간 프로그래밍 - HTML 19. 아이디 (Id) 영상 보러가기
HTML id 속성
id 속성 사용
id 속성은 HTML 요소의 고유 ID를 지정합니다. id 속성 값은 HTML 문서 내에서 고유해야 합니다.
id 속성은 스타일 시트의 특정 스타일 선언을 가리키는 데 사용됩니다. 또한 JavaScript에서 특정 ID로 요소에 액세스하여 조작할 때도 사용됩니다.
id 구문은 다음과 같습니다.해시 문자(#)에 이어서 ID 이름을 씁니다. 그런 다음 중괄호 {} 내에서 CSS 속성을 정의하십시오.
다음 예제에서는 ID 이름 “myHeader”를 가리키는 <h1> 요소가 있습니다. 이 <h1> 요소는 헤드 섹션의 #myHeader 스타일 정의에 따라 스타일링됩니다.
예제 1
<!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>
Note: id 이름은 대소문자를 구분합니다!
Note: id 이름에는 하나 이상의 문자가 포함되어야 하며 숫자로 시작할 수 없으며 공백(스페이스, 탭 등)을 포함할 수 없습니다.
클래스와 id의 차이
클래스 이름은 여러 HTML 요소에서 사용할 수 있지만 ID 이름은 페이지 내의 한 HTML 요소에서만 사용해야 합니다.
예제 2
<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">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>
ID와 링크가 있는 HTML 북마크
HTML 북마크는 독자가 웹 페이지의 특정 부분으로 이동할 수 있도록 하기 위해 사용됩니다.
북마크는 페이지가 매우 긴 경우 유용합니다.
북마크를 사용하려면 먼저 북마크를 작성한 후 북마크에 연결을 추가해야 합니다.
그런 다음 링크를 클릭하면 페이지가 북마크가 있는 위치로 스크롤됩니다.
예제 3
먼저 다음 id 속성을 가진 북마크를 만듭니다.
<h2 id="C4">Chapter 4</h2>
그런 다음 같은 페이지 내에서 북마크(“4장으로 이동”)에 링크를 추가합니다.
<a href="#C4">4장으로 이동</a>
또는 다른 페이지에서 북마크(“4장으로 이동”)에 링크를 추가합니다.
<a href="html_demo.html#C4">4장으로 이동</a>
JavaScript에서의 id 속성 사용
id 속성은 JavaScript에서 특정 요소에 대한 몇 가지 작업을 수행하기 위해 사용할 수도 있습니다.
JavaScript는 getElementById() 메서드를 사용하여 특정 ID를 가진 요소에 액세스할 수 있습니다.
예제 4 - id 속성을 사용하여 JavaScript를 사용하여 텍스트를 조작
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Summary
id속성은 HTML 요소의 고유 ID를 지정하기 위해 사용됩니다.id속성 값은 HTML 문서 내에서 고유해야 합니다.id속성은 CSS 및 JavaScript에서 특정 요소의 스타일/선택에 사용됩니다.id속성 값은 대소문자를 구분합니다.id속성은 HTML 북마크 작성에도 사용됩니다.- JavaScript는
getElementById()메서드를 사용하여 특정 ID를 가진 요소에 액세스할 수 있습니다.