HTML에서 id와 class는 1️⃣요소(element)를 식별하고 스타일링하거나 2️⃣JavaScript로 조작하기 위해 사용됩니다.
1. id
- 고유 식별자: 하나의 HTML 문서에서 특정 요소에만 사용할 수 있어요. 즉, id는 "한 번만" 사용됩니다.
- 특정 요소를 지목할 때 유용: JavaScript나 CSS에서 특정 하나의 요소에만 적용하고 싶을 때 사용합니다.
특징
- 한 문서에서 고유해야 합니다.
- CSS에서는
#기호로 선택합니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
/* id 스타일링 */
#unique-box {
color: white;
background-color: blue;
padding: 10px;
}
</style>
</head>
<body>
<div id="unique-box">나는 id로 스타일링된 박스입니다!</div>
</body>
</html>결과
나는 id로 스타일링된 박스입니다!
2. class
- 공통 스타일: 여러 요소에서 반복적으로 사용할 수 있어요. 비슷한 스타일을 공유하는 요소에 적용됩니다.
- 그룹화 용도: 여러 개의 요소에 동일한 스타일을 적용하거나 JavaScript로 함께 조작할 때 사용됩니다.
특징
- 같은 클래스 이름을 여러 요소에 재사용할 수 있습니다.
- CSS에서는
.기호로 선택합니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
/* class 스타일링 */
.shared-style {
color: black;
background-color: lightpink;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="shared-style">나는 class로 스타일링된 첫 번째 박스!</div>
<div class="shared-style">나는 class로 스타일링된 두 번째 박스!</div>
</body>
</html>차이점 요약
| 특징 | id | class |
|---|---|---|
| 고유성 | 문서 내에서 1번만 사용 가능 | 여러 요소에서 반복 사용 가능 |
| CSS 선택자 | #id-name | .class-name |
| 사용 용도 | 특정 하나의 요소에 스타일 적용 | 여러 요소에 공통 스타일 적용 |
*여기서 문서내에서 1번만 사용가능이라는 말은
< 올바른 사용 >
<div id="header">이건 헤더 영역입니다</div>
<p id="intro">이건 소개 문구입니다</p>여기서는 header와 intro라는 id가 각각 다른 요소에 붙어 있습니다.
id는 각각 하나의 요소에만 적용되므로 잘 작성된 코드입니다.
< 🚨잘못된🚨 사용 >
코드 복사
<div id="header">첫 번째 헤더</div>
<div id="header">두 번째 헤더</div>여기서는 두 개의 < div > 요소에 같은 id header가 적용되어 있습니다.
JavaScript나 CSS에서 #header를 사용하면 어떤 요소를 선택해야 할지 🚨혼란🚨이 생깁니다.
비유
- id: 주민등록번호처럼 유일한 식별자 (한 사람당 하나만 가질 수 있음).
- class: 학교 반 이름처럼 여러 사람이 공유 (같은 반 학생들이 모두 같은 이름을 가짐).
한양대 학생입니다. 서울캠입니다.