티스토리 뷰

Tip and Error/CSS

Selector (선택자)

geonwoopaeng@gmail.com 2021. 6. 27. 22:55

선택자

 

전체 선택자(Universal Selector)

 

(요소 내부의) 모든 요소를 선택

 

* {

}

 

태그 선택자(Type Selector)

 

특정 태그(<이름> <이름/>)전체의 요소를 선택

 

<!--css-->

li {

}

<!--==========================-->

<!--html-->

<li class="fruit"> 과일 </li>  <!--********여기*********-->
<li> 물건 </li>  <!--********여기*********-->

 

클래스 선택자(Class Selector)

 

HTML class 속성의 값이 특정 태그인 요소 선택 ( .class )

(class 속성은 동일한 값으로 여러 군데 다 사용 가능)

 

<!--css-->

.fruit {

}

<!--==========================-->

<!--html-->

<li class="fruit"> 과일 </li>  <!--********여기*********-->
<li> 물건 </li>

 

아이디 선택자(ID Selector)

 

HTML id 속성의 값이 특정 태그인 요소 선택 ( #id )

(id 속성은 고유한 속성입니다.)

 

<!--css-->

#fruit {

}

<!--==========================-->

<!--html-->

<li id="fruit"> 과일 </li>  <!--********여기*********-->
<li> 물건 </li>

 

반응형

'Tip and Error > CSS' 카테고리의 다른 글

PostCss & Autoprefixer 기본 설정(w. webpack)  (0) 2022.05.13
[@media] 특정 미디어에서 css 적용  (0) 2021.07.13
우선 순위  (0) 2021.06.29
Combinator (복합 선택자)  (0) 2021.06.27
초기화 하는 이유 & 방법  (0) 2021.06.23
공지사항
최근에 올라온 글