CSS Reference

CSS id/class 차이점

id/class 차이점

html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능합니다. 클래스(class)와 아이디(id)는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고 보면 이 둘은 큰 차이점을 가지고 있습니다.

이름을 불러오는 방식

클래스(class)를 불러올 때는 앞에 마침표(.)를 찍어줍니다.
아아디(id)를 불러올 때는 앞에 샵(#)표시를 해줍니다.

<p id = "attendance" class = "name">김정식</p>
<style>
#attendance {
    color: grey;
    font-size: 16px;
}
.name {
    text-align: center;

}
</style>

중복 사용 여부

클래스(class)는 중복 사용이 가능합니다. 동일한 클래스명을 페이지 여러곳에 사용할 수 있습니다.
아아디(id)는 중복이 불가능합니다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 합니다.

<p class = "name">김정식</p>
<p class = "name">젠틀맨</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>