CSS의 ::before/::after 의사 요소 - 완벽한 가이드

CSS 의 의사 요소 `::before` 와 `::after` 는 선택된 요소의 앞이나 뒤에 콘텐츠를 삽입합니다. 렌더링되려면 `content` 속성이 필요하며, 문자열, 이미지 URL 또는 유니코드 문자를 허용합니다. 의사 요소는 DOM에 추가된 것처럼 동작하지만 실제로는 DOM의 일부가 아니므로 특정 요소 부분의 스타일을 지정할 수 있습니다. 부모 요소 내에 나타나므로 컨테이너 요소에 적합하며, 컨테이너로 감싸지 않은 빈 요소에는 적합하지 않습니다. 이들은 호버 효과 및 미적 개선에 유용합니다. `attr()` 함수는 이러한 의사 요소의 콘텐츠 내에서 사용할 요소의 속성 값을 가져옵니다. 겹칠 경우, 기본적으로 `::after` 가 위에 있지만 `z-index` 를 사용하여 변경할 수 있습니다. 이 요소들은 DOM 트리의 일부가 아니며 접근성 문제로 인해 중요한 콘텐츠에는 사용해서는 안 됩니다. 기본적으로 인라인 요소입니다.