[CSS3] ID 셀렉터와 클래스 셀렉터를 구분하여 사용하는 이유는?

HTML5부터 시작하여 CSS3 등의 개념을 다시 읽어보는 와중에 "ID 셀렉터와 클래스 셀렉터" 파트가 나왔습니다.

 

왜 이들을 구분하여 사용할까요 ?

id와 클래스가 사용되는 이유를 다시 떠올리면 알 수 있을 것 같은데요, 그 이유에 대해 정확히 알아봅시다.

 

✏️ 1. 원하는 요소를 정확하게 선택하기 위해서 구분하여 사용합니다.

ID 셀렉터(#)

id는 문서 내에 고유한 식별자여야 하므로, 특정 요소 하나만들 정확하게 선택하는 데에 사용됩니다.

하나의 웹 페이지에 동일한 id를 가진 요소는 오직 하나만 존재합니다.

따라서 ID 셀렉터를 통해 특정 요소를 정확하게 선택할 수 있습니다.

 

클래스 셀렉터(.)

클래스는 하나 이상의 요소에 동일한 스타일을 적용하기 위해 사용합니다.

여러 요소를 선택하고 스타일을 일괄 적용할 수 있습니다.

 

👊🏻 2. 우선순위를 관리하기 위해 사용합니다.

CSS에서 셀렉터를 통해 스타일 규칙이 적용될 때, ID 셀렉터(#)는 클래스 셀렉터(.)보다 높은 우선순위를 갖습니다.

ID 셀렉터는 더 구체적인 선택자이기 때문에, 클래스 셀렉터보다 우선적으로 스타일이 적용된다고 생각하면 됩니다.

 

🌟 결론

요약하자면, ID 셀렉터와 클래스 셀렉터를 구분해서 사용하는 이유는

스타일의 범위, 중복 방지, 우선순위 관리, 코드 가독성 및 유지 보수성을 향상시키기 위해서입니다.

각각의 셀렉터는 특정 용도와 목적을 가지고 있으며, 이를 통해 웹 페이지의 스타일링을 더 효과적으로 제어할 수 있습니다.