[HTML/CSS] id와 class의 차이점

HTML에서 특정 태그에만 특정 기능을 주고 싶을 때 id 값이나 class명을 통해 특정 기능을 부여할 수 있다.

 

id나 class를 사용하는 방법은 다음과 같다. 

<h1 class = "class" id = "id">철수</h1>

 

사용하고 싶은 태그 안에 class = "클래스 명" id = "아이디 값"을 주는 것이다.

id나 class로 할 수 있는 것은 특정 기능을 부여할 수 있다고 위에서 하였다.

그러면 어떻게 하는가?

 

id, class 불러오는 방식

id나 class는 css를 통해 처리를 해야한다.

<style> .class{ color: red; } #id{ text-align: center; } </style>
<h1 class = "class" id = "id">철수</h1>
<h1>영희</h1>

id나 class를 style 태그로 불러올 때는 규칙이 있다.

id를 불러오고 싶다면 id값 앞에 (#)을 붙이고

class를 불러오고 싶다면 class 명 앞에 (.)을 붙여야 한다.

 

style 태그안에 있는 내용을 해석해보자면클래스 명이 'class'인 값의 색상을 red로 하고아이디 값이 'id'인 값을 가운데 정렬하라는 뜻이다.

아이디나 클래스 값을 준 철수에게만 값이 적용된 것을 볼 수 있다.

---

이렇게 똑같은 기능을 수행하는데 id나 class의 차이점은 무엇이 있을까?

 

class는 중복 사용이 가능하다.

클래스는 클래스 명을 중복으로 계속 사용해도 상관이 없다. 하지만 아이디는 값의 중복이 불가능 하다.

따라서 아이디는 페이지에서 딱 한번만 가능하다.

<style> .class{ color: red; } #id{ text-align: center; } </style>
<h1 class = "class" id = "id">철수</h1>
<h1 class = "class">영희</h1>

철수와 영희에게 위 처럼 class명을 같이 줘도 되긴 하지만 같은 id값을 줄 수는 없다.

---

정리하자면, 위의 사진처럼 

[특정 컨텐츠를 반복해서 만들어야 하는 경우에는 class]를,

[header, content, side-bar, footer같이 고유한 경우에는 id]를 사용한다.

---

참고

https://bangu4.tistory.com/26

[HTML/CSS] Class, Id 차이