CSS selector (중 기본선택자)

HTML로 작성한 뼈대를 <style>에서 꾸미기 위해서는 대상을 특정해야 한다. 

selector는 이 때 사용하는 것으로 이름을 붙여주기도 하고, 요소를 특정하기도 한다. 

 

종류는 굉장히 많다. (기본선택자, 그룹선택자, 결합자, 의사클래스/의사요소)

모두 이해하지는 못해서 기본적인 내용만 공부했다. 

 

1. *: 모든 HTML 요소를 선택

CSS
* {}

 

2. 유형(type)선택자: 지정된 태그명을 가진 요소를 모두 선택 

CSS
p {}
HTML
<p></p>

 

3. .class: class 어트리뷰트 값을 지정해 일치하는 요소를 선택, 중복 가능

CSS
.practice {}
HTML
<p class="practice"></p>

 

4. #id: id 어트리뷰트 값을 지정해 일치하는 요소를 선택, 중복 불가능 

CSS
#practice {}
HTML
<p id="practice"></p>

 

5. 특성(attribute)선택자: 지정된 특성을 가진 요소를 모두 선택

CSS
a[href] {}
HTML
<a href="~">~</a>

 

 

<참고>

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS3 Selector | PoiemaWeb

 

 

첫 TIL 이다. 앞으로 꾸준히 열심히 쓸 수 있기를 ..!!