id와 class 선택자

아이디(id) 선택자

id는 한 페이지 안에서 단 하나의 요소에만 붙일 수 있는 이름표입니다. CSS에서는 #아이디이름으로 선택합니다.

<h1 id="main-title">환영합니다</h1>

#main-title {
  color: navy;
}

같은 id를 여러 요소에 중복해서 쓰면 안 됩니다. id는 "이 페이지에 딱 하나뿐인 요소"를 콕 집을 때 쓰는 도구라고 생각하면 됩니다.

클래스(class) 선택자

여러 요소에 같은 스타일을 적용하고 싶다면 class를 씁니다. HTML에서 class="이름"을 여러 태그에 똑같이 붙이고, CSS에서는 마침표(.클래스이름)로 선택합니다.

<p class="greeting">안녕하세요!</p>
<p class="greeting">반가워요!</p>
<p>좋은 하루 보내세요.</p>

.greeting {
  color: blue;
  font-weight: bold;
}

greeting 클래스가 붙은 두 문단에만 파란색 굵은 글씨가 적용되고, 클래스가 없는 마지막 문단은 그대로 남습니다.

id vs class, 언제 쓸까

상황	선택자
페이지에 하나뿐인 요소 (헤더, 특정 배너 등)	id
여러 곳에 반복해서 쓰는 스타일 (버튼, 카드 등)	class

실무에서는 재사용이 잦은 class를 훨씬 자주 씁니다. 처음 CSS를 익힐 땐 class 선택자부터 손에 익혀보는 걸 추천합니다.

참고: 개인 Notion 학습 노트