Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

유사 클래스

CSS 팟캐스트 - 015: 가상 클래스 를 통해 개인정보처리방침을 정의할 수 있습니다.

이메일 가입 양식이 있다고 가정해 보겠습니다. 잘못된 이메일 주소가 포함된 경우 이메일 양식 필드에 빨간색 테두리를 표시하려고 합니다. 그 방법은 무엇일까요? :invalid CSS 의사 클래스를 사용하면 됩니다. 이는 브라우저에서 제공하는 많은 의사 클래스 중 하나입니다.

의사 클래스를 사용하면 상태 변경 및 외부 요인을 기반으로 스타일을 적용할 수 있습니다. 즉, 잘못된 이메일 주소와 같은 사용자 입력에 디자인이 반응할 수 있습니다. 이는 선택기 모듈에서 다룹니다. 이 모듈에서 보다 자세히 살펴보겠습니다.

의사 요소와 달리 이전 모듈에서 자세히 알아볼 수 있습니다 의사 클래스는 요소가 있을 수 있는 특정 상태에 연결됩니다. 그 요소의 일부에 스타일을 지정하는 것이 아니라

상호작용 상태

사용자와 페이지의 상호작용으로 인해 다음과 같은 유사 클래스가 적용됩니다.

`:hover`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

사용자가 마우스나 트랙패드와 같은 포인팅 기기를 사용하는 경우 요소 위에 배치하면 해당 상태에 연결할 수 있습니다. :hover: 스타일을 적용합니다. 이는 요소와 상호작용할 수 있음을 암시하는 유용한 방법입니다.

`:active`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

이 상태는 요소와 활발하게 상호작용할 때 트리거됩니다. 예를 들어 클릭이 해제되기 전 마우스와 같은 포인팅 기기를 사용하는 경우 이 상태는 클릭이 시작되고 아직 해제되지 않은 경우입니다.

`:focus`, `:focus-within`, `:focus-visible`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

<button>와 같이 요소가 포커스를 받을 수 있는 경우 이 상태에 대한 반응은 :focus 유사 클래스

요소의 하위 요소가 포커스를 받으면 :focus-within

버튼과 같은 포커스 가능 요소 클릭하더라도 포커스가 있을 때 초점 링이 표시됩니다. 이러한 상황에서 개발자는 다음 CSS를 적용합니다.

button:focus {
    outline: none;
}

이 CSS는 요소가 포커스를 받으면 기본 브라우저 포커스 링을 삭제합니다. 이는 키보드로 웹페이지를 탐색하는 사용자에게 접근성 문제를 나타냅니다. 포커스 스타일이 없으면 Tab 키를 사용할 때 현재 포커스가 어디에 있는지 추적할 수 없습니다. :focus-visible 사용 요소가 키보드를 통해 포커스를 받을 때 포커스 스타일을 나타낼 수 있습니다. 동시에 outline: none 규칙을 사용하여 포인터 기기가 포인터 기기와 상호작용할 때 이를 방지합니다.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

`:target`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

:target 의사 클래스가 URL 프래그먼트와 일치하는 id가 있는 요소를 선택합니다. 다음과 같은 HTML이 있다고 가정해 보겠습니다.

<article id="content">
    …
</article>

URL에 #content이(가) 포함되어 있으면 이 요소에 스타일을 연결할 수 있습니다.

#content:target {
    background: yellow;
}

이것은 특별히 연결되어 있을 수 있는 영역을 강조 표시하는 데 유용합니다. 웹사이트의 주요 콘텐츠와 같은 광고를 건너뛸 수 있습니다.

이전 주

`:link`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

:link 의사 클래스는 아직 방문하지 않은 href 값이 있는 모든 <a> 요소에 적용할 수 있습니다.

`:visited`

사용자가 이미 방문한 링크의 스타일을 지정하려면 :visited 의사 클래스. :link와 반대 상태이지만 사용할 CSS 속성이 더 적습니다. 보안상의 이유. color, background-color, border-color, outline-color, SVG fill, stroke의 색상

