1. 전체 선택자

전체 선택자(universal selector)는 HTML 문서 내의 모든 요소를 선택합니다. html를 포함하는 모든 요소에 스타일을 적용합니다. *(별표, 애스터리스크)를 사용하여 지정할 수 있습니다.

보통 브라우저 마다 다른 사용자 에이전트 스타일에 적용되어있는 기본 스타일을 제거하기 위해서 주로 사용됩니다. 모든 요소에 스타일을 적용하기 때문에 페이지 로드 성능에 영향을 미칠 수 있습니다. 따라서 필요한 경우에만 사용하는 것이 좋습니다.

* {
  margin: 0;
  padding: 0;
}

<h1>hello</h1>
<p>world</p>
<div>lorem ipsum dolor sit amet</div>

* {
  color: red;
}

2. 타입(유형) 선택자

타입 선택자(type selector)는 태그 선택자, 요소 선택자로도 불리며 특정 태그를 선택하여 스타일을 적용합니다. 아래 코드는 h1 태그와 p 태그를 선택하여 스타일을 적용합니다.

<h1>hello</h1>
<p>lorem ipsum dolor sit amet 1</p>
<p>lorem ipsum dolor sit amet 2</p>

h1 {
  color: blue;
}
p {
  font-size: 12px;
  font-weight: bold;
}

타입 선택자 또한 동일한 태그이면 모두 스타일이 적용되기 때문에 세부 스타일을 적용하기보다는 공통 스타일을 사용하는데 주로 사용됩니다. 따라서 디자인에 따라서 요소에 지정할 수 있는 클래스나 아이디 선택자를 사용하는 것을 권장합니다.

3. 아이디 선택자

아이디 선택자(id selector)는 아이디를 사용하여 특정 요소를 선택합니다. # 뒤에 아이디를 작성하여특정 요소를 선택합니다. 아이디는 HTML 페이지 내에서 고유한 값을 가지기 때문에 한 개의 요소에만 스타일을 적용하기 때문에 재사용성은 떨어집니다.

<header id="header">hello</header>
<div id="content">This is some content</div>
<button onclick="document.getElementById('content').style.display='none'">
  Hide Content
</button>

#header {
  color: blue;
}

아이디 속성은 주로 자바스크립트를 이용해서 기능을 추가하거나 해시 링크 이동에 사용됩니다.

4. 클래스 선택자

<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>

.fc-red {
  color: red;
}

하나의 요소에 여러 개의 클래스를 적용하는 것도 가능합니다. 따라서 스타일을 세분화하고 여러 클래스를 적용하여 스타일을 추가할 수 있습니다.

<p class="text-large text-bold fc-red">Styled text</p>

.text-large {
  font-size: 24px;
}

.text-bold {
  font-weight: bold;
}

.fc-red {
  color: red;
}

5. 속성 선택자

속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 강력한 도구입니다. 이를 통해 특정 속성을 가진 요소나 속성 값이 특정 패턴을 가진 요소를 선택할 수 있습니다.

• [속성이름]: 해당 속성을 가진 모든 요소 선택
• [속성이름="속성값"]: 해당 속성의 속성값이 일치하는 모든 요소 선택
• [속성이름*="속성값"]: 특정 문자열을 포함하는 모든 요소를 선택합니다.

<p title="Hello" class="text title">This paragraph has a title.</p>
<p class="text">This paragraph doesn't have a title.</p>
<a href="#" title="Link" class="link title">This is a link</a>

[title] {
  border-bottom: 2px dotted #333;
}

[class='text'] {
  color: lime;
}

[class*='text'] {
  background: pink;
}

6. 그룹 선택자

그룹 선택자(group selector)는 여러 개의 선택자를 쉼표(,)로 구분하여 한 번에 동일한 스타일을 적용할 수 있습니다. 이는 코드의 중복을 줄이고, 스타일을 일관되게 적용하는 데 유용합니다.

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>

h1,
h2,
h3 {
  color: blue;
}

위 CSS는 아래와 동일한 코드입니다.

h1 {
  color: blue;
}
h2 {
  color: blue;
}
h3 {
  color: blue;
}