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

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

유사 클래스
bookmark_border 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

CSS 팟캐스트 - 015: 가상 클래스

이메일 가입 양식이 있고 잘못된 이메일 주소가 포함된 경우 이메일 양식 필드에 빨간색 테두리가 표시되도록 하려고 합니다. 그 방법은 무엇일까요? 브라우저에서 제공하는 여러 가상 클래스 중 하나인 :invalid CSS 가상 클래스를 사용할 수 있습니다.

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

이전 모듈에서 자세히 알아볼 수 있는 의사 요소와 달리 의사 클래스는 요소의 일부를 일반적으로 스타일 지정하는 대신 요소가 있을 수 있는 특정 상태에 연결됩니다.

상호작용 상태

다음 가상 클래스는 사용자가 페이지와 상호작용한 결과로 적용됩니다.

`:hover`

Browser Support

Source

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

`:active`

Browser Support

Source

이 상태는 클릭이 해제되기 전에 요소와 적극적으로 상호작용할 때(예: 클릭) 트리거됩니다. 마우스와 같은 포인팅 기기를 사용하는 경우 이 상태는 클릭이 시작되었지만 아직 해제되지 않은 상태입니다.

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

Browser Support

Source

<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`

Browser Support

Source

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

<article id="content">
    <!-- ... -->
</article>

URL에 #content가 포함된 경우 해당 요소에 스타일을 첨부할 수 있습니다.

#content:target {
    background: yellow;
}

이는 건너뛰기 링크를 사용하여 웹사이트의 기본 콘텐츠와 같이 특별히 연결되었을 수 있는 영역을 강조하는 데 유용합니다.

기록 상태

`:link`

Browser Support

Source

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

`:visited`

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

순서가 중요

:visited 스타일을 정의하는 경우 최소한 동일한 구체성을 가진 링크 의사 클래스로 재정의할 수 있습니다. 따라서 특정 순서(:link, :visited, :hover, :active)로 의사 클래스를 사용하여 링크의 스타일을 지정할 때는 LVHA 규칙을 사용하는 것이 좋습니다.

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

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

양식 상태

다음 의사 클래스는 상호작용 중에 이러한 요소가 있을 수 있는 다양한 상태에서 양식 요소를 선택할 수 있습니다.

`:disabled` 및 `:enabled`

Browser Support

Source

<button>와 같은 양식 요소가 브라우저에 의해 사용 중지된 경우 :disabled 의사 클래스를 사용하여 해당 상태에 연결할 수 있습니다. :enabled 의사 클래스는 반대 상태에 사용할 수 있지만 양식 요소도 기본적으로 :enabled이므로 이 의사 클래스를 사용할 일이 없을 수도 있습니다.

`:checked` 및 `:indeterminate`

Browser Support

Source

:checked 의사 클래스는 체크박스나 라디오 버튼과 같은 지원 양식 요소가 선택된 상태일 때 사용할 수 있습니다.

:checked 상태는 바이너리 (true 또는 false) 상태이지만 체크박스는 선택되지도 선택 해제되지도 않은 중간 상태가 있습니다. 이를 :indeterminate 상태라고 합니다.

이 상태의 예는 그룹의 모든 체크박스를 선택하는 '모두 선택' 컨트롤이 있는 경우입니다. 사용자가 이러한 체크박스 중 하나를 선택 해제하면 루트 체크박스가 더 이상 '모두' 선택을 나타내지 않으므로 불확정 상태로 설정해야 합니다.

<progress> 요소에는 스타일을 지정할 수 있는 불확실한 상태도 있습니다. 일반적인 사용 사례는 더 필요한 양을 알 수 없음을 나타내기 위해 줄무늬 모양을 지정하는 것입니다.

`:placeholder-shown`

Browser Support

Source

양식 필드에 placeholder 속성이 있고 값이 없는 경우 :placeholder-shown 의사 클래스를 사용하여 해당 상태에 스타일을 연결할 수 있습니다. placeholder가 있든 없든 필드에 콘텐츠가 있으면 이 상태가 더 이상 적용되지 않습니다.

검사 상태

Browser Support

Source

:valid, :invalid, :in-range과 같은 가상 클래스를 사용하여 HTML 양식 유효성 검사에 응답할 수 있습니다. :valid 및 :invalid 가상 클래스는 유효한 필드가 되려면 일치해야 하는 pattern가 있는 이메일 필드와 같은 컨텍스트에 유용합니다. 이 유효한 값 상태는 사용자에게 표시되어 다음 필드로 안전하게 이동할 수 있음을 알릴 수 있습니다.

:in-range 의사 클래스는 입력에 min 및 max가 있고(예: 숫자 입력) 값이 해당 범위 내에 있는 경우 사용할 수 있습니다.

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

인덱스, 순서, 발생을 기준으로 요소 선택

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

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

Browser Support

Source

첫 번째 또는 마지막 항목을 찾으려면 :first-child 및 :last-child을 사용하면 됩니다. 이러한 의사 클래스는 형제 요소 그룹의 첫 번째 또는 마지막 요소를 반환합니다.

`:only-child`

Browser Support

Source

:only-child 의사 클래스를 사용하여 형제가 없는 요소를 선택할 수도 있습니다.

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

Browser Support

Source

처음에는 :first-child 및 :last-child와 동일한 작업을 하는 것처럼 보이는 :first-of-type 및 :last-of-type를 선택할 수 있지만 다음 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`

Browser Support

Source

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

