본문 바로가기
HTML/CSS문법

CSS pseudo-elements

by flycoding 2023. 8. 30.
반응형

CSS pseudo-elements란 무엇인가?

CSS 의사 요소는 요소의 지정된 부분을 스타일링하는 데 사용된다.

예를 들어, 다음과 같은 용도로 사용할 수 있다:

  • 요소의 첫 번째 문자 또는 줄 스타일 지정
  • 요소의 내용 앞 또는 뒤에 내용 삽입

 

구문

selector::pseudo-element {
  property: value;
}

 

::first-line pseudo-elemtn

::first-line pseudo class는 텍스트의 첫 번째 줄에 특수 스타일을 추가하는 데 사용된다.

다음 예제는 모든 <p> 요소에 텍스트의 첫 줄을 포맷한다:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>:: 첫 줄 의사 요소를 사용하여 텍스트의 첫 줄에 특수 효과를 추가할 수 있습니다. 텍스트가 더 많이, 더 많이, 더 많이, 더 많이, 더 많이, 더 많이, 더 많이.</p>

</body>
</html>

p::first-line는 p요소에 첫번째 라인에 색은 #ff0000(빨강색), font-variant:small-caps 스타일을 지정한다. 위의 코드를 실행한 결과 화면은 다음 그림과 같다.

CSS ::first-line pseudo-elements 예제

참고: ::첫 번째 줄 의사 요소는 블록 수준 요소에만 적용할 수 있다.

다음 속성은 ::첫 번째 줄 의사 요소에 적용된다:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

이중 콜론 표기법 - :: 첫 번째 줄 대 : 첫 번째 줄

이중 콜론은 CSS3에서 의사 요소에 대한 단일 콜론 표기를 대체했다. 이것은 의사 클래스와 의사 요소를 구별하기 위한 W3C의 시도였다.

단일 콜론 구문은 CSS2와 CSS1에서 의사 클래스와 의사 요소 모두에 사용되었다.

이전 버전과의 호환성을 위해 CSS2 및 CSS1 의사 요소에는 단일 콜론 구문이 허용된다.

 

::first-letter pseudo-element

::first-letter pseudo-element는 텍스트의 첫 글자에 특수한 스타일을 추가하는 데 사용된다.

다음 예제는 모든 <p> 요소에 텍스트의 첫 글자를 포맷한다:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>너는 ::first-line pseudo-element를 사용하여 텍스트의 첫 번째 문자에 특수 효과를 추가할 수 있습니다!</p>

</body>
</html>

p요소의 첫번째 글자를 색상은 #ff0000(빨강색), font-size:xx-large 스타일로 정하여 설정한 위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS first-letter pseudo-element 예제

 

참고: :first-letter pseudo-element는 블록 수준 요소에만 적용할 수 있다.

다음 속성은 ::첫 번째 문자 의사 요소에 적용된다:

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

pseudo-element와 HTML class

pseudo-element를 HTML 클래스와 결합할 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="intro">이것은 first-letter pseudo-element 예제입니다..</p>
<p>이것은 약간의 텍스트가 있는 단락입니다. 텍스트가 조금 더 많습니다.</p>

</body>
</html>

p요소에 intro 클래스는 ::first-letter pseudo-element로 색상은 빨강색 font-size:200%로 설정하였고, 위의 코그를 실행한 결과 화면은 아래 그림과 같다.

CSS first-letter pseudo class html class 조합 예제

 

다중 pseudo-elements

여러 pseudo-elements를 결합할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>우리는 ::first-letter와 ::first-line 의사 요소를 결합하여 텍스트의 첫 번째 줄과 첫 번째 줄에 특수 효과를 추가할 수 있습니다!</p>

</body>
</html>


다음 예제에서 단락의 첫 글자는 빨간색으로 xx 큰 글자 크기로 표시된다. 첫 줄의 나머지는 파란색으로 표시되고 작은 대문자로 표시됩니다. 단락의 나머지는 기본 글꼴 크기와 색상입니다:

CSS 다중 pseudo-element 활용 예제

 

CSS - ::before pseudo-elements

::before pseudo-elements를 사용하여 요소의 내용 앞에 일부 내용을 삽입할 수 있다.

다음 예제에서는 각 <h1> 요소의 내용 앞에 이미지를 삽입한다:

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>이것은 제목입니다.</h1>
<p>:: 의사 요소가 요소의 내용 앞에 내용을 삽입하기 전.</p>

<h1>This is a heading</h1>

</body>
</html>

h1 요소에 ::before pseudo-element의 컨텐츠는 smiley.gif 이미지를 앞에 삽입하며, 위의 코드를 실행한 결과는 아래 그림과 같다.

CSS ::before pseudo-element 예제

 

CSS - ::after pseudo-elements

::after pseudo-element는 요소의 내용 뒤에 일부 내용을 삽입하는 데 사용할 수 있다.

다음 예제에서는 각 <h1> 요소의 내용 뒤에 이미지를 삽입한다:

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>이것은 제목 H1 요소입니다.</h1>
<p>:: 의사 요소가 요소의 내용 앞에 내용을 삽입하기 전.</p>

<h1>이것은 제목 H1 요소입니다.</h1>

</body>
</html>

h1 요소에 ::after pseudo-element의 컨텐츠는 smiley.gif 이미지를 뒤에 삽입하며, 위의 코드를 실행한 결과는 아래 그림과 같다.

CSS ::after pseudo-element 예제

 

CSS - ::marker pseudo-elements

:::marker 유사 요소는 목록 항목의 마커를 선택한다.

다음 예제에서는 목록 항목의 마커를 스타일링한다:

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>

<ol>
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
</ol>

</body>
</html>

::marker 의 스타일은 색은 빨강색, font-size는 23px로 설정하여쏙, 위의 코드를 실행한 결과는 아래 그림과 같다. 

커피, 차, 우유 marker의 동그라미가 빨강색에 23px이며 숫자 1, 2, 3도 빨강색에 23px이다.

CSS ::marker pseudo-element 예제

 

CSS - ::selection pseudo-elements

::selection pseudo-elements는 사용자가 선택한 요소 부분과 일치한다.

다음 CSS 속성은 ::선택: 색상, 배경, 커서 및 개요에 적용할 수 있다.

다음 예제에서는 선택한 텍스트를 노란색 배경에 빨간색으로 표시합니다:

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>이 페이지에서 일부 텍스트 선택:</h1>

<p>이것은 p요소의 단락이다.</p>
<div>이것은 div 요소 내의 일부 텍스트이다.</div>

</body>
</html>

::selection 스타일은 글자색은 빨강, 배경색은 노랑색으로 지정하였고, '이것은 p요소의 단락이다'를 마우스로 선택하면 아래 그림과 같이 표시된다.

CSS ::selection pseudo-element 활용예제

 

모든 CSS pseudo-elements

선택자 예제 예제설명
::after p::after 각 <p> 요소의 내용 뒤에 삽입
::before p::before 각 <p> 요소의 내용 앞에 삽입
::first-letter p::first-letter 각 <p> 요소의 첫 글자를 선택합니다
::first-line p::first-line 각 <p> 요소의 첫 번째 줄을 선택합니다
::marker ::marker 목록 항목의 마커를 선택합니다
::selection ::selection 사용자가 선택한 요소의 부분을 선택합니다

 

지금까지 pseudo-element 관련된 내용을 살펴보았다.

모두 손으로, 눈으로, 머리로 꼭 실습하며 익히기를 바란다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS navigation bar  (0) 2023.09.01
CSS opacity/transparency  (0) 2023.08.31
CSS pseudo-classes  (0) 2023.08.29
CSS combination  (0) 2023.08.28
CSS 수평, 수직 정렬  (0) 2023.08.27

관련글

댓글

티스토리툴바