From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/pseudo-elements/index.html | 124 ++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/ko/web/css/pseudo-elements/index.html (limited to 'files/ko/web/css/pseudo-elements') diff --git a/files/ko/web/css/pseudo-elements/index.html b/files/ko/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..b85c0a2904 --- /dev/null +++ b/files/ko/web/css/pseudo-elements/index.html @@ -0,0 +1,124 @@ +--- +title: 의사 요소 +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - Overview + - Pseudo-element + - Reference + - Selectors +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 {{cssxref("::first-line")}}을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

+ +
/* The first line of every <p> element. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

참고: 의사 클래스는 의사 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용합니다.

+
+ +

구문

+ +
selector::pseudo-element {
+  property: value;
+}
+ +

하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.

+ +
+

참고: 규칙을 따라 단일 콜론(:) 대신 이중 콜론(::)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.

+
+ +

표준 의사 요소 색인

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
브라우저최하위 버전지원
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined pseudo-classes and pseudo-elements.
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf