Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS ID와 클래스 선택자, 핵심 차이점 완벽 정리

CSS에서 class와 ID의 가장 큰 차이는 적용 범위입니다. 클래스는 여러 요소에 동일한 스타일을 적용할 수 있는 반면, ID는 페이지 내 단 하나의 고유한 요소에만 스타일을 지정합니다. 또한 ID는 특수한 URL을 통해 해당 요소로 바로 이동하는 링크를 만들 수 있고, 자바스크립트(JavaScript)에서도 활용된다는 점에서 특별한 역할을 합니다.

CSS에서 셀렉터(selector)는 웹 페이지의 특정 요소 또는 여러 요소를 대상으로 지정하는 도구입니다. 요소를 한 번 지정하면 그 요소에 하나 이상의 스타일 규칙을 적용할 수 있습니다.

CSS에는 다양한 셀렉터가 존재하지만, 그중 가장 널리 사용되는 두 가지가 바로 class와 ID입니다. 두 셀렉터 모두 스타일을 적용할 대상 요소를 지정한다는 공통점이 있습니다.

CSS 셀렉터란 무엇인가?

웹 페이지를 디자인하다 보면 특정 요소에만 스타일을 적용하고 싶은 경우가 생깁니다. 예를 들어 모든 <p> 태그의 글자 색을 초록색으로 바꾸거나, 제목(header)의 글꼴 크기를 조정하고 싶을 수 있습니다.

이때 셀렉터를 사용하면 원하는 요소를 정확히 찾아내어 스타일을 적용할 수 있습니다. CSS에는 전체 선택자(universal selector), 하위 선택자(descendant selector), 자식 선택자(child selector), 그룹 선택자(grouping selector) 등 다양한 셀렉터가 마련되어 있습니다.

그중 class와 id 셀렉터는 HTML 요소에 부여된 클래스명과 아이디 값을 기준으로 스타일을 적용합니다. 두 셀렉터는 초보 개발자들이 특히 헷갈려 하는 부분이므로, 각각의 동작 방식을 자세히 살펴보겠습니다.

ID 셀렉터: 고유한 단 하나의 요소

ID 셀렉터는 웹 페이지에서 단 하나의 요소에만 적용되는 스타일 규칙을 정의합니다. 하나의 문서에서 같은 ID 속성값을 가진 요소는 오직 하나뿐이어야 하므로, ID 셀렉터로 여러 요소에 동시에 스타일을 적용하는 것은 불가능합니다.

ID 셀렉터는 해시 기호(#)로 정의하며, 그 뒤에 스타일을 적용할 ID 값을 붙입니다. 실제 사용 예시는 다음과 같습니다.

<p id="betaBanner">This is a banner.</p>

<style>
#betaBanner {
  color: white;
  background-color: orange;
}
</style>

위 코드는 HTML 문서에서 ID가 betaBanner인 <p> 요소에 스타일을 적용합니다. 해당 요소의 배경색은 주황색(orange)으로, 텍스트 색상은 흰색으로 지정됩니다.

클래스 셀렉터: 여러 요소에 재사용 가능

클래스 셀렉터는 특정 값과 일치하는 class 속성을 가진 모든 요소에 스타일 규칙을 적용할 수 있습니다.

앞서 설명했듯이 ID는 한 페이지에서 한 번만 사용할 수 있지만, 클래스는 여러 요소에서 반복적으로 사용할 수 있습니다. 따라서 클래스 셀렉터로 스타일을 정의하면, 같은 클래스를 공유하는 모든 요소에 해당 스타일이 일괄 적용됩니다.

클래스 셀렉터는 마침표(.)로 정의하며, 그 뒤에 적용할 클래스명을 작성합니다. 예시를 살펴보겠습니다.

<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>

<style>
.orangeBackground {
  background-color: orange;
}
</style>

위 스타일은 <p> 태그와 <div> 태그 모두의 배경색을 주황색으로 변경합니다. 두 태그가 동일한 클래스명인 orangeBackground를 공유하기 때문입니다.

또한 하나의 요소에 여러 개의 클래스를 동시에 지정할 수도 있습니다. 예를 들어 위 <div> 태그에 large라는 추가 클래스를 적용하고 싶다면 다음과 같이 작성합니다.

<div class="orangeBackground large">This is a banner.</div>

이 경우 orangeBackground와 large 두 클래스에 정의된 모든 스타일 규칙이 해당 요소에 적용됩니다. ID로는 이런 방식을 재현할 수 없습니다. 하나의 요소에는 하나의 ID만 부여할 수 있기 때문입니다.

ID만 가지는 고유한 브라우저 기능: 앵커 링크

클래스와 ID의 차이는 스타일 적용 범위에서 끝나지 않습니다. 브라우저 관점에서 클래스는 특별한 기능 없이 단순히 여러 요소에 스타일을 일괄 적용하는 용도로 사용됩니다. 반면 ID는 브라우저가 페이지의 특정 위치로 이동할 때 활용됩니다.

요소에 ID를 부여하면 특수한 URL을 통해 해당 요소로 직접 연결되는 링크를 만들 수 있습니다. ID가 페이지 내에서 유일하기 때문에 가능한 동작입니다.

예를 들어 사용자가 링크를 클릭하면 자동으로 특정 섹션 제목까지 스크롤되도록 하고 싶다고 가정해 보겠습니다. 먼저 다음과 같이 ID를 지정합니다.

<h3 id="section3">Section Three</h3>

이제 다음과 같은 형식의 URL로 사용자에게 링크를 전달할 수 있습니다.

https://domain.com/index.html#section3

사용자가 이 URL에 접속하면(domain.com은 실제 사이트 주소) ID가 section3인 제목 위치로 자동 스크롤됩니다. 물론 이런 기능은 클래스에서는 지원되지 않습니다.

JavaScript에서 ID 활용하기

자바스크립트를 다뤄본 경험이 있다면 ID가 매우 자주 사용된다는 것을 알고 계실 겁니다. 대표적인 메서드인 getElementById()는 페이지에서 특정 요소 하나를 정확히 선택할 때 사용되며, '동일한 ID를 가진 요소는 단 하나뿐'이라는 전제에 기반합니다.

반면 클래스는 여러 요소에 동시에 적용될 수 있으므로, 자바스크립트에서 특정 단일 요소를 조작해야 할 때는 적합하지 않습니다.

ID와 클래스는 함께 사용할 수 있다

HTML에는 하나의 요소에 ID와 클래스를 동시에 부여하는 것을 금지하는 규칙이 없습니다. 예를 들어 backgroundOrange 클래스의 스타일을 <div> 태그에 적용하면서, 동시에 해당 요소만의 고유한 스타일도 추가하고 싶다면 다음과 같이 작성할 수 있습니다.

<div class="backgroundOrange" id="customDiv"></div>

이 <div> 태그는 backgroundOrange 클래스의 스타일을 받으면서, 동시에 ID 셀렉터로 정의된 customDiv의 스타일 규칙도 함께 적용받습니다.

정리: 언제 ID를, 언제 클래스를 사용해야 할까?

CSS 작업 시 ID와 클래스 중 무엇을 쓰라고 강제하는 엄격한 규칙은 없습니다. 다만 모범 사례(best practice)로는 다음과 같이 구분하는 것이 좋습니다.

  • ID: 페이지 내 단 하나의 요소에만 스타일을 적용하고 싶을 때, 또는 앵커 링크·JavaScript 접근이 필요할 때 사용합니다.
  • 클래스: 동일한 스타일을 여러 요소에 재사용하고 싶을 때 사용합니다.

이번 글에서는 CSS ID 셀렉터와 클래스 셀렉터의 기본 개념을 예제와 함께 살펴보고, 두 셀렉터의 차이점을 비교했습니다. 이제 여러분도 전문 개발자처럼 상황에 맞게 ID와 클래스 셀렉터를 활용할 준비가 되었습니다!