id & class
id & class
html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 id 값 또는 class 명을 할당하여 처리가 가능 합니다.
id
-
id를 불러올 때 샵(#) 를 사용 합니다.
-
하나의 요소에 하나의 id만 사용 가능 합니다.
-> 중복으로 사용 불가능 -
하나의 아이디는 페이지에서 딱 한 번만 사용해야 합니다.
id 예제
<h1 id="title">제목</h1>
<h1 id="title">제목2</h1> <!--사용 불가-->
<h1 id="title title2 title3">제목</h1> <!--사용 불가-->
#title{
font-size : 20px;
}
class
- class를 불러올 때 마침표(.) 를 사용 합니다.
- 하나의 요소에 여러 개의 class 를 사용 할 수 있습니다.
-> class를 추가할 때는 띄어쓰기로 구분
- 중복 사용이 가능하며, 동일한 클래스명을 페이지의 여러 곳에 사용 할 수 있습니다.
class 예제
<h1 class="title">제목</h1>
<h2 class="title">제목</h2>
<h3 class="title color size">제목</h3>
.title{
font-size : 20px;
}
.color{
background-color : red;
}
정리
-
id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용
-
하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능. 우선순위는 id가 class보다 높습니다.
참고
- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
- https://blog.naver.com/x7788/222449322956
- https://heinafantasy.com/155
Author And Source
이 문제에 관하여(id & class), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoho_0815/id-class저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)