[CSS] Id , Class Seletor

👀 Id , Class Seletor

✔ id로 이름 붙여서 스타일링 적용

<!--ex) <navi> section의 <h4>요소에만 색 변경-->

h4 {
  color: red;
}

위에 코드는 <h4> 요소가 문서에 중복으로 존재하기 때문에 다른 section의 <h4> 요소까지 변경된다. 따라서, html 파일의 h4요소에 id를 붙인 후, css 파일에서 해당되는 id를 요소로 선택해 스타일링한다.

<!--html-->

<h4 id="navigation-title">This is the navigation section.</h4>

<!--css-->
#navigation-title {   /* # 기호를 이용하여 선택 */
  color: red;
}

✔ class로 스타일을 분류하여 적용

id는 문서내에 단 하나의 요소에만 적용할 수 있기 때문에 같은 값을 갖는 여러 요소에 적용하기 위해서는 class를 사용해야한다.

<!-- html -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

<!-- css -->
.menu-item {       /* . 을 이용하여 선택 */
  text-decoration: underline;
}

여러 개의 class를 하나의 요소에 적용하고 싶다면, class 속성 값인 문자열 안에 띄어쓰기로 구분하여 적용한다.

<li class="menu-item selected">Home</li>

🔗 셀렉터, id와 class 차이점

id	class
# 으로 선택	. 으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소가 많을 경우 적용
특정 요소에 이름을 붙이는 데 사용	스타일의 분류에 사용

Reference: 코드스테이츠