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 {}
양식 상태
다음 의사 클래스는 양식 요소를 선택할 수 있습니다. 다양한 상태로 표현됩니다.
: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;
}
이해도 확인
유사 클래스에 관한 지식 테스트
의사 클래스는 클래스가 요소에 동적으로 적용된 것처럼 작동하는 반면 의사 요소는 요소 자체에서 작동합니다.
다음 중 기능 유사 클래스는 무엇인가요?
:empty
:is()
:target
:not()
다음 중 사용자 상호작용으로 인한 유사 클래스는 무엇인가요?
:hover
:press
:target
:focus-within
:squeeze
다음 중 <form>
상태 유사 클래스는 무엇인가요?
:indeterminate
:enabled
:fresh
:valid
:loading
:checked
:in-range