TIL] ::before 과 ::after

가상 요소 ::before, ::after

가상 요소란 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다.

가상 요소는 가상 클래스처럼 선택자에 추가되고 존재하지 않는 요소를

존재하는 것 처럼 부여하여 특정 부분 선택이 가능하다.

::before은 실제 내용 바로 앞에서 생성되는 자식 요소를 뜻하고

::after은 실제 내용 바로 뒤에서 생성되는 자식요소를 뜻한다.

또한 두가지를 사용해야 할 땐 content 속성이 필요하다.

---

content=""

content는 ::before과 ::after와 함께 쓰이는 가짜 속성이다.

HTML 문서에 정보로 포함되지 않는 요소를 css에서 새롭게 생성해주기 때문이다.

content를 쓸 때 대표적으로 사용되는 속성들은 아래와 같다.

1. normal : 아무것도 표시하지 않는 기본 값
2. stirng : 문자열 생성
3. image : 이미지나 비디오를 불러올 수 있으나 크기 조절은 불가능하다.
4. counter : 순서를 매길 수 있다. (counter-increment, counter-reset과 함께 사용한다.)
5. none : 아무것도 표시하지 않는다.
6. attr : 해당속성의 속성 값을 표시한다.

content속성을 사용하여 표시한 내용은 선택하거나 복사 및 붙여 넣기를 할 수 없다.

실제로 마크업 된 정보가 아니기 때문이다.

---

사용처

보통 웹서핑을 하다보면 SALE이 글씨 옆에 붙어있는데 그것은 따로 선택이 안 되는 걸 종종 볼 수 있다.

문자의 앞쪽에 그런 content가 있는 경우 ::before이 쓰인 것이고

문자의 뒤쪽에 그런 content가 있는 경우 ::after에 쓰인 것이다.

---

나는 지금까지 웹서핑을 하면서 sale이나 이런 content가 쓰인 것을

웹서핑하면서 본적이 꽤 있는데 이게 아이콘인줄 알았다!

하지만 css에 대해 배우다 보니 이것이 아이콘이 아니란 것을 알았고

꽤나 큰 충격을 받았다!

프로그래밍의 공부는  끝이 없다고 하는 게 요즘 느껴진다.

양이 정말 방대하기 때문이다!

하지만 쓰이는 속성들 코드들은 여러가지 도구이고

그것을 활용해 코딩을 완성하면 작업물이 나온다는 게 너무 큰 성취감을 줘서

끝없이 배워도 재밌는 것 같다!

완성된 코드가 정상적으로 작동하지 않아서 몇시간을 내가 짠 코드를 살펴보고

결국 해답을 찾고 그 코드가 정상적으로 작동할 때 엄청난 성취감을 느끼는 것 같다!