8.1 id 속성
글로벌 속성들은 모든 HTML 요소에 사용할 수 있는 속성들이야. 이 속성들은 웹 페이지 요소를 식별하고 분류하며 관리하는 데 중요한 역할을 해.
id 속성은 페이지 내에서 요소를 고유하게 식별하기 위해 사용돼. id 속성의 값은 HTML 문서 전체에서 유일해야 해. 이 속성은 CSS와 JavaScript와 연결되는 데 자주 사용돼.
문법:
<element id="unique-id">...</element>
사용 예:
CSS
#header {
background-color: #f4f4f4;
padding: 10px;
}
HTML
<div id="header">
<h1>제목</h1>
</div>
JavaScript
document.getElementById('header').style.color = 'blue';
장점:
- 고유 식별: 페이지에서 요소를 명확히 식별할 수 있어
- 스타일링: CSS 스타일 적용에 편리해
- DOM 조작: JavaScript로 요소에 쉽게 접근 가능해
8.2 class 속성
class 속성은 하나 이상의 클래스를 요소에 지정하는 데 사용돼. 이 클래스들은 CSS 스타일 적용이나 JavaScript를 통한 요소 조작에 사용할 수 있어. id와 달리 class 값은 고유할 필요가 없어.
문법:
<element class="class-1 class-2">...</element>
사용 예:
CSS
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
HTML
<p class="highlight">이 텍스트는 노란색으로 강조돼.</p>
<p class="bold">이 텍스트는 볼드체야.</p>
<p class="highlight bold">이 텍스트는 볼드체고 노란색으로 강조돼.</p>
장점:
- 다중 클래스: 하나의 요소에 여러 클래스를 지정할 수 있어
- 요소 그룹화: 요소 그룹에 스타일을 쉽게 적용 가능해
- DOM 조작: JavaScript로 요소 그룹을 통해 쉽게 작업 가능해
8.3 data-* 속성
data-* 속성은 HTML 요소에 사용자 정의 데이터를 저장할 수 있도록 해줘. 이 속성들은 data- 접두어로 시작하고 어떤 값이든 가질 수 있어. 주로 JavaScript에 유용한 정보를 저장하는 데 사용돼.
문법:
<element data-key="value">...</element>
사용 예:
HTML
<div data-user-id="12345" data-role="admin">
ID 12345인 사용자, 역할 - 관리자.
</div>
JavaScript
// 페이지에서 data-user-id 속성을 가진 첫 번째 요소를 찾음
const userElement = document.querySelector('[data-user-id]');
// data-user-id 속성의 값을 가져와서 콘솔에 출력
console.log(userElement.dataset.userId); // 출력: 12345
// data-role 속성의 값을 가져와서 콘솔에 출력
console.log(userElement.dataset.role); // 출력: admin
장점:
- 데이터 저장: 요소와 관련된 데이터를 저장하고 전달하기에 편리해
- JavaScript로 접근: dataset API를 통해 데이터를 쉽게 접근하고 변경 가능해
- 유연성: HTML 표준을 위반하지 않고 어떤 데이터든 추가할 수 있어
GO TO FULL VERSION