순서가 중요

:visited 스타일을 정의하는 경우 적어도 동일한 특이성을 갖는 링크 의사 클래스에 의해 재정의될 수 있습니다. 이로 인해 유사 클래스가 있는 링크의 스타일을 특정 순서로 지정하려면 LVHA 규칙을 사용하는 것이 좋습니다. :link, :visited, :hover, :active

a:link {}
a:visited {}
a:hover {}
a:active {}

드림

참고: 보안상의 이유로 :link 또는 방문하지 않은 상태로 정의된 스타일은 :visited 의사 클래스로만 변경할 수 있으므로 변경 가능한 스타일을 먼저 정의하는 것이 중요합니다. LVHA 규칙을 고수하면 도움이 됩니다.

양식 상태

다음 의사 클래스는 양식 요소를 선택할 수 있습니다. 다양한 상태로 표현됩니다.

`:disabled` 및 `:enabled`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

양식 요소인 경우 예를 들어 <button>가 브라우저에 의해 사용 중지되거나 해당 상태에 연결할 수 있습니다. :disabled 유사 클래스 :enabled 반대 상태에도 유사 클래스를 사용할 수 있습니다 양식 요소는 기본적으로 :enabled입니다. 따라서 이 가상 클래스에 도달하지 못할 수 있습니다.

`:checked` 및 `:indeterminate`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

:checked 의사 클래스는 지원 양식 요소가 체크박스나 라디오 버튼이 선택된 상태인 경우와 같이

:checked 상태는 바이너리(참 또는 거짓) 상태입니다. 그러나 체크박스는 선택되거나 선택 해제되지 않은 경우에도 중간 상태를 가집니다. 이를 가리켜 :indeterminate 상태

이 상태의 예로 '모두 선택' 이 컨트롤은 그룹의 모든 체크박스를 선택합니다. 사용자가 이러한 체크박스 중 하나를 선택 해제했다면 루트 체크박스가 더 이상 'all'을 나타내지 않음 확인되고 있다면 미확정 상태로 두어야 합니다

<progress> 요소에는 스타일을 지정할 수 있는 확정되지 않은 상태도 있습니다. 일반적인 사용 사례는 줄무늬 모양을 제공하여 얼마나 더 필요한지 알 수 없음을 나타내는 것입니다.

`:placeholder-shown`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

양식 입력란에 placeholder 속성이 있고 값이 없는 경우 :placeholder-shown 의사 클래스를 사용하여 해당 상태에 스타일을 연결할 수 있습니다. 필드에 콘텐츠가 생기자마자 placeholder가 있는지 여부와 관계없이 더 이상 적용되지 않습니다.

유효성 검사 상태

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

다음과 같은 의사 클래스를 사용하여 HTML 양식 유효성 검사에 응답할 수 있습니다. :valid님, :invalid 및 :in-range: :valid 및 :invalid 의사 클래스는 컨텍스트에 유용합니다. 일치해야 하는 pattern가 있는 이메일 필드 등 유효한 필드여야 합니다 이 유효한 값 상태는 사용자에게 표시될 수 있으며 다음 분야로 안전하게 이동할 수 있음을 이해하는 데 도움이 됩니다.

입력에 min 및 max가 있으면 :in-range 의사 클래스를 사용할 수 있습니다. 예를 들어 숫자 입력 그리고 값이 이러한 경계 내에 있어야 합니다.

HTML 양식을 사용하면 required 속성을 사용하여 필드가 필수인지 확인할 수 있습니다. :required 필수 필드에 의사 클래스를 사용할 수 있습니다. 필수가 아닌 입력란은 :optional 의사 클래스.

색인, 순서, 어커런스를 기준으로 요소 선택

문서 내 위치에 따라 항목을 선택하는 의사 클래스 그룹이 있습니다.

`:first-child` 및 `:last-child`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

