CSS 가상-elements(페어요소)

CSS 가상-elements 페어요소는 선택자의 마지막에 추가된 키워드로, 선택된 요소의 특정 부분에 스타일을 변경할 수 있도록 합니다. 주의: 페어요소와 비교해 pseudo-classes(페어클래스)는 상태에 따라 요소 스타일을 변경할 수 있습니다.

CSS 페어요소는 문서 요소를 스타일화하는 방법으로, 이러한 요소는 문서 트리 내의 위치가 명확하게 정의되어 있지 않습니다.

페어요소는 무엇인가요

CSS 페어요소는 요소나 요소 부분의 스타일을 설정할 수 있으며, 요소에 아무런 ID나 클래스를 추가하지 않아도 됩니다. 단락의 첫 번째 글자에 스타일을 설정하여 글자 내리기 효과를 만들거나, 스타일 시트를 통해 요소 앞이나 뒤에 내용을 삽입하려는 경우 매우 유용합니다.

CSS3 페어요소에 대한 새로운 이중 두드러진 기호（::） 문법을 도입했습니다. 페어요소와 페어클래스를 구분하기 위해 새로운 문법은 다음과 같이 제공됩니다：

이들은 가장 많이 사용되는 페어요소들입니다：

::first-line 첫 번째 행 페어요소

이::first-line 페어요소는 텍스트의 첫 번째 행에 특별한 스타일을 추가합니다.

다음 예제에서 스타일 규칙은 단락의 첫 번째 행 텍스트의 형식을 설정합니다. 첫 번째 행의 길이는 브라우저 창 또는 포함된 요소의 크기에 따릅니다.

p::first-line　{
　　　　color:　#ff0000;
　　　　font-variant:　small-caps;
}

:: first-letter 페어요소

::first-letter 페어요소는 텍스트의 첫 번째 행의 첫 번째 글자에 특별한 스타일을 추가하는 데 사용됩니다. 다음 예제에서 스타일 규칙은 텍스트 단락의 첫 번째 글자 형식을 설정하고, 글자 내리기 효과를 만들어냅니다.

p::first-letter　{
　　　　color:　#ff0000;
　　　　font-size:　xx-large;
}

:: before와:: after 가상 요소

::before와::after 가상 요소는 요소의 내용 전이나 후에 생성된 내용을 삽입할 수 있습니다. content CSS 속성을 이러한 가상 요소와 결합하여 생성된 내용을 삽입합니다.

이는 페이지의 실제 표시를 가지지 않는 텍스트가 풍부한 요소를 더욱 장식하는 데 매우 유용합니다. 이러한 가상 요소를 사용하여 일반 문자열이나 이미지(예: 이미지)와 같은 객체를 삽입하거나 다른 자원을 삽입할 수 있습니다.

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

가상 요소와 CSS 클래스

일반적으로, 우리는 이러한 가상 요소를 사용하여 텍스트의 특정 구절 또는 다른블록 요소요소의 스타일. 그곳에서 가상 요소에 대해 클래스를 선언하면 작동합니다. 가상 요소는CSS 클래스결합하여 효과를 생성합니다, 특히 해당 클래스를 가진 요소에 대해.

다음 예제에서의 스타일 규칙은 class="article"를 가진 모든 단락의 첫 번째 글자를 녹색으로, 크기가 xx로 표시합니다-large。

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}