Id & Class Selectors

Id & Class Selectors

 

ID부여 (id Selector-선택자)

하나의 고유 요소에 id부여 / #으로 선택한다. 그렇기 때문에 id를 부여하면 그것만 딱 골라서 CSS설정을 할 수 있다.
 

(IN HTML)
<p id="paragraph_1"> blahblahblah </p> 

(IN CSS)
#ID이름 으로 불러온다

#paragraph_1{ background-color: blue; }

**주의!!** 
id는 하나의 문서에서 같은 이름으로 중복사용 불가

---

Class 부여 (Class Selector-선택자)

Id selector와는 다르게 여러개의 요소에 class를 부여해서 한번에 CSS 설정을 할 수 있다.

(.html)
<ol>
<li class="fruits_in_basket"> Apple </li>
    <li class="fruits_in_basket"> Orange </li>
    <li class="fruits_in_basket"> Mango </li>
</ol>

(.css)
.fruits_in_basket { text-decoration: underline; color: red }


하나의 태그안에 여러개의 Class 선택자 도 적용 가능 
띄어쓰기로 class이름 분리

(.html)
<li class="fruits_in_basket myFavorite"> Mango </li>

(.css)
.fruits_in_basket { text-decoration: underline; color: red }
.myFavorite { font-weight: bold; }

 

id vs class
# 으로 적용	. 으로 적용
한문서에 하나의 태그에만 같은 이름으로	동일한 값을 갖는 요소가 많음
고유한 이름을 붙일때	반복되는 영역을 유형별로 분류
로고, 상단메뉴, 하단정도 등	반복적으로 사용하는 스타일에 효과적