CSS 기본 선택자 선언방식

1. 전체 선택자

 요소 내부의 모든 요소를 선택한다.

*

/* css */
* {
 color: red;
}

<!-- html -->
<div>
 <ul>
  <li>사과</li>
  <li>파인애플</li>
  <li>귤</li> 
 </ul>
 <div>오이</div>
 <p>당근</p>
 <span>토메이토</spa>
</div>

이렇게 css에 작성을 하게 되면 모든 태그에 대해 글자색을 빨간색으로 바꾸겠다! 라는 말이된다.

 

2. 태그 선택자(Type Selector)

 해당하는 태그 이름의 요소를 선택

E

/* css */
li { /* 앞 뒤에 기호가 없으면 태그 선택자 */
 color: red;
}

<!-- html -->
<div>
 <ul>
  <li>사과</li> 
  <li>딸기</li>
  <li>오렌지</li>
 </ul>
</div>

태그 전체를 찾아서 적용을 시키기 때문에 원하는 거 하나를 집어내기가 쉽지 않다.

그래서 클래스 선택자와 아이디 선택자를 사용을 하면 하나만 집어내서 적용할 수가 있다.

 

3. 클래스 선택자(Class Selector)

 HTML class 속성의 값이 E인 요소를 찾아 선택한다

.E

/* css */
.orange{
 color:red;
}

<!-- html -->
<div>
 <ul>
  <li>사과</li>
  <li>딸기</li>
  <li class="orange">오렌지</li>
 </ul>
 <span class="orange">오렌지</span>
</div>

클래스 속성이 orange인 태그들을 찾아서 폰트를 적용을 해준다.

 

4. 아이디 선택자(ID Selector)

HTML id 속성의 값이 E인 요소를 선택

#E

/* css */
#orange{
 color:red;
}

<!-- html -->
<div>
 <ul>
  <li>사과</li>
  <li>딸기</li>
  <li id="orange" class="orange">오렌지</li>
 </ul>
 <span class="orange">오렌지</span>
</div>

클래스 값이 orange인 것이 아니라 id 값이 orange인 것에만 적용이 된다.