wiki:css:css_note:css_pseudo-element

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_pseudo-element [2021/03/30 11:28]
emblim98
+++ wiki:css:css_note:css_pseudo-element [2023/01/13 18:44] (현재)
@@ 줄 124: / 줄 124: @@
     <style>
         h1::before {
-            content: url(smiley.gif);
+        content: url(smiley.gif);
         }
     </style>
@@ 줄 152: / 줄 152: @@
 다음 예제에서는 목록 항목에 스타일을 지정합니다.\\
 ====예제====
+<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}}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_pseudo-element.1617071338.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)