[HTML, CSS] 클래스와 아이디의 차이

😃이름을 불러오는 방식

클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 <p>태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다.

 

<p id="attendance" class="name"> 김영희 </p>

<style>
#attendance {
  color: grey;
  font-size: 16px;
}
.name {
  text-align: center;
}
</style>

 

😄중복 사용 여부

클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 

<!-- name 클래스를 여러 곳에 중복으로 사용할 수 있음 -->

<p class="name">김영희</p>
<p class="name">박철수</p>

<!-- attendance 아이디는 여러곳에 사용할 수 없음,
김영희가 속한 <p> 태그에 사용했다면 박철수가 속한 <p> 태그에는 사용 불가 -->

<p id="attendance">김영희</p>
<p>박철수</p>

 

😁한 요소가 갖는 클래스 & 아이디의 갯수 제한

클래스(class)의 경우에는 한 요소에 여러개의 클래스명이 적용될 수 있다. 그러나 아이디(id)는 한 요소에 한 아이디만 적용이 가능하다. 글로만 설명을 하면 혼란스러울 듯 하여 아래에 예제를 추가하겠다. 

 

<!-- 하나의 <p> 태그에 여러 클래스 사용, 클래스를 추가할 때는 띄어쓰기로 구분 -->
<p class="school name friend">김영희</p>

<!-- 하나의 <p> 태그에 하나의 아이디만 사용 가능 -->
<p id="attendance">김영희</p>

<!-- 여러개 아이디를 사용할 수 없음, 아이디의 잘못된 사용 (아래) -->
<p id="attendance education">김영희</p>

<!-- 한 요소가 여러개의 클래스, 한개의 아이디를 동시에 가지는 것은 가능 -->
<p class="school name" id="attendance">김영희</p>

 

정리하자면, 여러가지 스타일링을 한꺼번에 적용해야 할 때는 클래스(class)를 사용하고, 한가지만 적용하고 싶다면 아이디(id)를 사용하면 된다.

 

 

 

 

 

 

ID	CLASS
id는 한페이지에 하나의 정의로 단, 하나의 태그(id="")만 사용할 수 있다.	class는 한페이지에 반복적으로 사용되는 스타일을 정의할 수 있다.
즉 로고, 상단메뉴, 하단정보 같은 스타일을 정의할 때 id를 사용한다	반복적으로 사용되는 스타일에는 class를 이용하여 정의하고, 그 내부에 세부 스타일을 정의할 때 id를 사용해주면 효과적이다.
#ID명 (선언자 : #)	.CLASS명 (선언자 :  . )
#footer { clear:both; background-color:#333333; }	.center { text-align:center; background-color:#333333; }