HTML 글로벌 속성 id, class, style, title, data-* 정리하기

HTML 태그에는 태그마다 고유한 속성이 있습니다.

예를 들어 a 태그는 href 속성을 사용하고, img 태그는 src와 alt 속성을 사용합니다.

그런데 특정 태그에만 쓰는 속성이 아니라, 거의 모든 HTML 태그에서 공통으로 사용할 수 있는 속성도 있습니다.

이런 속성을 글로벌 속성이라고 합니다.

이번 글에서는 자주 사용하는 HTML 글로벌 속성인 id, class, style, title, data-*를 정리합니다.

글로벌 속성이란?

글로벌 속성은 대부분의 HTML 태그에서 공통으로 사용할 수 있는 속성입니다.

쉽게 말하면, 태그마다 붙일 수 있는 공통 이름표 같은 개념입니다.

<p id="intro" class="text" title="소개 문장입니다">
  안녕하세요.
</p>

위 코드에서 id, class, title은 p 태그에서 사용할 수 있습니다.

그리고 이런 속성들은 div, span, button, section 같은 다른 태그에서도 사용할 수 있습니다.

id 속성

id는 HTML 요소에 고유한 이름을 붙일 때 사용합니다.

한 문서 안에서 같은 id는 보통 하나만 사용해야 합니다.

<h2 id="profile">프로필</h2>

위 코드는 h2 태그에 profile이라는 고유한 이름을 붙인 것입니다.

id는 CSS에서 특정 요소를 선택하거나, 자바스크립트에서 특정 요소를 찾을 때 자주 사용됩니다.

#profile {
  color: blue;
}

CSS에서 #profile은 id="profile"인 요소를 선택한다는 뜻입니다.

id를 사용할 때 주의할 점

id는 한 페이지 안에서 중복해서 사용하지 않는 것이 좋습니다.

<!-- 좋지 않은 예시 -->
<h2 id="title">제목 1</h2>
<h2 id="title">제목 2</h2>

사람으로 비유하면 주민등록번호처럼 고유해야 하는 값입니다.

class 속성

class는 여러 요소를 같은 그룹으로 묶을 때 사용합니다.

<p class="notice">첫 번째 안내 문장입니다.</p>
<p class="notice">두 번째 안내 문장입니다.</p>

위 코드에서 두 개의 p 태그는 모두 notice라는 class를 가지고 있습니다.

CSS에서는 같은 class를 가진 요소에 같은 스타일을 적용할 수 있습니다.

.notice {
  color: red;
  font-weight: bold;
}

CSS에서 .notice는 class="notice"인 요소를 선택한다는 뜻입니다.

id와 class 차이

쉽게 말하면 id는 한 명만 가지는 이름표이고, class는 같은 팀 유니폼에 가깝습니다.

style 속성

style은 HTML 태그에 직접 CSS를 작성할 때 사용합니다.

<p style="color: blue; font-size: 20px;">
  파란색 문장입니다.
</p>

이 방식은 빠르게 테스트할 때는 편합니다.

하지만 실제 웹페이지를 만들 때는 너무 많이 사용하지 않는 것이 좋습니다.

HTML 안에 스타일 코드가 섞이면 나중에 수정하기 어려워지기 때문입니다.

style 속성을 많이 쓰면 생기는 문제

<p style="color: blue;">문장 1</p>
<p style="color: blue;">문장 2</p>
<p style="color: blue;">문장 3</p>

나중에 파란색을 초록색으로 바꾸려면 모든 태그를 하나씩 수정해야 합니다.

이럴 때는 class를 사용하는 편이 더 좋습니다.

<p class="blue-text">문장 1</p>
<p class="blue-text">문장 2</p>
<p class="blue-text">문장 3</p>

.blue-text {
  color: blue;
}

보통 style 속성보다 CSS 파일이나 class를 더 많이 사용합니다.

title 속성

title은 요소에 보조 설명을 붙일 때 사용합니다.

마우스를 요소 위에 올리면 설명이 나타나는 경우가 있습니다.

<button title="클릭하면 저장됩니다">
  저장
</button>

위 코드에서 버튼 위에 마우스를 올리면 클릭하면 저장됩니다라는 설명이 보일 수 있습니다.

다만 title 속성에 중요한 정보를 너무 의존하는 것은 좋지 않습니다.

모바일 환경에서는 마우스 오버가 없기 때문에 사용자가 설명을 보지 못할 수 있습니다.

data-* 속성

data-* 속성은 HTML 요소에 직접 데이터를 저장할 때 사용합니다.

여기서 * 부분에는 원하는 이름을 넣을 수 있습니다.

<button data-user-id="15">
  사용자 보기
</button>

위 코드는 버튼에 user-id라는 데이터를 저장한 것입니다.

자바스크립트에서 이 값을 꺼내 사용할 수 있습니다.

const button = document.querySelector("button");

console.log(button.dataset.userId);

data-user-id는 자바스크립트에서 dataset.userId로 접근할 수 있습니다.

HTML에서는 user-id처럼 하이픈을 쓰지만, 자바스크립트에서는 userId처럼 카멜 케이스로 바뀝니다.

data-* 속성은 언제 사용할까?

예를 들어 상품 목록이 있다고 가정합니다.

<button data-product-id="101">
  장바구니 담기
</button>

버튼을 클릭했을 때 어떤 상품을 장바구니에 담아야 하는지 알아야 합니다.

이럴 때 data-product-id에 상품 번호를 넣어두면 자바스크립트에서 쉽게 사용할 수 있습니다.

즉, data-*는 화면에는 직접 보이지 않지만 코드가 참고해야 하는 정보를 담을 때 사용합니다.

자주 쓰는 글로벌 속성 정리

간단한 예시

<article id="post-1" class="post-card" data-category="html" title="HTML 기초 글">
  <h2>HTML 글로벌 속성 정리</h2>
  <p>모든 태그에서 공통으로 사용할 수 있는 속성을 정리합니다.</p>
</article>

위 코드에서 각 속성의 역할은 다음과 같습니다.

정리

HTML 글로벌 속성은 대부분의 태그에서 공통으로 사용할 수 있는 속성입니다.

처음에는 id와 class만 제대로 구분해도 충분합니다.

id는 하나의 요소를 고유하게 찾을 때 사용하고, class는 여러 요소를 같은 그룹으로 묶을 때 사용합니다.

style은 직접 스타일을 넣을 수 있지만, 남용하지 않는 것이 좋습니다.

title은 보조 설명을 넣을 때 사용하고, data-*는 자바스크립트에서 사용할 데이터를 HTML에 저장할 때 유용합니다.

HTML을 처음 배울 때 글로벌 속성을 이해해두면 CSS와 자바스크립트를 배울 때 훨씬 자연스럽게 연결됩니다.