[지식루프의 웹개발공부] CSS에서 id와 class의 차이

CSS에서 id와 class의 차이

---

1. 개념

• id : 특정 단 하나의 요소에 적용 (고유, 유일).
• class : 여러 요소에 반복적으로 사용 가능 (재사용성 높음).

---

2. 문법 및 사용 예시

(1) HTML 코드 예시

<div id="header">헤더 영역</div>

<p class="text-large">큰 텍스트</p>

<p class="text-large">다른 큰 텍스트</p>

---

(2) CSS 코드 예시

 

#header {

        background-color: lightblue;

        font-size: 24px;

}

 

.text-large {

        font-size: 32px;

        font-weight: 700;

}

---

3. 결과

• id="header":
  • 한 번만 사용 가능한 스타일입니다.
  • <div id="header"> 부분만 background-color와 font-size가 적용됩니다.
• class="text-large":
  • 여러 요소에 사용 가능하며,
  • <p> 태그 2개 모두에 font-size와 font-weight가 적용됩니다.

---

4. 차이점 비교

구분	id	class
용도	특정 요소 1개에 적용	여러 요소에 반복적으로 적용
선택자	#id명	.class명
재사용성	재사용 불가	재사용 가능
우선순위	높음 (class보다 강력)	낮음
DOM 조작	document.getElementById()	document.getElementsByClassName()

---

5. 우선순위 (CSS 적용 우선순위)

• id가 class보다 우선순위가 높습니다.
• 같은 스타일이 id와 class에 동시에 적용된다면, id가 우선 적용됩니다.

예시:

html

<p id="special" class="text-large">특별한 텍스트</p>

css

#special { color: red; } .text-large { color: blue; }

🔹 결과: 텍스트는 **빨간색(red)**으로 표시됩니다.

---

6. 언제 id와 class를 사용할까?

• id: 페이지에서 특정 유일한 요소(예: 헤더, 네비게이션 바)
• class: 여러 번 반복되는 요소(예: 버튼, 텍스트 스타일)

---

7. 정리

• id는 고유한 특정 요소에 사용하고,
• class는 여러 요소에 반복 적용할 수 있습니다.
• 재사용성과 유지보수 측면에서 class를 주로 사용하고,
• 특정한 경우에만 id를 사용하여 스타일을 오버라이드하거나 고유한 요소를 구분합니다.