selector::pseudo-element {
property: value;
}
=====The ::first-line Pseudo-element=====
''%%first-line%%'' 가상 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 추가하는 데 사용됩니다.\\
\\
하기의 예제는 모든 요소에 있는 텍스트의 첫 번째 줄을 형식화(format)합니다.\\
====예제====
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
\\
**small caps (작은 대문자): 작은 대문자(소문자 크기의 대문자)**\\
\\
**Note:** ''%%::first-line%%'' 가상 요소는 블럭 레벨 요소에만 적용할 수 있습니다.\\
\\
아래의 속성은 ''%%first-line%%'' 가상 요소에 적용됩니다.\\
* 폰트 속성 (font properties)
* 컬러 속성 (color properties)
* 배경 속성 (background properties)
* 단어 간격 (word-spacing)
* 문자 간격 (letter-spacing)
* 텍스트 장식 (text decoration)
* 수직 정렬 (vertical align)
* 텍스트 장식 (text-decoration)
* 줄 높이 (line-height)
* 클리어 (clear)
\\
**이중 콜론 표기법-''%%::first-line%%'' 대 ''%%:first-line%%''**\\
\\
이중 콜론은 CSS3의 가상 요소(pseudo-elements)의 단일 콜론 표기법을 대체했습니다.\\
이것은 W3C가 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)를 구별하려는 시도였습니다.\\
\\
단일 콜론 구문은 CSS2 및 CSS1의 가상 클래스와 가상 요소 모두에 사용되었습니다.\\
\\
이전 버전과의 호환성을 위해 CSS2 및 CSS1 가상 요소에 단일 콜론 구문을 사용할 수 있습니다.\\
=====The ::first-letter Pseudo-element=====
''%%::first-letter%%'' 가상 요소는 텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용됩니다.\\
\\
다음 예제는 모든
요소에서 텍스트의 첫 번째 단어의 첫 글자에 스타일을 추가합니다.\\
====예제====
p::first-letter {
color: #ff0000;
font-variant: ss-large;
}
**Note:** ''%%::first-letter%%'' 가상 요소는 블럭 레벨 요소에만 적용할 수 있습니다.\\
\\
아래의 속성은 ''%%first-letter%%'' 가상 요소에 적용됩니다.\\
* 폰트 속성 (font properties)
* 컬러 속성 (color properties)
* 배경 속성 (background properties)
* 마진 속성 (margin properties)
* 패딩 속성 (padding properties)
* 보더 속성 (border properties)
* 텍스트 장식 (text decoration)
* 수직 정렬 (vertical align) - "float" 속성이 "none"일 때만
* 텍스트 변환 (text-transform)
* 줄 높이 (line-height)
* 플로트 (float)
* 클리어 (clear)
\\
=====Pseudo-element and CSS Classes=====
가상 요소는 CSS 클래스와 결합할 수 있습니다:\\
====예제====
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
상기 예제는 %%class="intro"%% 를 가진 단락의 첫 번째 단어의 첫 번째 철자를 red 컬러의 큰 글꼴로 표시합니다.\\
\\
=====Multiple Pseudo-elements=====
여러 가상 요소를 결합할 수도 있습니다.\\
\\
다음 예제에서, 단락의 첫 글자는 xx-large 글꼴 크기의 red 컬러입니다.\\
첫 번째 줄의 나머지 글꼴은 blue이며 작은 대문자로 표시됩니다.\\
나머지 단락은 기본 글꼴 크기 및 색상이 됩니다.\\
====예제====
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
=====CSS - The ::before Pseudo-element=====
''%%::before%%'' 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.\\
\\
다음 예제에서는 각 %%
The ::before pseudo-element inserts content before the content of an element.
=====CSS - The ::marker Pseudo-element=====
''%%::marker%%'' 가상 요소는 목록 항목(list items)를 선택합니다.\\
\\
다음 예제에서는 목록 항목에 스타일을 지정합니다.\\
====예제====
This is a paragraph.
Note:Firefox supports an alternative, the ::-moz-selection property.
===Result=== {{:wiki:css:css_note:css-selection.png?400|}}\\ =====All CSS Pseudo Classes===== ^ Selector ^ Example ^ Example description ^ | ::after | p::after | 각요소의 콘텐츠 뒤에 삽입합니다. | ^ ::before ^ p::before ^ 각
요소의 콘텐츠 앞에 삽입합니다. ^ | ::first-letter | p::first-letter | 각
요소의 첫 번째 철자를 선택합니다. | ^ ::first-line ^ p::first-line ^ 각
요소의 첫 번째 줄을 선택합니다. ^ | ::marker | ::marker | 목록 항목 (list items)의 마커(marker)를 선택합니다. | ^ ::selection ^ p::selection ^ 사용자가 선택한 요소의 부분을 선택합니다. ^ \\ \\ {{tag>오션 CSS Pseudo-elements}}