CSS 탐구생활 : class선택자 vs id선택자

 

1. class와 id를 쓰는 목적

class와 id는 특정한 요소에 스타일을 입히기 위해 사용되거나 자바스크립트 파일에서 class값이나 id값으로 html태그를 불러오기 위해 사용된다.

 

 

2. class와 id선택자 사용방법

class의 경우 html문서에서 class = "클래스 이름"을 작성해준 다음 css파일에서 클래스이름 앞에 .을 붙여준다.

id의 경우 html문서에서 id = "아이디 이름"을 작성해준 다음 css파일에서 아이디 이름 앞에 #을 붙여준다.

 

<예시>

.클래스 이름{

font-size : 14px;

font-weight : 600;

}

 

#아이디 이름{

background-color : blue;

}

 

 

3. class와 id의 차이점

(1) class는 class 이름을 공백을 통해 여러개 지정해 줄 수 있지만 id는 하나만 지정해줄 수 있다.

<div class="box wrap"></div>
<div id="result"></div>

-- 위의 예시에서 class는 'box'와 'wrap'이라는 클래스 이름을 2개 지정, id는 'result'라는 아이디 이름을 하나만 지정

 

(2) class는 여러 태그에 같은 클래스 이름을 지정해 줄 수 있지만 id는 그 값이 유일해야 한다.

<div class="list-wrap">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>

<div class="list-wrap">
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

 (3) class선택자 보다 id선택자의 우선순위가 높다.

<div class="box" id="wrap">1</div>

.box {
    color: green;
  }
  
  #wrap{
    color: blue;
  }

-- 위의 예시에서 id선택자의 우선순위가 더 높기 때문에 폰트 색깔은 blue로 지정된다. 

 

 

<< 결론 >>

반복적으로 사용되는 스타일을 적용해야 할 경우 class선택자를 사용하고, 내부에 있는 세부적인 스타일 적용할 때는 id선택자를 사용해주자