id & class

5372 단어 CSSCSS

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보다 높습니다.


참고

좋은 웹페이지 즐겨찾기