CSS 선택자

주제

공부한 곳

• tcpschool.com
•  

 

---

공부 내용

 

스타일 적용의 우선순위

1. 인라인 스타일

2. 내부 / 외부 스타일 시트

3. 웹 브라우저 기본 스타일

 

 

CSS 선택자(selector)

• 전체 선택자
• HTML 요소 선택자
• ID 선택자
• CLASS 선택자
• 그룹 선택자

 

전체 선택자

CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택

<style>
    * { color: red; }
</style>

 

 

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택

<style>

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

</style>

...

<h2>이 부분에 스타일을 적용합니다.</h2>

 

 

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>

 

 

그룹 선택자

여러 선택자를 같이 사용하고자 할 때 사용

여러 선택자를 쉼표로 구분하여 연결

코드를 간결하게 해줌

<style>

    h2 { color: navy; }

    h2, h3 { text-align: center; }

    h2, h3, p { background-color: lightgray; }

</style>