id 속성과 class 속성의 차이점

id 속성과 class 속성의 차이점

HTML에서 쓰이는 id 와 class 속성은 비슷해보이지만 차이점이 존재한다.
이번에 이 차이점에 대해서 한번 알아보자

id 속성

id 전역특성은 문서 전체에서 유일한 고유식별자를 정의한다.
고유식별자의 목적은 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함이다.

즉, 전체 페이지에서 단 하나의 요소에만 지정이 가능하다.

그렇다면 id는 어떻게 사용해야할까?

// HTML
<p id="header">이것은 HTML페이지의 헤더입니다.</p>
<p>이것은 HTML페이지의 바디 내용입니다.</p>

//CSS
#header {
    background : black
    border : 1px solid white;
}

위 코드와 같이 하나의 요소는 하나의 id만 가질 수 있다.
CSS에서 사용할때에는 #을 앞에 붙이고 id명을 적어주면 해당 id명이 있는 부분에 CSS를 줄 수 있다.

id속성을 사용할때에 주의사항이 있는데, 웹 작성자가 id속성을 통해 사람이 읽을 수 있는 정보를 구체적으로 나타내서는 안된다.
(ex. 로고, 상단메뉴, 하단정보 등과 같은 스타일을 정의할 때 id를 사용한다.)

class 속성

class 전역특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않는다.
클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM메서드의 document.getElementsByClassName()과 같은 메서드를 통해 요소에 접근할 수 있는 방법이다.

// HTML
<p id="header">이것은 HTML페이지의 헤더입니다.</p>
<p class="infomation">제 이름은 김감자입니다.</p>
<p class="infomation">나이는 99살입니다.</p>
<p class="infomation">프론트엔드 공부를 하고 있습니다.</p>
<p>봐주셔서 감사합니다.</p>

// CSS
.infomation {
    font-style: italic;
    font-weight: bold;
    background: red;
    border: 1px solid black;
}

class 속성을 사용할때에는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다.
그리고 id속성과는 다르게 여러번 반복해서 사용할 수 있습니다.
CSS에서 사용할때에는 .을 앞에 붙이고 class명을 적어주면 해당 class명을 가진 부분에 CSS를 줄 수 있습니다.

CSS에서 차이점

CSS에서 id속성을 사용할때에는 #id명으로 사용해주면 되고, class속성을 사용할때에는 .class명으로 사용해주면 된다.
id속성은 유일하고 특별하기때문에 CSS에서 쓰일때 class보다 우선적으로 적용이 된다.

정리

id

• #으로 선택
• 한 문서에 단 하나의 요소에만 적용 가능하다.
• 특정 요소에 이름을 붙이는데 사용된다.

class

• .으로 선택
• 동일한 class명을 갖는 요소를 중복해서 만들 수 있다.
• 요소를 설명하는데에 사용된다.

참고자료 : id 전역속성 MDN, class 전역속성 MDN