차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_pseudo-element [2021/03/30 10:22]
emblim98
+++ wiki:css:css_note:css_pseudo-element [2023/01/13 18:44] (현재)
@@ 줄 27: / 줄 27: @@
 ====예제====
 <code css>
-<style>
+p::first-line {
-  p::first-line {
   color: #ff0000;
   font-variant: small-caps;
 }
-</style>
 </code>
 \\
@@ 줄 47: / 줄 45: @@
   * 텍스트 장식 (text decoration)
   * 수직 정렬 (vertical align)
-  * 텍스트 변환 (text-decoration)
+  * 텍스트 장식 (text-decoration)
   * 줄 높이 (line-height)
   * 클리어 (clear)
@@ 줄 62: / 줄 60: @@
 ''%%::first-letter%%'' 가상 요소는 텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용됩니다.\\
 \\
-다음 예제는 모든 <p> 요소에서 텍스트의 첫 글자를 형식화 합니다.\\
+다음 예제는 모든 <p> 요소에서 텍스트의 첫 번째 단어의 첫 글자에 스타일을 추가합니다.\\
 ====예제====
 <code css>
+p::first-letter {
+  color: #ff0000;
+  font-variant: ss-large;
+}
 </code>
+**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 클래스와 결합할 수 있습니다:\\
+====예제====
+<code css>
+p.intro::first-letter {
+  color: #ff0000;
+  font-size: 200%;
+}
+</code>
+상기 예제는 %%class="intro"%% 를 가진 단락의 첫 번째 단어의 첫 번째 철자를 red 컬러의 큰 글꼴로 표시합니다.\\
+\\
+=====Multiple Pseudo-elements=====
+여러 가상 요소를 결합할 수도 있습니다.\\
+\\
+다음 예제에서, 단락의 첫 글자는 xx-large 글꼴 크기의 red 컬러입니다.\\
+첫 번째 줄의 나머지 글꼴은 blue이며 작은 대문자로 표시됩니다.\\
+나머지 단락은 기본 글꼴 크기 및 색상이 됩니다.\\
+====예제====
+<code css>
+p::first-letter {
+  color: #ff0000;
+  font-size: xx-large;
+}
+p::first-line {
+  color: #0000ff;
+  font-variant: small-caps;
+}
+</code>
+=====CSS - The ::before Pseudo-element=====
+''%%::before%%'' 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.\\
+\\
+다음 예제에서는 각 %%<h1>%% 요소의 콘텐츠 앞에 이미지를 삽입합니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        h1::before {
+        content: url(smiley.gif);
+        }
+    </style>
+</head>
+<body>
+    <h1>This is a heading.</h1>
+    <p>The ::before pseudo-element inserts content before the content of an element.</p>
+    <h1>This is a heading.</h1>
+</body>
+</html>
+</HTML>
+=====CSS - The ::after Pseudo-element=====
+''%%::after%%'' 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.\\
+\\
+다음 예제에서는 각 %%<h1>%% 요소의 콘텐츠 뒤에 이미지를 삽입합니다.\\
+====예제====
+<code css>
+<style>
+h1::after {
+  content: url(smiley.gif);
+    }
+</style>
+</code>
+=====CSS - The ::marker Pseudo-element=====
+''%%::marker%%'' 가상 요소는 목록 항목(list items)를 선택합니다.\\
+\\
+다음 예제에서는 목록 항목에 스타일을 지정합니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        ::marker {
+            color: red;
+            font-size: 23px;
+        }
+    </style>
+</head>
+<body>
+    <ul>
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+    </ul>
+    <ol>
+        <li>First</li>
+        <li>Second</li>
+        <li>Third</li>
+    </ol>
+</body>
+</html>
+</HTML>
+===Result===
+{{:wiki:css:css_note:marker.png|}}
+=====CSS - The ::selection Pseudo-element=====
+''%%::selection%%'' 가상 요소는 사용자가 선택한 요소의 부분과 일치합니다.\\
+\\
+''%%::selection%%'': ''color'', ''background'', ''cursor'' 그리고 ''outline'' 의 CSS 속성을 적용할 수 있습니다.\\
+\\
+다음 예제에서는 선택한 텍스트를 노란색 배경에서 빨간색으로 만듭니다.\\
+\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        ::-moz-selection {
+            color: red;
+            background-color: yellow;
+        }
+        ::selection {
+            color: red;
+            background-color: yellow;
+        }
+    </style>
+</head>
+<body>
+    <h1>Select some text on this page:</h1>
+    <p>This is a paragraph.</p>
+    <div>This is some text in a div element.</div>
+    <p><strong>Note:</strong>Firefox supports an alternative, the ::-moz-selection property.</p>
+</body>
+</html>
+</HTML>
+===Result===
+{{:wiki:css:css_note:css-selection.png?400|}}\\
+=====All CSS Pseudo Classes=====
+^     Selector    ^     Example      ^             Example description                    ^
+| ::after         | p::after         | 각 <p> 요소의 콘텐츠 뒤에 삽입합니다.                |
+^ ::before        ^ p::before        ^ 각 <p> 요소의 콘텐츠 앞에 삽입합니다.                ^
+| ::first-letter  | p::first-letter  | 각 <p> 요소의 첫 번째 철자를 선택합니다.             |
+^ ::first-line    ^ p::first-line    ^ 각 <p> 요소의 첫 번째 줄을 선택합니다.               ^
+| ::marker        | ::marker         | 목록 항목 (list items)의 마커(marker)를 선택합니다.  |
+^ ::selection     ^ p::selection     ^ 사용자가 선택한 요소의 부분을 선택합니다.             ^
+\\
+\\
 {{tag>오션 CSS Pseudo-elements}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구