[HTML] CSS에서 아이디와 클래스

CSS에서 아이디와 클래스

CSS에서 아이디(Identifier, ID)와 클래스(Class)는 HTML 요소에 스타일을 적용하는 데 사용되는 두 가지 주요한 선택자(selector)입니다. 이들은 HTML 요소를 타기팅하고, 해당 요소에 스타일을 적용하는 방법을 제공합니다. 아이디와 클래스의 기본적인 사용법과 차이점을 설명하겠습니다.

아이디 선택자 (ID Selector)

1. 정의: 아이디 선택자는 HTML 요소에 고유한 식별자를 부여하는 데 사용됩니다. 각 아이디는 문서 내에서 유일해야 합니다.
2. 문법: CSS에서 아이디는 # 기호로 시작합니다. 예를 들어, #header는 id="header"를 가진 HTML 요소를 선택합니다.
3. 사용 예시:

   #header {
       background-color: blue;
       color: white;
   }

4. <div id="header">헤더 내용</div>
5. 특징: 아이디는 문서 내에서 하나의 요소에만 적용됩니다. 이는 매우 특정한 타기팅이 필요할 때 유용합니다.

클래스 선택자 (Class Selector)

1. 정의: 클래스 선택자는 HTML 요소의 그룹에 스타일을 적용하는 데 사용됩니다. 하나의 클래스는 여러 요소에 적용될 수 있습니다.
2. 문법: 클래스는 . 기호로 시작합니다. 예를 들어, .button은 class="button"을 가진 모든 HTML 요소를 선택합니다.
3. 사용 예시:

   .button {
       background-color: green;
       color: white;
   }

4. <button class="button">버튼 1</button> <button class="button">버튼 2</button>
5. 특징: 클래스는 한 문서 내에서 여러 요소에 재사용될 수 있습니다. 이는 일관된 스타일을 여러 요소에 적용할 때 유용합니다.

아이디와 클래스의 주요 차이점

• 유일성: 아이디는 문서 내에서 유일하며, 하나의 요소에만 적용됩니다. 반면, 클래스는 여러 요소에 재사용될 수 있습니다.
• 용도: 아이디는 보통 문서에서 한 번만 사용되는 고유한 요소에 사용됩니다(예: 헤더, 푸터). 클래스는 재사용성이 높은 스타일(예: 버튼, 카드)에 사용됩니다.
• CSS 우선순위: 아이디 선택자는 클래스 선택자보다 높은 우선순위를 가집니다.

결론

CSS에서 아이디와 클래스 선택자는 HTML 요소에 스타일을 적용하는 데 중요한 역할을 합니다. 각각의 사용법과 차이점을 이해하는 것은 웹 페이지의 효과적인 스타일링에 있어 필수적입니다.