첫 번째나 마지막 항목을 찾으려면 kubectl 명령어 :first-child 및 :last-child 이러한 의사 클래스는 동위 요소 그룹에서 첫 번째 또는 마지막 요소를 반환합니다.

`:only-child`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

동위 요소가 없는 요소를 선택할 수도 있습니다. 다음 코드로 교체합니다. :only-child 의사 클래스.

`:first-of-type` 및 `:last-of-type`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

여기에서 :first-of-type 및 :last-of-type는 처음에 :first-child 및 :last-child와 같은 작업을 하는 것처럼 보이지만 다음 HTML을 고려하세요.

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

이 CSS의 특징은 다음과 같습니다.

.my-parent div:first-child {
    color: red;
}

첫 번째 하위 요소가 div가 아니라 단락이므로 어떤 요소도 빨간색으로 표시되지 않습니다. 이 컨텍스트에서는 :first-of-type 의사 클래스가 유용합니다.

.my-parent div:first-of-type {
    color: red;
}

첫 번째 <div>가 두 번째 하위 요소이지만 여전히 .my-parent 요소 내부의 첫 번째 유형입니다. 이 규칙에서는 빨간색이 됩니다.

`:nth-child` 및 `:nth-of-type`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

또한 첫 번째와 마지막 하위 요소 및 유형으로 제한되지 않습니다. :nth-child 및 :nth-of-type 의사 클래스를 사용하면 특정 색인에 있는 요소를 지정할 수 있습니다. CSS 선택자의 색인 생성은 1부터 시작합니다.

이러한 의사 클래스에 색인 두 개 이상을 전달할 수도 있습니다. 모든 짝수 요소를 선택하려면 :nth-child(even)를 사용하면 됩니다.

또한 일정한 간격으로 항목을 찾는 더 복잡한 선택기를 만들 수도 있습니다. An+B 마이크로 구문을 사용합니다.

li:nth-child(3n+3) {
    background: yellow;
}

이 선택기는 3번 항목부터 살펴보겠습니다. 이 표현식의 n는 색인입니다. 0에서 시작하는 3 (3n)은 색인에 곱하는 값입니다.

<li> 항목이 7개 있다고 가정해 보겠습니다. 선택된 첫 번째 항목은 3입니다. 3n+3가 (3 * 0) + 3로 변환되기 때문입니다. 다음 반복에서는 항목 6을 선택합니다. 이제 n가 1로 증가하기 때문입니다. 그래서 (3 * 1) + 3)입니다. 이 표현식은 :nth-child 및 :nth-of-type 모두에 적용됩니다.

이 선택기를 사용하여 nth-child tester 또는 이 수량 선택 도구

`:only-of-type`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

마지막으로, 동위 그룹에서 특정 유형의 유일한 요소를 찾을 수 있습니다. :only-of-type 이는 항목이 하나뿐인 목록을 선택하거나 또는 단락에서 굵게 표시된 요소만 찾는 경우입니다.

빈 요소 찾기

때로는 완전히 빈 요소를 식별하는 것이 유용할 수 있습니다. 이를 위한 의사 클래스도 있습니다.

`:empty`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

요소에 하위 요소가 없으면 :empty 의사 클래스가 이러한 클래스에 적용됩니다. 하위 요소는 HTML 요소나 텍스트 노드일 뿐만 아니라 공백일 수도 있습니다. 다음 HTML을 디버깅할 때 혼란을 야기하고 :empty와 호환되지 않는 이유가 궁금할 수 있습니다.

<div>
</div>

여는 부분과 닫는 부분 사이에 공백이 있고 <div> 비어 있으면 작동하지 않습니다.

:empty 의사 클래스는 HTML을 거의 제어할 수 없고 빈 요소를 숨기려는 경우에 유용할 수 있습니다. (예: WYSIWYG 콘텐츠 편집기) 여기에 편집자가 빈 단락을 추가했습니다.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

:empty를 사용하면 이 항목을 찾아 숨길 수 있습니다.

