차이

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

--- wiki:css:css_note:css_pseudo-class [2021/03/29 19:28]
emblim98 만듦
+++ wiki:css:css_note:css_pseudo-class [2023/01/13 18:44] (현재)
@@ 줄 9: / 줄 9: @@
 \\
 ====What are Pseudo-classes?====
-의사 클래스(Pseudo classes, 쑤도우 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.\\
+가상 클래스(Pseudo classes, 쑤도우 클래스, 의사 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.\\
 \\
 예를 들어,\\
@@ 줄 17: / 줄 17: @@
 에 사용할 수 있습니다.\\
 =====Syntax=====
-의사 클래스의 구문은 하기와 같습니다.\\
+가상 클래스의 구문은 하기와 같습니다.\\
 <HTML>
 selector:pseudo-class {
@@ 줄 24: / 줄 24: @@
 </HTML>
 \\
-=====Anchor Pseudo-classes (의사클래스 고정하기)=====
+=====Anchor Pseudo-classes (가상 클래스 고정하기)=====
 링크는 다양한 방식으로 표시됩니다.\\
 ====예제====
@@ 줄 70: / 줄 70: @@
 ''%%a:hover%%''는 CSS 정의에서 ''%%a:link%%'' 및 ''%%a:visited%%'' 뒤에 와야 효과적입니다.\\
 ''%%a:active%%''는 CSS 정의에서 ''%%a:hover%%'' 뒤에 와야 효과적입니다.\\
-의사 클래스 이름은 대소문자를 구분하지 않습니다.\\
+가상 클래스 이름은 대소문자를 구분하지 않습니다.\\
 \\
 =====Pseudo-classes and CSS Classes=====
-의사 클래스는 CSS 클래스와 결합될 수 있습니다.\\
+가상 클래스는 CSS 클래스와 결합될 수 있습니다.\\
 \\
 예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.\\
@@ 줄 97: / 줄 97: @@
 </html>
 </HTML>
+\\
+=====Hover on <div>=====
+다음은 ''%%<div>%%'' 요소 위의 ''%%:hover%%'' 가상 클래스를 사용하느 예제입니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        div {
+            background-color: green;
+            color: white;
+            padding: 25px;
+            text-align: center;
+        }
+        div:hover {
+            background-color: blue;
+            ;
+        }
+    </style>
+</head>
+<body>
+    <p>Mouse over the div element below to change its background color:</p>
+    <div>Mouse Over Me</div>
+</body>
+</html>
+</HTML>
+\\
+=====Simple Tooltip Hover=====
+''%%<hover>%%'' 요소 위에 마우스를 가져가면 툴팁(tooltip) 처럼 ''%%<p>%%'' 요소를 나타냅니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        p {
+            display: none;
+            background-color: yellow;
+            padding: 20px;
+        }
+        div:hover p {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div>Hover over me to show the p element
+        <p>Tada! Here I am!</p>
+    </div>
+</body>
+</html>
+</HTML>
+\\
+=====CSS - The :first-child Pseudo-class=====
+''%%first-child%%'' 가상 클래스는 다른 요소의 첫 번째 자식인 지정 요소와 일치합니다.\\
+\\
+=====Match the first <p> element=====
+하기 예제에서 셀텍터(selector)는 요소의 첫 번째 하위 요소인 <p> 요소와 일치합니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        p:first-child {
+            color: blue;
+        }
+    </style>
+</head>
+<body>
+    <p>This is some text.</p>
+    <p>This is some text.</p>
+</body>
+</html>
+</HTML>
+\\
+=====Match the first <i> element in all <p> elements=====
+하기 예제에서 셀렉터(selector)는 모든 <p> 요소의 첫 번째 <i> 요소와 일치합니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        p i:first-child {
+            color: blue;
+        }
+    </style>
+</head>
+<body>
+    <p>I am a <i>strong</i> person. I am a <i>strong</i> person</p>
+    <p>I am a <i>strong</i> person. I am a <i>strong</i> person</p>
+</body>
+</html>
+</HTML>
+\\
+=====Match all <i> elements in all first child <p> elements=====
+다음 예제에서, 셀렉터(selector)는 다른 요소의 첫 번째 자식인 <p> 요소의 모든 <i> 요소와 일치합니다:\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        p:first-child i {
+            color: blue;
+        }
+    </style>
+</head>
+<body>
+    <p>I am a <i>strong</i> person. I am a <i>strong</i> person</p>
+    <p>I am a <i>strong</i> person. I am a <i>strong</i> person</p>
+</body>
+</html>
+</HTML>
+\\
+=====CSS - The :lang Pseudo-class=====
+''%%:lang%%''가상 클래스를 사용하면 다른 언어에 대한 특수 규칙을 정의할 수 있습니다.\\
+\\
+하기 예제에서 ''%%:lang%%''은 lang = "no"로 <q> 요소에 대한 따옴표(quotation marks)를 정의합니다.\\
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        q:lang(no) {
+            quotes: "~""~";
+        }
+    </style>
+</head>
+<body>
+    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
+    <p>In this exmaple, ;lang defines the quotation marks for q elements with lang="no":</p>
+</body>
+</html>
+</HTML>
+쌍따옴표가 물결표시(~)로 변합니다.\\
+=====All CSS Pseudo Classes=====
+^        Selector       ^          Example       ^                      Example description                      ^
+^ :active               ^ a:active               ^ 활성 링크를 선택합니다.                                         ^
+| :checked              | input:checked          | 선택된 모든 <input> 요소를 선택합니다                           |
+^ :disabled             ^ input:disabled         ^ 비활성화된 모든 <input> 요소를 선택합니다.                       ^
+| :empty                | p:empty                | 자식이 없는 모든 <p> 요소를 선택합니다.                          |
+^ :enabled              ^ input:enabled          ^ 활성화된 모든 <input> 요소를 선택합니다.                         ^
+| :first-child          | p:first-child          | 부모의 첫 번째 자식인 모든 <p> 요소를 선택합니다.                 |
+^ :first-of-type        ^ p:first-of-type        ^ 부모의 첫 번째 <p> 요소인 모든 <p> 요소를 선택합니다.             ^
+| :foucs                | input:focus            | 포커스가 있는 <input> 요소를 선택합니다.                         |
+^ :hover                ^ a:hover                ^ 마우스 오버 시 링크를 선택합니다.                                ^
+| :in-range             | input:in-range         | 지정된 범위 내의 값을 가진 <input> 요소를 선택합니다.             |
+^ :invalid              ^ input:invalid          ^ 유효하지 않은 값을 가진 모든 <input> 요소를 선택합니다.            ^
+| :lang(language)       | p:lang(it)             | "it"로 시작하는 lang 속성 값을 가진 모든 <p> 요소를 선택합니다.    |
+^ :last-child           ^ p:last-child           ^ 부모의 마지막 자식인 모든 <p> 요소를 선택합니다.                   ^
+| :last-of-type         | p:last-of-type         | 부모의 마직막 <p> 요소인 모든 <p> 요소를 선택합니다.               |
+^ :link                 ^ a:link                 ^ 방문하지 않은 모든 링크를 선택합니다.                              ^
+| :not(selected)        | :not(p)                | <p> 요소가 아니 모든 요소를 선택합니다.                           |
+^ :nth-child(n)         ^ p:nth-child(2)         ^ 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다.                    ^
+| :nth-last-child(n)    | p:nth-last-child(2)    | 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다.       |
+^ :nth-last-of-type(n)  ^ p:nth-last-of-type(2)  ^ 마지막 자식부터 계산하여,  부모의 두 번째 <p>요소인 모든 <p> 요소를 선택합니다.  ^
+| :nth-of-type(n)       | p:nth-of-type(2)       | 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택합니다.                 |
+^ :only-of-type         ^ p:only-of-type         ^ 부모의 유일한 <p> 요소인 모든 <p> 요소를 선택합니다.                  ^
+| :only-child           | p:only-child           | 부모의 유일한 자식인 모든 <p> 요소를 선택합니다.                      |
+^ :optional             ^ input:optional         ^ 필요 속성이 없는 <input> 요소를 선택합니다.                       ^
+| :out-of-range         | input:out-of-range     | 지정 범위를 벗어난 값을 가진 <input> 요소를 선택합니다.                |
+^ :read-only            ^ input:read-only        ^ "readonly" 속성이 지정된 <input> 요소를 선택합니다.              ^
+| :read-write           | input:read-write       | "readonly" 속성이 없는 <input> 요소를 선택합니다.               |
+^ :required             ^ :input:required        ^ "required(필수)" 속성이 지정된 <input> 요소를 선택합니다.          ^
+| :root                 | root                   | 문서의 root 요소를 선택합니다.                                |
+^ :target               ^ #news:target           ^ 현재 활성화된 #news 요소를 선택합니다(해당 앵커 이름이 포함된 URL이 클릭된)    ^
+| :valid                | input:valid            | 유효 값을 가진 모든 <input> 요소를 선택합니다.                     |
+^ :visited              ^ a:visited              ^ 방문한 모든 링크를 선택합니다.                                  ^

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

사용자 도구

사이트 도구

차이

문서 도구