CSS 팟캐스트 - 015: 가상 클래스
이메일 가입 양식이 있고
잘못된 이메일 주소가 포함된 경우 이메일 양식 필드에 빨간색 테두리를 지정하려 한다고 가정해 보겠습니다.
그 방법은 무엇일까요?
브라우저에서 제공하는 여러 의사 클래스 중 하나인 :invalid CSS 의사 클래스를 사용할 수 있습니다.
의사 클래스를 사용하면 상태 변경 및 외부 요소를 기반으로 스타일을 적용할 수 있습니다. 즉, 잘못된 이메일 주소와 같은 사용자 입력에 반응할 수 있습니다. 이러한 옵션은 selectors 모듈에서 다루며 이 모듈에서 더 자세히 안내합니다.
이전 모듈에서 자세히 알아볼 수 있는 의사 요소와 달리 의사 클래스는 요소의 일반적인 스타일 부분이 아니라 요소가 있을 수 있는 특정 상태에 연결됩니다.
대화형 상태
사용자와 페이지의 상호작용으로 인해 다음과 같은 가상 클래스가 적용됩니다.
:hover
사용자가 마우스나 트랙패드와 같은 포인팅 기기를 가지고 이 기기를 요소 위에 놓는 경우 :hover로 그 상태에 연결하여 스타일을 적용할 수 있습니다.
이는 요소와 상호작용할 수 있음을 암시하는 데 유용한 방법입니다.
:active
이 상태는 클릭이 해제되기 전에 클릭과 같이 요소와 활발히 상호작용하는 중일 때 트리거됩니다. 마우스와 같은 포인팅 기기를 사용하는 경우 이 상태는 클릭이 시작되고 아직 해제되지 않은 상태입니다.
:focus, :focus-within, :focus-visible
<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
: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 스타일을 정의하면 최소한 특이성이 동일한 링크 의사 클래스로 재정의할 수 있습니다.
따라서 특정 순서로 유사 클래스가 있는 링크의 스타일을 지정하는 데 LVHA 규칙을 사용하는 것이 좋습니다(:link, :visited, :hover, :active).
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-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
첫 번째와 마지막 하위 요소 및 유형도 제한되지 않습니다.
: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 모두에서 작동합니다.
이 n번째 하위 테스터 또는 수량 선택기 도구에서 이러한 종류의 선택기를 사용해 볼 수 있습니다.
:only-of-type
마지막으로 :only-of-type를 사용하여 동위 요소 그룹에서 특정 유형의 유일한 요소를 찾을 수 있습니다.
이는 항목이 하나만 있는 목록을 선택하거나 단락에서 굵게 표시된 요소만 찾으려는 경우에 유용합니다.
빈 요소 찾기
완전히 비어 있는 요소를 식별하는 것이 유용할 수 있으며 이를 위한 의사 클래스도 있습니다.
:empty
요소에 하위 요소가 없으면 :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()
.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;
}
학습 내용 확인하기
의사 클래스에 관한 지식 테스트
유사 클래스는 클래스가 요소에 동적으로 적용된 것처럼 작동하고, 의사 요소는 요소 자체에서 작동합니다.
:가 사용되는지 확인합니다.다음 중 기능적 의사 클래스인 것은 무엇인가요?
:is():target()가 있어, 이는 매개변수를 수락함을 나타냅니다.:empty()가 있어, 이는 매개변수를 수락함을 나타냅니다.:not()다음 중 사용자 상호작용으로 인한 가상 클래스는 무엇인가요?
:hover:press:squeeze:target:focus-within다음 중 <form> 상태 유사 클래스는 무엇인가요?
:enabled:fresh:indeterminate:checked:in-range:loading:valid