CSS 참고서

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

기본 규칙 구문

스타일 규칙 구문

selectorlist {
  property: value;
  [more property:value; pairs]
}

... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]

아래 선택자, 가상 클래스, 가상 요소 목록을 참고하세요.

스타일 규칙 예제

strong {
  color: red;
}

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

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

@규칙 구문

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

키워드 색인

선택자

기본 선택자

• 태그 선택자 elementname
• 클래스 선택자 .classname
• ID 선택자 #idname
• 전체 선택자 *, ns|*, *|*, |*
• 속성 선택자 [attr=value]

결합자

• 인접 형제 결합자 A + B
• 일반 형제 결합자 A ~ B
• 자식 결합자 A > B
• 하위 결합자 A B
• 컬럼(column) 결합자 A || B

가상 클래스

가상 요소

개념

구문과 의미

• CSS 구문
• @-규칙
• 종속(cascade)
• 주석
• 서술자(descriptor)
• 상속
• 단축 속성
• 명시도(specificity)
• 값 정의 구문(value definition syntax)

값

• 실제값
• 계산값
• 초기값
• 결정값
• 지정값
• 사용값

레이아웃

• 블록 서식 문맥(block formatting context)
• 박스 모델
• 컨테이닝 블록
• 레이아웃 모드
• 여백 상쇄
• 대체 요소(replaced elements)
• 쌓임 맥락
• 비주얼 서식 문맥(visual formatting model)

DOM-CSS / CSSOM

주요 객체 유형

• DocumentOrShadowRoot.styleSheets
• styleSheets[i].cssRules
• cssRules[i].cssText (selector & style)
• cssRules[i].selectorText
• HTMLElement.style
• HTMLElement.style.cssText (just style)
• Element.className
• Element.classList

중요 메서드

• CSSStyleSheet.insertRule()
• CSSStyleSheet.deleteRule()

같이 보기

• Mozilla CSS 확장 (-moz- 접두사 사용)
• WebKit CSS 확장 (대다수 -webkit- 접두사 사용)
• Microsoft CSS 확장 (-ms- 접두사 사용)