.post :empty {
    display: none;
}

여러 요소 찾기 및 제외

일부 의사 클래스를 사용하면 더 간단한 CSS를 작성할 수 있습니다.

`:is()`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

.post 요소에서 h2, li, img 하위 요소를 모두 찾으려면 다음 안내를 따르세요. 다음과 같이 선택기 목록을 작성한다고 생각할 수 있습니다.

.post h2,
.post li,
.post img {
    …
}

:is() 사용 더 간단한 버전을 작성할 수 있습니다.

.post :is(h2, li, img) {
    …
}

:is 의사 클래스는 선택기 목록보다 더 간단할 뿐만 아니라 더 관대합니다. 대부분의 경우 선택기 목록에 오류 또는 지원되지 않는 선택기가 있는 경우 전체 선택기 목록이 더 이상 작동하지 않습니다. :is 의사 클래스의 전달된 선택기에 오류가 있으면 잘못된 선택기는 무시되지만 유효한 선택기를 사용합니다.

`:not()`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

또한 :not() 의사 클래스. 예를 들어 class 속성이 없는 모든 링크의 스타일을 지정하는 데 사용할 수 있습니다.

a:not([class]) {
    color: blue;
}

:not 의사 클래스를 사용하면 접근성을 개선할 수도 있습니다. 예를 들어 <img>에는 빈 값인 경우에도 alt가 있어야 합니다. 따라서 유효하지 않은 이미지에 굵은 빨간색 윤곽선을 추가하는 CSS 규칙을 작성할 수 있습니다.

img:not([alt]) {
    outline: 10px red;
}

이해도 확인

유사 클래스에 관한 지식 테스트

의사 클래스는 클래스가 요소에 동적으로 적용된 것처럼 작동하는 반면 의사 요소는 요소 자체에서 작동합니다.

참

단일 또는 이중 :가 선택기에서 키 고유 문자로 사용되는지 살펴보세요.

거짓

유사 요소는 부품용이고 의사 클래스는 상태를 위한 것입니다.

다음 중 기능 유사 클래스는 무엇인가요?

:is()

🎉

:target

함수 의사 클래스 뒤에는 ()가 있어 매개변수를 허용함을 나타냅니다.

:empty

함수 의사 클래스 뒤에는 ()가 있어 매개변수를 허용함을 나타냅니다.

:not()

🎉

다음 중 사용자 상호작용으로 인한 유사 클래스는 무엇인가요?

:hover

🎉

:press

다시 시도해 보세요.

:squeeze

다시 시도해 보세요.

:target

🎉

:focus-within

🎉

다음 중 <form> 상태 유사 클래스는 무엇인가요?

:enabled

🎉

:fresh

다시 시도해 보세요.

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

다시 시도해 보세요.

:valid

🎉

유사 클래스

CSS 팟캐스트 - 015: 가상 클래스 를 통해 개인정보처리방침을 정의할 수 있습니다.

상호작용 상태

:hover

:active

:focus, :focus-within, :focus-visible

:target

이전 주

:link

:visited

순서가 중요

양식 상태

:disabled 및 :enabled

:checked 및 :indeterminate

:placeholder-shown

유효성 검사 상태

색인, 순서, 어커런스를 기준으로 요소 선택

:first-child 및 :last-child

:only-child

:first-of-type 및 :last-of-type

:nth-child 및 :nth-of-type

:only-of-type

빈 요소 찾기

:empty

여러 요소 찾기 및 제외

:is()

:not()

이해도 확인

`:hover`

`:active`

`:focus`, `:focus-within`, `:focus-visible`

`:target`

`:link`

`:visited`

`:disabled` 및 `:enabled`

`:checked` 및 `:indeterminate`

`:placeholder-shown`

`:first-child` 및 `:last-child`

`:only-child`

`:first-of-type` 및 `:last-of-type`

`:nth-child` 및 `:nth-of-type`

`:only-of-type`

`:empty`

`:is()`

`:not()`