CSS 팟캐스트 - 015: 가상 클래스
이메일 가입 양식이 있고 이메일 양식 필드에 잘못된 이메일 주소가 포함된 경우 빨간색 테두리가 표시되도록 하려면 어떻게 해야 하나요?
그 방법은 무엇일까요?
브라우저에서 제공하는 여러 가상 클래스 중 하나인 :invalid
CSS 가상 클래스를 사용할 수 있습니다.
가상 클래스를 사용하면 상태 변경 및 외부 요인에 따라 스타일을 적용할 수 있습니다. 즉, 디자인이 잘못된 이메일 주소와 같은 사용자 입력에 반응할 수 있습니다. 이러한 선택기는 선택자 모듈에서 다루며 이 모듈에서는 선택기에 대해 자세히 설명합니다.
이전 모듈에서 자세히 알아볼 수 있는 가상 요소와 달리 가상 클래스는 요소의 일부에 일반적으로 스타일을 지정하는 대신 요소가 있을 수 있는 특정 상태에 연결됩니다.
대화형 상태
다음 가상 클래스는 사용자가 페이지와 상호작용할 때 적용됩니다.
:hover
사용자가 마우스나 트랙패드와 같은 포인팅 기기를 가지고 있고 이를 요소 위에 배치하는 경우 :hover
를 사용하여 해당 상태에 후크를 걸어 스타일을 적용할 수 있습니다.
이는 요소와 상호작용할 수 있음을 암시하는 데 유용한 방법입니다.
:active
이 상태는 클릭이 해제되기 전에 클릭과 같이 요소와 적극적으로 상호작용할 때 트리거됩니다. 마우스와 같은 포인팅 기기가 사용되는 경우 이 상태는 클릭이 시작되었으나 아직 해제되지 않은 상태입니다.
:focus
, :focus-within
, :focus-visible
요소가 포커스를 받을 수 있는 경우(예: <button>
) :focus
가상 클래스로 해당 상태에 반응할 수 있습니다.
:focus-within
를 사용하여 요소의 하위 요소가 포커스를 받을 때도 반응할 수 있습니다.
버튼과 같이 포커스를 받을 수 있는 요소는 클릭되었을 때도 포커스가 있을 때 포커스 링을 표시합니다. 이러한 상황에서 개발자는 다음 CSS를 적용합니다.
button:focus {
outline: none;
}
이 CSS는 요소가 포커스를 받을 때 기본 브라우저 포커스 링을 삭제하므로 키보드로 웹페이지를 탐색하는 사용자에게 접근성 문제가 발생합니다.
포커스 스타일이 없으면 탭 키를 사용할 때 포커스가 현재 어디에 있는지 추적할 수 없습니다.
:focus-visible
를 사용하면 요소가 키보드를 통해 포커스를 수신할 때 포커스 스타일을 표시하고 outline: none
규칙을 사용하여 포인터 기기가 요소와 상호작용할 때 이를 방지할 수 있습니다.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target
가상 클래스는 URL 프래그먼트와 일치하는 id
가 있는 요소를 선택합니다.
다음과 같은 HTML이 있다고 가정해 보겠습니다.
<article id="content">
…
</article>
URL에 #content
가 포함된 경우 해당 요소에 스타일을 연결할 수 있습니다.
#content:target {
background: yellow;
}
이 기능은 건너뛰기 링크를 통해 웹사이트의 기본 콘텐츠와 같이 특정 링크로 연결되었을 수 있는 영역을 강조 표시하는 데 유용합니다.
이전 상태
:link
: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 {}
양식 상태
다음의 가상 클래스는 양식 요소와 상호작용하는 동안 양식 요소가 있을 수 있는 다양한 상태에서 양식 요소를 선택할 수 있습니다.
:disabled
및 :enabled
<button>
와 같은 양식 요소가 브라우저에서 사용 중지된 경우 :disabled
가상 클래스로 해당 상태를 후크할 수 있습니다.
:enabled
가상 클래스는 반대 상태에 사용할 수 있지만 양식 요소도 기본적으로 :enabled
이므로 이 가상 클래스를 사용하지 않을 수도 있습니다.
:checked
및 :indeterminate
:checked
가상 클래스는 체크박스나 라디오 버튼과 같은 지원 양식 요소가 선택된 상태일 때 사용할 수 있습니다.
:checked
상태는 바이너리(true 또는 false) 상태이지만 체크박스는 선택 또는 선택 해제되지 않은 중간 상태가 있습니다.
이를 :indeterminate
상태라고 합니다.
이 상태의 예는 그룹의 모든 체크박스를 선택하는 '모두 선택' 컨트롤이 있는 경우입니다. 그런 다음 사용자가 이러한 체크박스 중 하나를 선택 해제하면 루트 체크박스가 더 이상 선택된 '모두'를 나타내지 않으므로 불확정 상태로 전환해야 합니다.
<progress>
요소에는 스타일을 지정할 수 있는 불확정 상태도 있습니다.
일반적인 사용 사례는 필요한 양을 알 수 없음을 나타내기 위해 줄무늬 모양을 사용하는 것입니다.
:placeholder-shown
양식 필드에 placeholder
속성이 있고 값이 없는 경우 :placeholder-shown
가상 클래스를 사용하여 해당 상태에 스타일을 연결할 수 있습니다.
필드에 콘텐츠가 있으면 placeholder
가 있든 없든 이 상태가 더 이상 적용되지 않습니다.
유효성 검사 상태
:valid
, :invalid
, :in-range
와 같은 가상 클래스를 사용하여 HTML 양식 유효성 검사에 응답할 수 있습니다.
:valid
및 :invalid
가상 클래스는 유효한 필드가 되도록 일치시켜야 하는 pattern
가 있는 이메일 필드와 같은 컨텍스트에 유용합니다.
이 유효한 값 상태는 사용자에게 표시되어 사용자가 다음 입력란으로 안전하게 이동할 수 있음을 알 수 있도록 합니다.
:in-range
가상 클래스는 입력에 min
및 max
가 있는 경우(예: 숫자 입력) 및 값이 해당 범위 내에 있는 경우에 사용할 수 있습니다.
HTML 양식을 사용하면 required
속성으로 필드가 필수인지 확인할 수 있습니다.
필수 입력란에는 :required
가상 클래스를 사용할 수 있습니다.
필수가 아닌 필드는 :optional
가상 클래스로 선택할 수 있습니다.
지수, 순서, 발생 횟수별로 요소 선택
문서 내 위치에 따라 항목을 선택하는 가상 클래스 그룹이 있습니다.
:first-child
및 :last-child
첫 번째 또는 마지막 항목을 찾으려면 :first-child
및 :last-child
를 사용하면 됩니다.
이러한 가상 클래스는 형제 요소 그룹의 첫 번째 요소 또는 마지막 요소를 반환합니다.
:only-child
:only-child
가상 클래스를 사용하여 형제가 없는 요소를 선택할 수도 있습니다.
:first-of-type
및 :last-of-type
처음에는 :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
첫 번째 및 마지막 하위 요소와 유형으로 제한되지도 않습니다.
:nth-child
및 :nth-of-type
가상 클래스를 사용하면 특정 색인에 있는 요소를 지정할 수 있습니다.
CSS 선택자의 색인은 1부터 시작합니다.
이러한 가상 클래스에 색인 외의 값도 전달할 수 있습니다.
짝수 요소를 모두 선택하려면 :nth-child(even)
를 사용하면 됩니다.
An+B 마이크로 문법을 사용하여 일정한 간격으로 항목을 찾는 더 복잡한 선택기를 만들 수도 있습니다.
li:nth-child(3n+3) {
background: yellow;
}
이 선택기는 항목 3부터 시작하여 3개마다 한 개씩 항목을 선택합니다.
이 표현식에서 n
는 색인으로, 0부터 시작하며 3 (3n
)은 이 색인에 곱하는 값입니다.
<li>
항목이 7개 있다고 가정해 보겠습니다.
3n+3
가 (3 * 0) + 3
로 변환되므로 선택되는 첫 번째 항목은 3입니다.
이제 n
가 1
로 증가했으므로 다음 반복에서는 항목 6((3 * 1) + 3)
)을 선택합니다.
이 표현식은 :nth-child
및 :nth-of-type
모두에 적용됩니다.
이 nth-child 테스터 또는 이 수량 선택 도구에서 이러한 유형의 선택기를 사용해 볼 수 있습니다.
:only-of-type
마지막으로 :only-of-type
를 사용하여 형제 그룹에서 특정 유형의 유일한 요소를 찾을 수 있습니다.
이 방법은 항목이 하나만 있는 목록을 선택하거나 단락에서 유일하게 굵게 표시된 요소를 찾으려는 경우에 유용합니다.
빈 요소 찾기
완전히 비어 있는 요소를 식별하는 것이 유용할 때가 있으며, 이를 위한 가상 클래스도 있습니다.
:empty
요소에 하위 요소가 없는 경우 :empty
가상 클래스가 적용됩니다.
그러나 하위 요소는 HTML 요소나 텍스트 노드만이 아닙니다. 공백일 수도 있습니다. 다음 HTML을 디버그하고 :empty
에서 작동하지 않는 이유를 궁금해할 때 혼란스러울 수 있습니다.
<div>
</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()
.post
요소에서 모든 h2
, li
, img
하위 요소를 찾으려면 다음과 같은 선택기 목록을 작성하는 것이 좋습니다.
.post h2,
.post li,
.post img {
…
}
:is()
가상 클래스를 사용하면 더 컴팩트한 버전을 작성할 수 있습니다.
.post :is(h2, li, img) {
…
}
:is
가상 클래스는 선택자 목록보다 컴팩트할 뿐만 아니라 더 관대합니다.
대부분의 경우 선택기 목록에 오류가 있거나 지원되지 않는 선택기가 있으면 전체 선택기 목록이 더 이상 작동하지 않습니다.
:is
가상 클래스에 전달된 선택기에 오류가 있으면 잘못된 선택기는 무시되고 유효한 선택기는 사용됩니다.
:not()
:not()
가상 클래스를 사용하여 항목을 제외할 수도 있습니다.
예를 들어 이를 사용하여 class
속성이 없는 모든 링크의 스타일을 지정할 수 있습니다.
a:not([class]) {
color: blue;
}
:not
가상 클래스를 사용하면 접근성을 개선하는 데도 도움이 됩니다.
예를 들어 <img>
에는 빈 값이라도 alt
이 있어야 하므로 잘못된 이미지에 두꺼운 빨간색 윤곽선을 추가하는 CSS 규칙을 작성할 수 있습니다.
img:not([alt]) {
outline: 10px red;
}
이해도 확인
가상 클래스에 대한 지식 테스트
가상 클래스는 클래스가 요소에 동적으로 적용된 것처럼 작동하지만 가상 요소는 요소 자체에 작동합니다.
다음 중 기능적 가상 클래스는 무엇인가요?
:not()
:is()
:target
:empty
다음 가상 클래스 중 사용자 상호작용으로 인해 적용되는 것은 무엇인가요?
:target
:squeeze
:focus-within
:press
:hover
다음 중 <form>
상태 가상 클래스는 무엇인가요?
:checked
:fresh
:valid
:enabled
:in-range
:indeterminate
:loading