CSS 클래스 선택자(selector) 기본 개념

CSS 선택자 종류

아래 코드를 보고 어느 선택자인지 설명할 수 있다면 이 포스트는 읽지 않아도 됩니다. 이번 포스트는 CSS 셀렉터! selector 선택자와 관련된 기본 개념을 다룹니다. 

h1 { color: red;}
* { color: blue;}
[disabled]{color:red;}
.my-class{color:blue;}
#my-id{color:red;}

CSS를 따로 공부하지 않고 클론 코딩을 들으면 정말 헷갈립니다. 

"use id selector, write const myBtn = document.getElementById"

'잠시만 셀렉터가 뭐지?' 

"use class selector, write const myClass = document.querySelector"

'아까는 id였는데, class는 또 뭐지?'

하는 생각이 드신다면, 이 포스트를 보고 selector 종류를 외워주셔야 합니다. 

CSS selector 기본 개념

---

요소형 선택자 (elements selector)

elements 요소형 선택자의 다른 이름은 tag 태그 선택자입니다. 같은 요소(elements)에 대해 같은 스타일을 설정해 줍니다.

태그 이름을 그대로 써서 사용할 수 있습니다. 

<h1> Header 1 </h1>

h1 {
    color:red;
}

---

전체 선택자 (universal selector)

모든 요소에 특정 스타일을 지정하고 싶을 때 전체 선택자(universal selector)를 사용합니다. 사용 방법은 *를 쓰면 됩니다. 전체 선택자는 웬만하면 사용하지 않는 게 좋습니다. 

* { 
    color:red;
}

---

속성 선택자 (attributes selector)

속성 선택자는 이름 그대로 속성(attribute)으로 HTML 요소(element)를 선택합니다. 같은 속성을 가진 모든 요소에 동일한 스타일을 적용해 주는 선택자입니다. 아래 코드는 disabled 속성을 가진 버튼에 color:red를 적용하는 예제입니다.

<button disabled>Click me</button>

[disabled]{
    color: red;
}

---

클래스 선택자 (classes selector)

클래스 선택자를 사용하면, class로 스타일을 정의하고, 동일한 클래스를 가진 모든 요소(element)에 같은 스타일을 적용할 수 있습니다.  마침표.  앞에 붙이고, 클래스 이름을 적으면 사용할 수 있습니다. html 태그에 class를 넣어주면 적용됩니다.

<div class ="my-class">Click here</div>

.my-class {
    color: red;
}

---

ID 선택자 (IDs selector)

ID 선택자는 ID로 요소(element)를 선택할 수 있게 해 줍니다. ID는 페이지에 단 하나만 존재할 수 있기 때문에, 하나의 요소에만 적용됩니다. ID 이름 앞에 샵(#)을 붙여 사용합니다. 

<div id="my-id">Click me</div>

#my-id { 
    color:red;
}

---

CSS 선택자 요약

h1 { color: red;}
* { color: blue;}
[disabled]{color:red;}
.my-class{color:blue;}
#my-id{color:red;}

요소형 선택자: 태그 선택자, 그냥 씀

전체 선택자: 별표(*) 사용, 쓸 일 거의 없음

속성 선택자: [] 사용, 같은 속성을 가진 요소(element)에 적용

클래스 선택자: . 마침표 사용, 같은 클래스를 가진 요소에 적용

id 선택자: # 샵 사용, 아이디는 페이지에 단 하나만 존재. 하나의 요소에만 적용