[CSS] 기본 셀렉터 (Selector)

기본 셀렉터 (Selector)

CSS에서는 스타일을 적용할 대상을 선택하기 위해 셀렉터(selector)를 사용한다.
종류로는 전체 셀렉터, HTML 요소 셀렉터, 아이디(id) 셀렉터, 클래스(class) 셀렉터, 그룹(group) 셀렉터가 있다.

전체 셀렉터

• CSS 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택하는 셀렉터이다.

* { color: red; }

HTML 요소 셀렉터

• CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하며 선택할 수 있는 셀렉터이다.

h2 { 
	color: teal; 
    text-decoration: underline; 
}

아이디(id) 셀렉터

• CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다.
• 웹 페이지에 포함한 여러 요소 중에 특정 아이디 이름을 가지는 요소만 선택한다.
• 아이디를 설정할 때에는 중복으로 사용이 불가능하다.
  • 여러 개 사용도 불가능

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
...
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

클래스(class) 셀렉터

• CSS를 적용할 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
• 이러한 같은 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택한다.

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

그룹(group) 셀렉터

• 위에서 언급한 여러 셀렉터를 같이 사용하고자 할 때 사용한다.
• 여러 선택자를 쉼표(,)로 구분하여 연결한다.
• 코드를 중복하여 작성하지 않도록 해 코드를 간결하게 만들어 준다.

h2 { color: navy; }
h2, h3 { text-align: center; }
h2, h3, p { background-color: lightgray; }

---

Class와 Id 셀렉터의 차이점

	Class	Id
여러 요소를 가질 수 있음	O	X
여러 클래스 or 아이디를 가질 수 있음	O	X