2. 셀렉터 CSS3 Selector

CSS(Cascading Style Sheets)는 HTML요소(Element)의 style(design, layout etc)을 정의한다. 그러려면 HTML이 존재해야 하고 또한 style을 적용하고자 하는 HTML 요소를 특정할 수 있어야 한다.

이러한 목적으로 사용되는 것이 셀렉터Selector이다. 즉, style을 적용하고자 하는 HTML요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.

Untitled

셀렉터는 복수개의 셀렉터를 연속하여 지정할 수 있으며 이때는 쉼표( , )로 구분한다.

h1, p { color: red; }

1. 전체 셀렉터 (Universal Selector) *

HTML문서 내의 모든 요소를 선택하기 위해서 전체 셀렉터 * 를 사용할 수 있다.

2. 태그 셀렉터 (Type Selector)

HTML태그 종류를 공통적으로 선택하기 위해서 사용할 수 있다. 태그 이름을 그대로 셀렉터로 사용하면 된다. (예를들어 p를 하면 <p></p>태그들을 모두 선택하는 것)

3. ID 셀렉터 (ID Selector)

태그의 id어트리뷰트의 값(value)에 #를 붙여서 셀렉터로 사용할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    **#p1 { color: red; }**
  </style>
</head>
<body>
  <h1>Heading</h1>
  <div class="container">
    **<p id="p1">paragraph 1</p>**
    <p id="p2">paragraph 2</p>
  </div>
</body>
</html>

4. 클래스 셀렉터 (Class Selector)

id셀렉터와 비슷하게 태그의 class어트리뷰트의 값에 . 를 붙여서 셀렉터로 사용할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    **.container { color: red; }**
  </style>
</head>
<body>
  <h1>Heading</h1>
  **<div class="container">
    <p id="p1">paragraph 1</p>
    <p id="p2">paragraph 2</p>
  </div>**
</body>
</html>

한 HTML요소에 여러개의 class 어트리뷰트를 지정할 수 있다는 점을(공백으로 구분하면 됨) 이용해서 효율적인 스타일 지정을 할 수 있다.

5. 어트리뷰트 셀렉터 (Attribute Selector)

어트리뷰트로도 셀렉터를 지정할 수 있구나. 신기하다.

a[href] { color: red; }