가상 요소 선택자는 CSS에서 실제로 존재하지 않는 요소를 만들거나 범위를 만들어서 스타일을 적용할 때 사용하는 선택자 종류 중 하나다.
쉽게 말해, html에는 존재하지 않지만(코드상으로 실제 존재 X) CSS를 통해 가상으로 만들어 표현하고자 할 때 사용하는 선택자라고 생각하면 된다.
🔗 사용하는 이유?
특정 요소들의 앞, 뒤로 텍스트나 문자, bar가 들어간다면 이를 html로 표현하기 위해서는 각각의 요소들마다 텍스트나 문자 혹은 bar을 형성할 div 등의 태그를 작성해야 한다.
물론, html로 코드를 작성해 표현하는 방법도 있지만 문제는 똑같은 코드가 계속해서 반복된다는 것이다. 같은 코드가 반복적으로 사용되면 html 코드 양이 길어져서 추후에 코드를 직관적으로 파악하기도 힘들고 이를 유지 및 보수하는데도 어려움이 생긴다.
따라서, 중복을 제거하기 위해 CSS의 가상 요소 선택자 중 ::before, ::after을 사용해 CSS 코드로서 한 번에 표현해 줄 수 있다.
🔗 사용 방법
<body>
<h1>CSS Selector</h1>
<p>font-size</p>
<p>font-weight</p>
<p>color</p>
<p>width</p>
</body>p::before {
content: "CSS : ";
color: lightcoral;
font-weight: 700;
}
위의 코드같이, ::before, ::after을 넣고자 하는 요소를 선택하고 해당 요소의 앞, 뒤로 들어갈 content 속성값을 지정하면 된다.
content 속성값으로는 위와 같이 텍스트뿐만 아니라 이미지, 변수, 함수 HTML 속성도 가능하다.
특히, 이미지를 넣고자 할 때는 url(" ")을 통해 이미지 경로를 표시해 줘야 한다.
p::before {
content: url("https://이미지 주소");
}가상 요소 선택자로 추가된 이미지 역시 html 태그의 img처럼 이미지의 크기나 위치, 배치 등의 속성을 통해 제어를 할 수 있다.
🔗 가상 클래스 선택자 + 가상 요소 선택자
가상 요소 선택자와 가상 클래스 선택자를 함께 사용하는 경우가 종종 있다.
예를 들어, 특정 요소에 :hover가 되었을 때 가상 요소 선택자의 텍스트가 옆에 나오도록 하는 등의 사용자의 행위에 따라 가상 요소 선택자를 사용하게 되는 경우다.
p:hover::after {
content: "";
height: 3px;
width: 100%;
display: block;
background-color: lightblue;
margin-top: 10px;
}이와 같이, 요소에 hover가 되었을 때 가상 요소가 나타나도록 하는 방법은 쉽다.
하지만, 여기서 중요한 점은 만약 가상 요소를 포함하는 요소가 아닌 다른 요소에 가상 클래스를 설정했을 때의 상황이다.
.title:hover p::after {
content: "";
height: 3px;
width: 100%;
display: block;
background-color: lightblue;
margin-top: 10px;
}위의 코드는 title이라는 className을 가진 요소에 hover가 되었을 때 p 태그에 가상 요소가 나타나도록 작성한 것이다.
p 태그는 title이라는 className을 가진 요소의 자식 요소 중 하나이기 때문에 다음과 같은 동작이 올바르게 실행될 수 있다.
하지만, 가상 요소가 나타나는 대상이 가상 클래스를 부여한 요소의 자식 요소가 아니라면 다음의 동작은 제대로 실행될 수가 없는 것이다.
즉, 서로가 상호작용이 가능한 요소인지를 파악하는 것이 중요하다!
