[HTML] 아이디(ID)와 클래스(Class) 비교

아이디(ID)와 클래스(Class) 비교

HTML에서 아이디(ID)와 클래스(Class)는 요소를 식별하고 스타일을 적용하기 위해 사용되는 선택자입니다. 두 선택자는 비슷한 기능을 하지만, 사용 목적과 방법에 있어 중요한 차이점이 있습니다.

아이디(ID)

• 정의: 아이디는 HTML 요소에 부여하는 유일한 식별자입니다.
• 용도: 특정 요소를 유일하게 식별하고, 그 요소에 스타일을 적용하거나 JavaScript에서 참조할 때 사용합니다.
• 문법: 아이디는 문서 내에서 고유해야 하며, 한 요소에 하나의 아이디만 부여할 수 있습니다.
• 예시:

    <div id="header">...</div>

• CSS에서의 사용:

    #header {
        background-color: blue;
    }

클래스(Class)

• 정의: 클래스는 하나 이상의 HTML 요소에 공통적으로 적용할 수 있는 식별자입니다.
• 용도: 여러 요소에 동일한 스타일을 적용하거나, JavaScript에서 특정 그룹의 요소를 참조할 때 사용합니다.
• 문법: 하나의 요소에 여러 클래스를 부여할 수 있으며, 같은 클래스를 여러 요소에 적용할 수 있습니다.
• 예시:

    <div class="container">...</div>
    <div class="container">...</div>

• CSS에서의 사용:

    .container {
        width: 100%;
        margin: 0 auto;
    }

주요 차이점

1. 유일성: 아이디는 문서 내에서 유일해야 하며, 한 요소에 하나만 적용됩니다. 반면, 클래스는 여러 요소에 적용될 수 있으며, 한 요소에 여러 클래스를 부여할 수 있습니다.
2. 목적: 아이디는 주로 문서 내에서 단일 요소를 식별하는 데 사용되며, 클래스는 스타일이나 동작을 공유하는 여러 요소에 적용됩니다.
3. CSS 우선순위: 같은 스타일 규칙이 적용될 때, 아이디 선택자가 클래스 선택자보다 우선순위가 높습니다.

결론

아이디와 클래스는 HTML과 CSS에서 중요한 역할을 하며, 각각의 특성에 맞게 적절히 사용하는 것이 웹 페이지의 효율적인 구조와 스타일링에 중요합니다.