너와 나의 개발 고리

[CSS] CSS 가상 요소 선택자 사용(::before, ::after) 본문

CSS _HTML_JavaScript/CSS

[CSS] CSS 가상 요소 선택자 사용(::before, ::after)

Oli-Viaaaa 2023. 7. 21. 23:19

가상 요소 선택자는 HTML 문서에 명시적으로 작성된 구성 요소는 아니지만

마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법을 말한다.

 

앞에 :: 기호(콜론 2개)를 붙여서 사용하며, 기준 선택자와 함께 사용하는데

만약 기준 선택자를 생략하면 전체 선택자가 들어간 것으로 간주한다

형식)
	기준 선택지::가상 요소 선택자{/* CSS 코드 */}

 

여러 가상요소 선택자 속성이 있지만 자주 사용하는 주요 가상 요소 선택자는 아래와 같다

종류 설명
::befor 콘텐츠 앞의 공간을 선택한다.
::after 콘텐츠 뒤의 공간을 선택한다

 

::befor 선택자는 기분 선택자 요소 앞의 공간을 선택하고, ::after 선택자는 기준 선택자 요소 뒤의 공간을 선택한다.

 

아래의 예시를 보면 이해하기가 쉽다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      p::before{
        content: "🌟";
          color: red;
      }
      p::after{
        content: "🌙";
      }
    </style>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

위의 코드를 입력하면 아래와 같은 결과를 볼 수 있다.

코드를 실행하면 p태그의 콘텐츠 앞과 뒤에 마치 어떤 요소가 있는 것 처럼 선택하고

여기에 ㉮ content 속성으로 새로운 텍스트를 추가한다.

그래서 p 태그의 Hello 앞에는 🌟가, world 뒤에는 🌙가 추가 되었다.

 

<주석>

㉮ content 속성

: 가상 요소를 통해 콘텐츠를 동적으로 생성하거나 기존 요소의 콘텐츠를 변경하는데 사용되며

주로 ::before, ::after 선택자와 함께 사용할 수 있고 요소에 내용을 추가하거나 스타일을 적용하는데 유용하다.

 

content 속성의 값으로는 텍스트, 이미지, 카운터(Counter), 빈 문자열 등 다양한 유형의 데이터를 사용할 수 있다.

 

간단한 예시는 아래와 같다

/* 문자열 삽입 : custom-icon 클래스를 가진 요소의 앞에 🔥 이모지 추가 */
.custom-icon::before {
  content: "🔥";
}


/* 이미지 삽입 : custom-icon 클래스를 가진 요소 앞에 삽입 */
.custom-icon::before {
  content: url('icon.png');
}


/* 빈 콘텐츠 생성 :  empty-content 클래스를 가진 요소의 앞에 아무 내용도 추가하지 않음.
                    가상 요소를 사용하여 디자인 요소 만들때 유용*/
.empty-content::before {
  content: "";
}

/* 카운터 삽입 : <ol> 목록의 각 항목 앞에 순서를 나타내는 카운터가 추가*/
ol li::before {
  counter-increment: custom-counter;
  content: counter(custom-counter) ". ";
}

'CSS _HTML_JavaScript > CSS' 카테고리의 다른 글

[CSS] CSS 마무리 정리  (0) 2023.07.24
[CSS] CSS 가상 클래스 선택자 사용  (0) 2023.07.24
[CSS] CSS 조합 선택자 사용  (0) 2023.07.21
[CSS] CSS 기본 선택자 사용  (0) 2023.07.21
[CSS] CSS 적용하기  (0) 2023.07.20
'CSS _HTML_JavaScript/CSS' Related Articles more