html _ 클래스(class)와 아이디(id)의 차이

 

class와 id. 둘 다 불러올 때 쓰는 친구들 같은데

 

왜 어떨 때는 class를 사용하고, 어떨 땐 id를 사용하는 걸까?

 

그 차이점을 살펴보자!

 

클래스(class)

 

클래스를 불러올 때는 앞에 마침표(.)를 찍어준다.

 

.mypic > h1 {
    font-size: 30px;
}

 

클래스는 중복 사용 가능

 

동일한 클래스명을 페이지의 여러 곳에 사용 가능!

 

한 요소에 여러개의 클래스명이 적용 가능

 

즉, 여러가지 스타일링을 한꺼번에 적용하거나,

 

한 페이지에서 반복적으로 사용되는 스타일을 정의할 수 있다.

 

아이디(id)

 

아이디(id)를 불러올 때는 앞에 샵(#)을 찍어준다.

 

CSS에서 사용하는 경우는 다음과 같다.

 

#mybutton {
    color: deeppink;
}

 

또한, 아래는 부트스트랩에서 가져온 라벨인데, 이와 같이,

 

HTML의 <input> 태그에서는 <label> 태그와 연결할 때에도 사용할 수 있다.

 

<lable for>와 <input id> 값을 일치시키면, 체크박스의 클릭범위를 증가시킬 수 있다고 하는데

 

이건 아직 이해가 잘 되지 않는 부분!

 

<div class="mb-3">
    <label for="formGroupExampleInput" class="form-label">조 이름 :</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="조 이름을 입력하세요">
</div>

 

또한, 제이쿼리(jQuery)에서 사용하는 경우,

 

$('#id') 👉 선택자 태그 입력시, 홑따옴표(') 또는 쌍따옴표("") 모두 입력 가능

 

id라는 아이디명의 아이디 요소를 선택하여 메소드를 준다.

 

$('#bucket-list').empty()

 

아이디는 중복 사용 불가

 

한 페이지에서 한번만 사용!

 

한 요소에 하나의 아이디만 적용 가능

 

우선순위

 

id > class > tag

 

 반복적으로 사용되는 스타일에 class를 사용하여 정의하고,

그 내부에 세부 스타일을 정의할 때 id를 사용하면 효과적이다.