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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_pseudo-class
wiki:css:css_note:css_pseudo-class

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_pseudo-class [2021/03/29 19:40]
emblim98 		wiki:css:css_note:css_pseudo-class [2023/01/13 18:44] (현재)
줄 9: 줄 9:
 \\ \\
 ====What are Pseudo-classes?====  ====What are Pseudo-classes?==== 
-의사 클래스(Pseudo classes, 쑤도우 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.\\+가상 클래스(Pseudo classes, 쑤도우 클래스, 의사 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.\\
 \\ \\
 예를 들어,\\ 예를 들어,\\
줄 17: 줄 17:
 에 사용할 수 있습니다.\\ 에 사용할 수 있습니다.\\
 =====Syntax===== =====Syntax=====
-의사 클래스의 구문은 하기와 같습니다.\\+가상 클래스의 구문은 하기와 같습니다.\\
 <HTML> <HTML>
 selector:pseudo-class { selector:pseudo-class {
줄 24: 줄 24:
 </HTML> </HTML>
 \\ \\
-=====Anchor Pseudo-classes (의사클래스 고정하기)=====+=====Anchor Pseudo-classes (가상 클래스 고정하기)=====
 링크는 다양한 방식으로 표시됩니다.\\ 링크는 다양한 방식으로 표시됩니다.\\
 ====예제==== ====예제====
줄 70: 줄 70:
 ''%%a:hover%%''는 CSS 정의에서 ''%%a:link%%'' 및 ''%%a:visited%%'' 뒤에 와야 효과적입니다.\\ ''%%a:hover%%''는 CSS 정의에서 ''%%a:link%%'' 및 ''%%a:visited%%'' 뒤에 와야 효과적입니다.\\
 ''%%a:active%%''는 CSS 정의에서 ''%%a:hover%%'' 뒤에 와야 효과적입니다.\\   ''%%a:active%%''는 CSS 정의에서 ''%%a:hover%%'' 뒤에 와야 효과적입니다.\\  
-의사 클래스 이름은 대소문자를 구분하지 않습니다.\\+가상 클래스 이름은 대소문자를 구분하지 않습니다.\\
 \\ \\
 =====Pseudo-classes and CSS Classes===== =====Pseudo-classes and CSS Classes=====
-의사 클래스는 CSS 클래스와 결합될 수 있습니다.\\+가상 클래스는 CSS 클래스와 결합될 수 있습니다.\\
 \\ \\
 예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.\\ 예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.\\
줄 99: 줄 99:
 \\ \\
 =====Hover on <div>===== =====Hover on <div>=====
-다음은 ''%%<div>%%'' 요소 위의 ''%%:hover%%'' 의사 클래스를 사용하느 예제입니다.\\+다음은 ''%%<div>%%'' 요소 위의 ''%%:hover%%'' 가상 클래스를 사용하느 예제입니다.\\
 ====예제==== ====예제====
 <HTML> <HTML>
줄 155: 줄 155:
 </html> </html>
 </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              ^ 방문한 모든 링크를 선택합니다.                                  ^
 +
  
  
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_pseudo-class.1617014433.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki