의사 클래스와 의사 요소
=============

* 이전
* Overview: Building blocks
* 다음

다음으로 살펴볼 선택자의 종류는 **의사 클래스** 및 **의사 요소**라고 합니다. 여러 개가 있으며, 종종 매우 특정한 목적을 위해 사용됩니다. 사용 방법을 알게 되면 목록을 보고 달성하려는 작업에 적합한 것이 있는지 확인할 수 있습니다. 다시 한 번 각 선택자에 대한 관련 MDN 페이지는 브라우저 지원을 설명하는 데 도움이 됩니다.

|  |  |
| --- | --- |
| 전제 조건: | 
 기본 컴퓨터 활용 능력,
 설치된 기본 소프트웨어,
 파일 작업에 대한 기본 지식, HTML 기초 (
 HTML 입문 학습), CSS 작동 방식에 대한 아이디어 (
 CSS 첫 번째 단계 학습).
  |
| 목적: | 의사 클래스 및 의사 요소 선택자에 대해 알아봅시다. |

의사 클래스란 무엇입니까?
--------------

의사 클래스는 특정 상태에 있는 요소를 선택하는 선택자입니다. 해당 유형의 첫 번째 요소이거나 마우스 포인터로 가리키고 있습니다. 그들은 마치 문서의 일부에 클래스를 적용한 것처럼 행동하는 경향이 있으며, 종종 마크업에서 과도한 클래스를 줄이는 데 도움이 되고, 더 유연하고 유지관리 가능한 코드를 만들어 줄 수 있습니다.

의사 클래스는 콜론으로 시작하는 키워드입니다. 예를 들어, `:hover`는 의사 클래스입니다.

### 간단한 의사-클래스 예

간단한 예를 살펴보겠습니다. 기사의 첫 번째 단락을 더 크고 굵게 만들고 싶다면 아래 첫 번째 예와 같이 해당 단락에 클래스를 추가한 다음 해당 클래스에 CSS를 추가할 수 있습니다.

그러나, 이 방법은 유지하기가 귀찮을 수 있습니다 - 문서 상단에 새 단락이 추가되면 어떻게 될까요? 클래스를 새 단락으로 이동해야 합니다. 클래스를 추가하는 대신 `:first-child` 의사 클래스 선택자를 사용할 수 있습니다 - 이것은 *항상* 문서의 첫 번째 하위 요소를 대상으로 하며 더 이상 HTML을 편집할 필요가 없습니다(어쨌든 CMS에서 생성되기 때문에 항상 가능한 것은 아닙니다).

모든 의사 클래스는 이와 같은 방식으로 작동합니다. HTML에 클래스를 추가한 것처럼 동작하여 특정 상태에 있는 문서의 일부를 대상으로 합니다. MDN의 다른 예를 살펴보십시오.

* `:last-child`
* `:only-child` (en-US)
* `:invalid` (en-US)

**참고:** 앞에 요소 선택자가 없는 의사 클래스와 요소를 작성하는 것은 유효합니다. 위의 예에서 `:first-child`를 작성할 수 있으며 규칙은 단락 첫 번째 자식이 아니라(`:first-child`는 `*:first-child`와 동일합니다), `<article>` 요소의 첫 번째 자식인 *any* 요소에 적용됩니다. 그러나 일반적으로 그보다 더 많은 제어를 원하므로, 더 구체적이어야 합니다.

### 사용자-행동 유사 클래스

일부 의사 클래스는 사용자가 어떤 방식으로든 문서와 상호 작용할 때만 적용됩니다. **동적 의사 클래스**라고도 하는 이러한 **사용자 행동** 의사 클래스는 사용자가 요소와 상호 작용할 때 클래스가 요소에 추가된 것처럼 작동합니다. 예를 들면, 다음과 같습니다.

* `:hover` — mentioned above; this only applies if the user moves their pointer over an element, typically a link.
* `:focus` — only applies if the user focuses the element by clicking or using keyboard controls.

의사-요소란 무엇인가요?
-------------

의사 요소는 유사한 방식으로 동작합니다. 그러나 기존 요소에 클래스를 적용하는 것이 아니라 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동합니다.

의사 요소는 이중 콜론 `::`으로 시작합니다. `::before`는 의사 요소의 예입니다.

**참고:** 일부 초기 의사 요소는 단일 콜론 구문을 사용했기 때문에 코드나 예제에서 이를 볼 수 있습니다. 최신 브라우저는 이전 버전과의 호환성을 위해 단일 또는 이중 콜론 구문으로 초기 의사 요소를 지원합니다.

예를 들아, 단락의 첫 줄을 선택하려면 `<span>` 요소로 감싸고 요소 선택자를 사용할 수 있습니다. 그러나 래핑한 단어 수가 부모 요소의 너비보다 길거나 짧으면 실패합니다. 한 줄에 얼마나 많은 단어가 들어갈지 모르는 경향이 있고 - 화면 너비나 글꼴 크기가 변경되면 변경되고 - HTML을 추가하여 이를 강력하게 수행하는 것은 불가능합니다.

`::first-line` 의사 요소 선택자는 이 작업을 안정적으로 수행합니다. - 단어 수가 증가하거나 감소하더라도 여전히 첫 번째 행만 선택합니다.

마치 `<span>`이 첫 번째 서식이 지정된 줄을 마법처럼 감싸고 줄 길이가 변경될 때마다 업데이트되는 것처럼 작동합니다.

 You can see that this selects the first line of both paragraphs.
 이렇게 하면 두 단락의 첫 번째 줄이 선택되는 것을 볼 수 있습니다.

의사 클래스와 의사 요소들의 혼합
------------------

첫 번째 단락의 첫 줄을 굵게 만들고 싶다면 `:first-child` 및 `::first-line` 선택자를 함께 연결할 수 있습니다. 다음 CSS를 사용하도록 이전 라이브 예제를 편집해 보세요. `<article>` 요소 안에 있는 첫 번째 `<p>` 요소의 첫 번째 줄을 선택하려고 합니다.


```css
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}
```

::before 및 ::after로 콘텐츠 생성
--------------------------

CSS를 사용하여 문서에 콘텐츠를 삽입하기 위해 `content` 속성과 함께 사용되는 몇 가지 특수 의사 요소가 있습니다.

이를 사용하여 아래의 실제 예와 같이 텍스트 문자열을 삽입할 수 있습니다. `content` 속성의 텍스트 값을 변경해고 출력에서 변경되는 것을 확인해보세요. 또한 `::before` 의사 요소를 `::after`로 변경하고 요소의 시작 부분 대신 끝에 삽입된 텍스트를 볼 수 있습니다.

CSS에서 텍스트 문자열을 삽입하는 것은 실제로 웹에서 매우 자주 수행하는 작업이 아닙니다. 해당 텍스트는 일부 스크린 리더에서 액세스할 수 없고 나중에 다른 사람이 찾아서 편집하기 어려울 수 있기 때문입니다.

이러한 의사 요소를 보다 효과적으로 사용하는 방법은 아이콘을 삽입하는 것입니다. 예를 들어 아래 예에 추가된 작은 화살표는 스크린 리더에서 읽지 않기를 바라는 시각적 표시기입니다.

이러한 의사 요소는 빈 문자열을 삽입하는 데 자주 사용되며, 그런 다음 페이지의 모든 요소처럼 스타일을 지정할 수 있습니다.

다음 예제에서는, `::before` 의사 요소를 사용하여 빈 문자열을 추가했습니다. 너비와 높이로 스타일을 지정할 수 있도록 이것을 `display: block`으로 설정했습니다. 그런 다음 CSS를 사용하여 다른 요소처럼 스타일을 지정합니다. CSS를 가지고 놀면서 모양과 작동 방식을 변경할 수 있습니다.

`content` 속성과 함께 `::before` 및 `::after` 의사 요소를 사용하는 것을 CSS에서는 "생성된 콘텐츠"라고 하며, 이 기술이 다양한 작업에 사용되는 것을 자주 볼 수 있습니다. 좋은 예는 CSS로 화살표를 생성하는 데 도움이 되는 CSS Arrow Please 사이트입니다. 화살표를 만들 때 CSS를 보면 `::before` (en-US) 및 `::after` 의사 요소가 사용 중인 것을 볼 수 있습니다. 이러한 선택자를 볼 때마다 `content` 속성을 살펴보고 HTML 요소에 추가되는 항목을 확인하세요.

요약
--

이 기사에서는 특별한 유형의 선택자인 CSS 의사 클래스와 의사 요소를 소개했습니다.

의사 클래스를 사용하면 해당 상태에 대한 클래스를 DOM에 추가한 것처럼 특정 상태에 있는 요소를 대상으로 지정할 수 있습니다. 의사 요소는 DOM에 완전히 새로운 요소를 추가한 것처럼 작동하며 스타일을 지정할 수 있습니다. `::before` 및 `::after` 의사 요소를 사용하면 CSS를 사용하여 문서에 콘텐츠를 삽입할 수 있습니다.

다음 글에서는 combinators에 대해 알아보겠습니다.

See also
--------

* Pseudo-classes reference
* Pseudo-elements reference
* 이전
* Overview: Building blocks
* 다음