--- title: CSS 참고서 slug: Web/CSS/Reference tags: - CSS - Guide - Overview - Reference - 'l10n:priority' translation_of: Web/CSS/Reference ---
{{CSSRef}}

CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 들어 있습니다.

기본 규칙 구문

스타일 규칙 구문

style-rule ::=
    selectors-list {
      properties-list
    }

... where :

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]

아래 선택자, 의사 클래스, 의사 요소 목록을 참고하세요. 각 value의 구문은 지정한 property가 정의하는 자료형에 따라 다릅니다.

스타일 규칙 예제

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 이 자습서에서 찾아볼 수 있습니다. 규칙 정의에서 구문 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) 텍스트에 기반하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 객체에 기반합니다.

@규칙 구문

@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 @규칙을 봐주세요.

키워드 색인

참고: 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 JavaScript 이름이 들어가지 않습니다.

{{CSS_Ref}}

선택자

다음은 선택자 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.

기본 선택자

기본 선택자는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.

그룹 선택자

선택자 목록 A, B
A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.

결합자

결합자는 "A는 B의 자식", "A는 B와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.

인접 형제 결합자 A + B
요소 A와 B가 같은 부모를 가지며 B가 A를 바로 뒤따라야 하도록 지정합니다.
일반 형제 결합자 A ~ B
요소 A와 B가 같은 부모를 가지며 B가 A를 뒤따라야 하도록 지정합니다. 그러나 B가 A의 바로 옆에 위치해야 할 필요는 없습니다.
자식 결합자 A > B
요소 B가 A의 바로 밑에 위치해야 하도록 지정합니다.
자손 결합자 A B
요소 B가 A의 밑에 위치해야 하도록 지정합니다. 그러나 B가 A의 바로 아래에 있을 필요는 없습니다.
열 결합자 A || B {{experimental_inline}}
요소 B가 표의 열 A 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.

의사 클래스/요소

의사 클래스 :
요소의 특정 상태를 선택합니다.
의사 요소 ::
HTML이 포함하지 않은 객체를 나타냅니다.

같이 보기: Selectors Level 4 명세의 선택자 목록.

개념

구문과 의미

값

레이아웃

DOM-CSS / CSSOM

주요 객체 유형

중요 메서드

같이 보기

외부 링크