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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Pseudo-classes ======
<WRAP left notice 80%>
  * description : CSS Pseudo-classes
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-29
</WRAP>
<WRAP clear></WRAP>
\\
====What are Pseudo-classes?==== 
가상 클래스(Pseudo classes, 쑤도우 클래스, 의사 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.\\
\\
예를 들어,\\
  * 사용자 마우스가 올려졌을 때 요소를 스타일링 하는 것
  * 방문(visited) 및 미방문(unvisited) 링크를 다르게 스타일링 하는 것
  * 포커스(focus)를 받을 때 요소를 스타일링 하는 것
에 사용할 수 있습니다.\\
=====Syntax=====
가상 클래스의 구문은 하기와 같습니다.\\
<HTML>
selector:pseudo-class {
  property: value;
}
</HTML>
\\
=====Anchor Pseudo-classes (가상 클래스 고정하기)=====
링크는 다양한 방식으로 표시됩니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Links</title>
    <style>
        /* unvisited link */
        a:link {
            color: red;
        }

        /* visited link */
        a:visited {
            color: green;
        }

        /* mouse over link */
        a:hover {
            color: hotpink;
        }

        /* selected link */
        a:active {
            color: blue;
        }
    </style>
</head>

<body>
    <h2>CSS Links</h2>
    <p><b><a href="https://www.w3schools.com/css/default.asp" target="_blank">This is a link 02</a></b></p>
    <p><b>Note:</b> a:hover come after a:link and a:visited in the CSS definition in order to be effective.</p>
    <p><b>Note:</b> a:active MUST cone after a:hover in the CSS definition in order to be effective.</p>
</body>

</html>
</HTML>
\\
**Note:**\\
''%%a:hover%%''는 CSS 정의에서 ''%%a:link%%'' 및 ''%%a:visited%%'' 뒤에 와야 효과적입니다.\\
''%%a:active%%''는 CSS 정의에서 ''%%a:hover%%'' 뒤에 와야 효과적입니다.\\  
가상 클래스 이름은 대소문자를 구분하지 않습니다.\\
\\
=====Pseudo-classes and CSS Classes=====
가상 클래스는 CSS 클래스와 결합될 수 있습니다.\\
\\
예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        a.hightlight:hover {
            color: #ff0000;
        }
    </style>
</head>
<body>

    <h2>Pseudo-clsses and CSS Classes</h2>
    <p>When you hover over the first link below, it will change color:</p>

    <p><a class="hightlight" href="https://www.w3schools.com/css/css_syntax.ASP">CSS Syntax</a></p>
    <p><a href="https://www.w3schools.com/css/default.asp">CSS Tutorial</a></p>
</body>
</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              ^ 방문한 모든 링크를 선택합니다.                                  ^









{{tag>오션 CSS Pseudo-classes}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
