[CSS] CSS에서 클래스(class)와 ID의 차이

CSS에서 클래스(class)와 ID의 차이

✅ 핵심 요약

개념	클래스 (.class)	아이디 (#id)
사용 횟수	여러 요소에 사용 가능	한 페이지에서 단 한 번만 사용
쓰는 목적	공통 스타일을 묶어서 재사용할 때	고유한 요소 하나에 특별 스타일 줄 때
우선순위	낮음	높음 (클래스보다 스타일 우선 적용됨)
표기법	.로 시작 (.title)	#로 시작 (#main-title)

 

✏️ HTML

<h1 class="bold blue">첫 번째 제목</h1> <h2 class="bold green">두 번째 제목</h2> <p id="important-text">이건 아주 중요한 문장</p>

 

🎨 CSS

.bold {   font-weight: bold; } .blue {   color: blue; } .green {   color: green; } #important-text {   font-size: 20px;   color: red; }

 

💡 무슨 말이냐면:

• .bold, .blue, .green 같은 클래스는 재사용할 수 있어. 여러 요소에 동시에 쓸 수 있고, 서로 조합할 수도 있어!
  
  
• #important-text는 아이디라서 오직 하나의 요소만 쓰는 게 원칙이야.
  
  

---

🧠 그래서 결론은?

• 공통 스타일 만들 땐 👉 클래스 (.class) 사용
  
  
• 딱 하나만 스타일 다르게 하고 싶을 땐 👉 아이디 (#id) 사용
  
  
• 클래스는 조합 가능해서 더 유연하고 재사용성이 높아!
  
  
• 아이디는 고유한 역할을 맡은 요소 (예: 네비게이션 바, 주요 제목 등)에만 써야 함