Minwoo Dev.

[HTML/CSS] 가상 요소(Pseudo-Element), ::before, ::after 본문

Web

[HTML/CSS] 가상 요소(Pseudo-Element), ::before, ::after

itisminu 2023. 12. 2. 15:12
728x90
반응형
SMALL

웹 사이트 클론 코딩을 공부하면서 웹페이지의 신기한 문법을 발견했다.

sytle 시트에 ::before, ::after 이라고 적혀있는 것을 확인했는데,  다른 CSS 코드와는 조금 다른 모습이었기 때문에 궁금해서 알아보았다.

 

 

 

가상 요소(Pseudo-elements)

CSS에서 기본적으로 스타일을 적용하면 선택ㅋ한 요소에 대하여 스타일을 적용한다.

따라서 그 모든 요소의 스타일을 변경하는 것이다.

하지만 가상 요소(Pseudo-elements)는 선택한 요소의 일부분에만 스타일을 적용할 수 있다.

 

 

가상 요소의 종류

  • ::before  요소의 시작부분에 콘텐츠를 추가한다.
  • ::after  요소의 끝부분에 콘텐츠를 추가한다.
  • ::first-line  요소의 텍스트에서 첫 줄에 스타일을 적용한다.
  • ::first-letter  요소의 첫 번재 글자에 스타일을 적용한다.
  • ::selection  요소의 텍스트에서 사용자에 의하여 선택(드래그)된 영역의 속성을 변경한다.
  • ::placeholoder Input필드에 힌트 텍스트에 스타일을 적용한다.

 

 

 

나는 이번에 ::before과 ::after 요소에 대하여 궁금증이 챙겨 알아본 것이므로, 이 두 종류에 대하여 더 설명을 해보겠다.

 

 

::before

선택한 요소 바로 앞에 가상 콘텐트를 넣는다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        .photobooth::before{
            content: "!!!밥먹기!!!";
        }
    </style>
</head>

<body>
    <div class="todo">
        <div class="photobooth">사진관 가서 사진찍기</div>
        <div class="cafe">카페가서 공부하기</div>
    </div>
</body>

 

위 코드의 출력 방식은 ::before를 사용하지 않는다면 

사진관 가서 사진찍기
카페가서 공부하기

 

가 될 것이다.

 

하지만 ::before을 사용해서 "!!!밥먹기!!!"라는 콘텐트를 추가해 주었으므로 photobooth 클래스의 앞부분에 추가될 것이다.

 

결과
사진관 가서 사진찍기
카페가서 공부하기

 

 

::after

선택한 요소 바로 뒤에 가상 콘텐트를 넣는다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        .photobooth::after{
            content: "!!!밥먹기!!!";
        }
    </style>
</head>

<body>
    <div class="todo">
        <div class="photobooth">사진관 가서 사진찍기</div>
        <div class="cafe">카페가서 공부하기</div>
    </div>
</body>

 

위 코드도 마찬가지로 ::after을 사용하지 않는다면

사진관 가서 사진찍기
카페가서 공부하기

 

하지만, ::after를 이용하여 photobooth 클래스에 "!!!밥먹기!!!" 를 부여했으므로 결과는 아래와 같을 것이다.

 

결과

 

사진관 가서 사진찍기
카페가서 공부하기

 

 

 

728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

[HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기  (0) 2023.12.09
[HTML/CSS] display : inline | inline-block | block | flex  (2) 2023.12.03
CSS 기본 속성  (2) 2023.12.02
[HTML/CSS] 이미지 사이즈 조정, 이미지 크기 설정, object-fit  (2) 2023.11.29
[HTML/CSS] 이미지 사이즈 조정, 이미지 크기 설정, position:absolute  (2) 2023.11.29
'Web' Related Articles more