[html/css] 가상요소 ::before, ::after 쉽게 이해하기

​

 

CSS 처음 배우시는 분들께 가상요소는 다소 어려운 개념입니다. 중급자들 과정에서 배우는 것이 적당하지만, CSS에서 자주 사용되는 트렌드이기 때문에 간단한 개념과 활용법 정도는 알아두시는게 좋습니다.

 

📌1. 가상요소 ::before과 ::after

 

CSS로 선택한 대상 HTML요소 앞이나 뒤에 새로운 요소를 추가 할 수 있는 선택자입니다.

 

가상요소는 페이지 안에 실제로 존재하는 것은 아니지만, 기존 태그 요소의 앞이나 뒤쪽에 새로운 요소가 '있는 것처럼' 사용 할 수 있어서 자주 사용됩니다. 특히 실무에서 고급 CSS 작성 기법으로 활용도가 높고, 자바스트립트로만 구현할 수 있는 HTML요소의 이동 효과를 CSS로 비슷하게 만들어 볼 수 있다는 점에서 아주 유용하게 쓰입니다.

 

간단히 아이콘을 추가하거나, 그림자 등의 효과를 줄 때 사용해 볼 수 있습니다.

 

1. 사용법

.클래스명 태그명::before
.클래스명 태그명::after

 

2. 사용 예시

 

예를 들어 CSS style태그 안에 아래와 같이 가상요소를 정의하고 HTML코드를 작성해 줬다면

.title p::before {
    content: '- ';
    color: rgb(255, 0, 0);
}

<div class="title">
    <p>목차1</p>
    <p>목차2</p>
</div>

 

웹 브라우저에서는 각  p태그의 문단 앞에 빨간색 - 가 추가되어 보이게 됩니다. 

 

[::before]

반대로 ::after 가상요소를 사용하면?

.title p::after {
    content: '- ';
    color: rgb(255, 0, 0);
}

 

 

[::after]

---

 

📌2. 가상요소 ::first-letter, ::first-line

 

텍스트 내용의 일부를 선택하는 가상요소 선택자입니다. 일반적으로 CSS 선택자의 최소 기본 선택 단위는 요소입니다. 하지만 이 선택자를 사용하면 문단의 첫 글자가 첫 줄만을 선택할 수 있습니다. 

1. 사용법

.클래스명 태그명::first-letter
.클래스명 태그명::first-line

 

2. 사용 예시

 

예를 들어 아래처럼 코드를 작성해 주면

 

.title p::first-letter {
    font-size: 60px;
    color: blue;
}

<div class="title">
    <p>내용1</p>
    <p>내용2</p>
</div>

 

웹 브라우저에서는 각  p태그의 문단 앞에 빨간색 - 가 추가되어 보이게 됩니다. 

3. 첫 줄의 기준

웹 브라우저 화면에 보이는 첫 줄

 

화면 레이아웃 배치나 글자 크기에 따라 한 줄로 입력된 내용이 여러 줄로 늘어날 수 있죠. 같은 내용이라도 줄 수가 달라지게 되고, 달라지는 줄 수에 따라 화면에 실제로 표시된 첫 줄이 가상 선택자가 선택하는 범위가 됩니다. 즉, 가상요소 선택자는 태그로 지정된 범위를 고정적으로 가리키는 것이 아니라, 화면 레이아웃에 따라 변하는 가변요소입니다.