:nth-last-child() 및 :nth-last-of-type() 가상 클래스는 시작이 아닌 끝에서부터 계산합니다.

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

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

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

이 선택기는 3번째 항목부터 시작하여 3번째 항목마다 선택합니다. 이 표현식의 n는 색인이며 0부터 시작합니다. 3 (3n)은 색인에 곱할 값입니다.

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

:nth-child() 및 :nth-last-child()는 :nth-of-type()와 마찬가지로 선택자를 사용하여 일치 항목을 필터링할 수 있는 'of S' 구문도 지원합니다. li:nth-of-type(even)은 :nth-child(even of li)와 동일합니다. :nth-of-type를 사용하면 요소 유형 (예: li 또는 p)을 기준으로만 필터링할 수 있지만 'of S' 구문을 사용하면 모든 선택자를 기준으로 필터링할 수 있습니다.

표가 있는 경우 행을 하나씩 건너뛰어 줄무늬를 추가할 수 있습니다. tr:nth-child(even)를 사용하면 모든 다른 행을 타겟팅할 수 있지만 일부 행을 필터링하는 경우에는 작동하지 않습니다. hidden 속성을 적용하여 필터링을 구현하는 경우 선택기에 of :not([hidden])을 추가하여 짝수 행을 선택하기 전에 숨겨진 항목을 미리 필터링할 수 있습니다.

tr:nth-child(even of :not([hidden])){
  background: lightgrey;
}

이 nth-child 테스터 또는 이 수량 선택기 도구에서 이러한 선택기를 사용해 볼 수 있습니다.

`:only-of-type`

Browser Support

Source

마지막으로 :only-of-type를 사용하여 형제자매 그룹에서 특정 유형의 요소 하나만 찾을 수 있습니다. 이 기능은 항목이 하나만 있는 목록을 선택하거나 단락에서 굵게 표시된 요소를 찾으려는 경우에 유용합니다.

빈 요소 찾기

완전히 비어 있는 요소를 식별하는 것이 유용한 경우가 있으며, 이를 위한 의사 클래스도 있습니다.

`:empty`

Browser Support

Source

요소에 하위 요소가 없으면 :empty 가상 클래스가 적용됩니다. 하지만 자식은 HTML 요소나 텍스트 노드뿐만 아니라 공백일 수도 있습니다. 다음 HTML을 디버깅하면서 :empty이 작동하지 않는 이유를 궁금해할 때 혼동이 발생할 수 있습니다.

<div>
</div>

여는 <div>와 닫는 <div> 사이에 공백이 있어 :empty가 작동하지 않습니다.

: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()`

Browser Support

Source

.post 요소에서 모든 h2, li, img 하위 요소를 찾으려면 다음과 같은 선택기 목록을 작성하면 됩니다.

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

:is() 의사 클래스를 사용하면 더 간결한 버전을 작성할 수 있습니다.

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

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

`:not()`

Browser Support

Source

:not() 가상 클래스를 사용하여 항목을 제외할 수도 있습니다. 예를 들어 class 속성이 없는 모든 링크의 스타일을 지정하는 데 사용할 수 있습니다.

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

:not 의사 클래스를 사용하면 접근성을 개선할 수도 있습니다. 예를 들어 <img>에는 빈 값이라도 alt이 있어야 하므로 잘못된 이미지에 두꺼운 빨간색 윤곽선을 추가하는 CSS 규칙을 작성할 수 있습니다.

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

`:has()`

요소 내부에 포함된 내용을 기반으로 요소를 스타일 지정하려면 어떻게 해야 할까요? :has() 가상 클래스를 사용하여 이 작업을 수행할 수 있습니다. 예를 들어 아이콘이 포함된 버튼에 스타일을 적용할 수 있습니다.

 button:has(svg) {
  /* ... */
}

가장 기본적인 구성에서는 이전 예와 같이 :has()를 상위 선택기로 생각할 수 있습니다. 일치하는 상위 선택기를 다른 선택기와 결합하여 다른 요소를 타겟팅할 수도 있습니다.

form:has(input:valid) label {
  font-weight: bold;
}

form:has(input:valid) label::after {
  content: "✅";
}

이 예에서는 양식 입력에 valid 의사 클래스가 있는 경우 라벨 요소와 label::after 의사 요소에 스타일을 적용합니다.

:has() 가상 클래스는 다른 :has() 내에 중첩될 수 없지만 다른 가상 클래스와 결합될 수는 있습니다.

:is(h1, h2, h3):has(a) {
   /* ... */
}

선택기 목록은 허용되지 않으므로 목록의 선택기가 잘못되면 모든 스타일 규칙이 무시됩니다.

.my-element:has(img, ::before) {
  /* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */
}

이해도 확인

가상 클래스에 대한 지식 테스트

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

거짓

참

선택기에서 단일 또는 이중 :가 키 구분 문자로 사용되는지 확인합니다.

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

:not()

:empty

함수형 의사 클래스에는 매개변수를 허용한다는 것을 나타내기 위해 ()가 있습니다.

:target

함수형 의사 클래스에는 매개변수를 허용한다는 것을 나타내기 위해 ()가 있습니다.

:is()

다음 중 사용자 상호작용으로 인해 발생하는 가상 클래스는 무엇인가요?

:target

:hover

:focus-within

:press

:squeeze

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

:loading

:in-range

:enabled

:fresh

:indeterminate

:valid

:checked

유사 클래스 bookmark_borderbookmark 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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()

:has()

이해도 확인

유사 클래스
bookmark_border 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

`: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()`

`:has()`