목적의 차이
- class
: 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때
- id
: 태그에 유일한 이름을 붙이고 싶을 때
반복가능성의 차이
- class
class 속성은 여러번 반복해서 사용할 수 있고, 동일한 class로 분류된 태그들을 쉽게 관리할 수 있습니다.
- id
id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다.
CSS 적용의 차이
이렇게 html에서 지정된 id와 class를 css에서 사용할 때에도 차이가 있습니다.
- class
id 속성은 앞에 # 기호를 붙이고 쓰고, 유일한 속성이므로 class보다 우선적으로 적용됩니다.
- id
class 속성은 앞에 .(마침표) 기호를 붙이고 쓰면 됩니다.
정리
class | id |
스타일의 분류에 사용 | 특정 요소에 이름을 붙이는 데 사용 |
동일한 값을 갖는 요소 많음 | 한 문서에 단 하나의 요소에만 적용 |
. 으로 선택 | # 으로 선택 |
'프론트엔드' 카테고리의 다른 글
[React] Reactstrap 기능들 (Carousel, Collapse, Fade, Form, Input Group, Jumbotron) (0) | 2023.05.03 |
---|---|
[CSS] 선택자, 주요 속성 정리(flex, grid, font-size, color, margin, padding, position) (0) | 2023.03.28 |
[HTML] HTML 태그 정리(div, span, img, input, a) (0) | 2023.03.27 |
[HTML] HTML, DOM이란? (Hypertext Markup Language, DOM) (0) | 2023.03.27 |
인터넷/웹 1.0/브라우저 란? (0) | 2023.03.27 |