HTML class와 id 비교

 

 

1. class와 id란?

 

HTML요소에 '이름'을 붙여주는 방법이다. 

HTML에 각 요소(element)를 만들어주고 이 요소들을 CSS로 꾸미게 되는데

CSS로 꾸밀 때는 정확히 무엇을 꾸미는지 콕! 찝어주어야한다.

그래서 각 요소에 class 또는 id를 할당해서 이름을 붙여준다. 

​

 

​

2. class와 id의 근본적이 차이

​

class

 

여러 요소는 같은 이름의 클래스를 가질 수 있다.

한 요소는 여러 클래스를 가질 수 있다.

 

그래서 같은 이름의 클래스를 가진 요소들에게 한꺼번에 CSS적용이 가능하며,

한 요소에 여러가지 CSS를 적용할 수도 있다. 

​

id

여러 요소는 같은 이름의 id를 가질 수 없다.

한 요소는 한 가지 id만 가질 수 있다.

​

class와 다른점은 한 요소가 한 가지 id만을 가질 수 있다는 것이다. 

1인1메뉴처럼 1요소1id이다. 

따라서 한 요소에 맞는 CSS를 써주고 해당 CSS를 적용해야한다. 

 

 

 

정리하자면

한 요소만 스타일링 하고 싶다면? id사용하기

여러 요소를 스타일링 하고 싶다면? class사용하기

​

 

3. 우선 순위

 

CSS를 적용할 때는 우선순위가 있다. 

CSS를 적용할 수 있는 것은  전체 모든 요소, tag, 선택자(class, id)로 나누어볼 수 있는데 

자세한 내용은 아래 글에서 확인하고, 

↓

HTML 부모-자식 구조 , CSS 선택자

 

 

일단 tag, class, id의 우선순위를 보자면 

 

id > class > tag 순서대로 우선순위가 결정된다!

 

class 끼리는 더 나중에 선언 된 것이 우선 순위로 적용된다!

 

우선순위를 모르면 CSS를 썼는데 왜 적용이 계속 안되지????

라고 생각하며 이리저리 헤매며 시간을 버릴 수 있다. 

 

 

정리하자면!

class와 id는 상황에 맞게 적절하게 사용해야하고 우선순위를 꼭 염두해서 사용해야한다!!