요소 선택자 (Element Selectors)

문서의 기본 구조를 이루는 HTML 태그 자체를 타겟팅하는 가장 기초적인 방식입니다. W3C 표준에서는 이를 유형 선택자(Type Selector)라고도 부릅니다.

body {
  background-color: #f4f4f9;
  color: #333;
}
header {
  background-color: #2c3e50;
  color: #ecf0f1;
}

이 방식은 XML 문서의 커스텀 태그에도 동일하게 적용할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<notification>
  <sender>Admin</sender>
  <receiver>User</receiver>
  <message>System update scheduled.</message>
</notification>

notification {
  font-family: 'Segoe UI', sans-serif;
  border: 1px solid #ccc;
}
sender, receiver {
  font-weight: bold;
  display: block;
}
message {
  color: #e74c3c;
  display: block;
}

선택자 및 선언 그룹화 (Grouping)

여러 요소에 동일한 스타일을 적용하거나, 하나의 요소에 여러 속성을 부여할 때 쉼표(,)와 중괄호({})를 활용해 코드를 압축할 수 있습니다.

/* 선택자 그룹화 */
nav, aside, footer {
  font-size: 0.9rem;
  color: #7f8c8d;
}

/* 선언 그룹화 (마지막 세미콜론 필수) */
h1 {
  font-family: 'Arial', sans-serif;
  line-height: 1.5;
  margin-bottom: 20px;
}

모든 요소를 초기화할 때는 유니버설 선택자(Universal Selector)를 사용합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

클래스 선택자 (Class Selectors)

특정 요소에 종속되지 않고 재사용 가능한 스타일을 정의할 때 사용합니다. HTML의 class 속성 값을 참조하며, 점(.)으로 시작합니다.

<button class="btn primary">Submit</button>
<a href="#" class="btn primary">Link</a>

.btn {
  padding: 10px 20px;
  border-radius: 4px;
}
.primary {
  background-color: #3498db;
  color: white;
}
/* 다중 클래스 선택자: 두 클래스를 모두 가진 요소만 타겟팅 */
.btn.primary {
  box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
}

ID 선택자 (ID Selectors)

문서 내에서 고유해야 하는 단일 요소에 스타일을 적용할 때 사용하며, 해시(#) 기호를 사용합니다. 클래스와 달리 공백으로 구분된 다중 값 지정이 불가능하며, 대소문자를 구분합니다.

<section id="hero-banner">Welcome</section>

#hero-banner {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

속성 선택자 (Attribute Selectors)

요소의 속성 존재 여부나 특정 값을 기준으로 필터링합니다. XML이나 데이터 속성(data-*)을 다룰 때 매우 유용합니다.

/* 속성 존재 여부 */
input[required] {
  border-left: 3px solid #e74c3c;
}

/* 정확한 값 일치 */
a[target="_blank"] {
  text-decoration: underline dotted;
}

/* 단어 목록 중 일부 일치 (물결표 사용) */
div[class~="card"] {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 부분 문자열 일치 */
a[href*="example.com"] {
  color: #27ae60;
}

/* 하이픈으로 구분된 값 일치 (주로 언어 코드) */
p[lang|="ko"] {
  font-family: 'Malgun Gothic', sans-serif;
}

계층형 선택자: 자손과 자식 (Descendant & Child)

DOM 트리의 구조를 기반으로 요소를 선택합니다. 공백은 모든 하위 자손을, 큰따옴표(>)는 직계 자식만 선택합니다.

/* 자손 선택자: article 내부의 모든 blockquote (깊이 무관) */
article blockquote {
  border-left: 4px solid #bdc3c7;
  padding-left: 15px;
  font-style: italic;
}

/* 자식 선택자: nav의 직계 자식인 ul만 선택 */
nav > ul {
  display: flex;
  gap: 20px;
}

형제 선택자 (Sibling Selectors)

같은 부모를 둔 요소 중 특정 위치에 있는 형제를 선택합니다. 더하기 기호(+)는 바로 다음에 오는 인접 형제를 선택합니다.

/* h2 바로 다음에 오는 p 요소에만 적용 */
h2 + p {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 리스트 아이템 간의 구분선 */
li + li {
  border-top: 1px solid #eee;
}

가상 클래스 (Pseudo-classes)

요소의 특정 상태나 DOM 트리 내에서의 위치를 기반으로 스타일을 적용합니다.

/* 링크의 상태 (반드시 LVHA 순서로 작성해야 함) */
a:link { color: #2980b9; }
a:visited { color: #8e44ad; }
a:hover { color: #e67e22; }
a:active { color: #c0392b; }

/* 첫 번째 자식 요소 */
ul li:first-child {
  font-weight: bold;
}

/* 언어 기반 스타일링 */
q:lang(en) {
  quotes: '"' '"' "'" "'";
}

가상 요소 (Pseudo-elements)

문서의 실제 DOM에는 존재하지 않지만, 스타일링을 위해 가상의 요소를 생성하거나 특정 부분(첫 글자, 첫 줄 등)에만 스타일을 적용합니다. 현대 CSS에서는 이중 콜론(::) 표기를 권장합니다.

/* 단락의 첫 줄 스타일링 */
p::first-line {
  font-variant: small-caps;
  letter-spacing: 1px;
}

/* 단락의 첫 글자 드롭캡 효과 */
p::first-letter {
  font-size: 3rem;
  float: left;
  line-height: 1;
  margin-right: 8px;
}

/* 콘텐츠 앞뒤에 가상 요소 삽입 */
.breadcrumb::before {
  content: "🏠";
  margin-right: 5px;
}
.external-link::after {
  content: " ↗";
  font-size: 0.8em;
}