id와 class의 차이

wool·2022년 3월 27일

CSS

목록 보기
2/5

Intro.

개발 공부를 시작 한지 이제 한 달 차, 강의는 어느 정도 들은 것 같은데 막상 시작하려니 엄두가 나지 않았지만 이번 주 월요일부터 감이 오지 않더라도, 이빨이 없으면 잇몸 으로라도 씹어보자! 라는 느낌으로 무작정 간단한 페이지라도 만들기를 시작 해 보았다.

id, class무엇을 써야 하는걸까..?


사실 개발자도구를 열어보면 제일 눈에 많이 보이는게 id였다. 그래서 나도 시작 할 때 무엇을 만들던지 id이름을 지정 할 때 id부터 작성하고 보았다. 그래도 오류는 없었기 때문에 딱히 문제라고 생각하지 않았다.

하지만 분명히 두 언어의 차이점이 있을 것인데 id를 막 남발했다가 그 많은 것들을 수정해야 하는 상황이 온다면 어쩌나 라는 생각에 갑자기 아찔해 지기 시작해서 어떤 차이가 있고 언제 어떻게 구분해서 써야 하는지 질문을 스스로 던지게 되었고 그렇게 id와 class의 차이를 정리하기로 했다.

id와 class


id 선택자와 class선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다.

두 선택자의 차이점은 문서 안의 복수 요소에 대하여 스타일을 적용 할수 있는가 없는가의 차이이다.

id는 유일한 요소에게만 적용 할 수 있고

class는 복수의 요소에 스타일을 적용 할 수 있다.

id 선택자

id 선택자는 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용합니다. 선택자에 샤프(#)와 id명(임의의 이름)을 붙여 식별합니다.

class 선택자

class 선택자는 문서 안 복수의 요소에 스타일을 적용하는 경우에 사용합니다. 요소명에 피리어드(.)와 class명(임의의 이름)을 붙여 구별합니다.

출처: https://ohknow.tistory.com/35

정리


  • 하나의 id는 한 문서에서 한 번만 사용 가능
  • 하나의 class는 한 문서에서 여러 번 사용 가능
  • id 속성 > class속성 id 선택자가 class보다 상위기 때문에 id의 속성은 해당 요소의 부여된 class의 속성에 관계 없이 독자적으로 작동함!
profile
허위 정보 발견 시 댓글로 남겨주시면 감사하겠습니다.

0개의 댓글