HTML id 속성 완벽 정리 — 쓰는 법, class와 차이, CSS·JS·앵커링크 활용

HTML id 속성 — 유일한 이름표로 CSS·JS·앵커링크 활용

 

⚡ 한 줄 요약:
id는 HTML 요소에 붙이는 문서 안에서 딱 하나뿐인 이름표입니다.
이 이름표로 CSS는 #아이디로 꾸미고, 자바스크립트는 getElementById로 집어오고, 링크는 #아이디로 그 위치까지 점프합니다.
여러 번 반복되는 스타일엔 id 대신 class를 쓴다는 것만 구분하면 끝입니다.

 

 

📑 목차

• 🏷️ id 속성이란
• 📌 가장 중요한 규칙 — "문서에서 유일"
• 🎨 CSS에서 쓰기 (#아이디)
• 🧠 자바스크립트에서 쓰기 (getElementById)
• 🔗 앵커 링크 — 페이지 안에서 점프
• ⚖️ id vs class, 언제 뭘?
• 🔖 더 읽어보기

 

 

🏷️ id 속성이란

id는 HTML 요소에 붙이는 고유한 이름표입니다.
거의 모든 태그에 붙일 수 있습니다.

<h2 id="intro">소개</h2>
<div id="main-banner">...</div>
<button id="submit-btn">보내기</button>

이렇게 이름표를 달아두면, 나중에 CSS·자바스크립트·링크가 "그 요소 하나"를 정확히 지목할 수 있습니다.
id는 그 자체로 화면에 아무 변화를 주지 않습니다 — 지목당하기 위한 표식일 뿐입니다.

 

 

📌 가장 중요한 규칙 — "문서에서 유일"

id 값은 한 HTML 문서 안에서 중복되면 안 됩니다. 같은 id를 두 곳에 쓰면 브라우저가 헷갈리고, getElementById는 맨 처음 것 하나만 집어옵니다.

<!-- ❌ 나쁨: id 중복 -->
<div id="box">A</div>
<div id="box">B</div>   <!-- 문제 발생 -->

<!-- ✅ 좋음: 유일한 id -->
<div id="box-a">A</div>
<div id="box-b">B</div>

작명 팁: 공백 없이, 영문·숫자·하이픈(-)·언더스코어(_)로.
숫자로 시작하지 않는 게 안전합니다(main-title ○, 1title △).

 

 

🎨 CSS에서 쓰기 (#아이디)

CSS에서는 앞에 #(샵) 을 붙여 그 id 요소를 선택합니다.

<p id="notice">중요 공지</p>

<style>
  #notice { color: red; font-weight: bold; }
</style>

#notice는 "id가 notice인 요소"라는 뜻입니다.
단, 스타일이 여러 요소에 반복된다면 id 대신 class(.클래스)를 쓰는 게 원칙입니다(아래 비교 참고).

 

 

🧠 자바스크립트에서 쓰기 (getElementById)

자바스크립트가 특정 요소를 집어올 때 가장 기본이 document.getElementById() 입니다.

<p id="msg">안녕하세요</p>

<script>
  const el = document.getElementById("msg");
  el.textContent = "내용이 바뀌었습니다!";
</script>

id가 유일하기 때문에 getElementById는 정확히 그 하나를 돌려줍니다.
그래서 "이 버튼을 눌렀을 때 저 영역을 바꾼다" 같은 동작을 만들 때 id가 편합니다.

 

 

🔗 앵커 링크 — 페이지 안에서 점프

id는 페이지 내 이동(앵커) 에도 씁니다.
링크의 주소를 #아이디로 주면 그 요소 위치로 스크롤됩니다.
(이 블로그 글 맨 위 '목차'가 바로 이 원리입니다.)

<a href="#section3">3번 항목으로 이동</a>
...
<h2 id="section3">3. 세 번째 항목</h2>

• 같은 페이지 안: href="#section3"
• 다른 페이지의 특정 위치: href="/guide#section3"

 

 

⚖️ id vs class, 언제 뭘?

가장 많이 헷갈리는 부분입니다.
한 줄로 정리하면:

 

	id	class
개수	문서에 하나뿐(유일)	여러 요소에 반복 가능
CSS 표기	#아이디	.클래스
주 용도	JS로 콕 집기, 앵커 링크	공통 스타일 반복 적용

 

규칙: "이 세상에 하나뿐인 대상"(그 헤더, 그 폼)은 id, "같은 모양이 여러 개"(버튼들, 카드들)는 class.
한 요소에 둘 다 붙일 수도 있습니다(<div id="hero" class="card">).

 

 

🔖 더 읽어보기

• MDN — 전역 속성 id(한국어) : 정확한 레퍼런스
• W3Schools — HTML id Attribute : 예제 바로 실행
• 🌐 HTML이란? 왕초보를 위한 개념과 공부 사이트 : 태그·속성이 처음이라면 여기부터
• 🎬 HTML5 video 태그 완벽 사용법 : id처럼 자주 쓰는 태그 하나 더

정리하면 id는 유일한 이름표 — CSS로 꾸미고(#), JS로 집고(getElementById), 링크로 점프(#)하는 세 가지에 쓴다고 기억하면 충분합니다.