CSS 가상 요소 before, after 의미
- 웹 언어 배우기/CSS
- 2020. 5. 29. 07:00
가상 요소
CSS에서 제공되는 가상 요소 중 before 요소와 after 요소를 사용하면 HTML에서 사용하지 않아도 페이지에 내용을 삽입할 수 있습니다. 흔히 사용하는 곳에는 메뉴에서 선을 표시하거나 생성된 콘텐츠가 요소 콘텐츠보다 앞에 혹은 뒤에 위치하기를 원할 때 사용합니다.
사용법
가상 요소를 사용하기 위해서는 필수로 있어야 하는 것이 content입니다. 이것은 문자열, 이미지, 카운터, 공백을 입력할 수 있지만, HTML 코드는 입력할 수 없습니다. 다음의 예를 살펴보겠습니다.
See the Pen pseudo element, ::before, ::after by Cho-YoungHo (@choyoungho-web) on CodePen.
문자열의 경우 텍스트를 기준으로 앞에서 나타나게 하려면 '::before'를 뒤에서 나타나게 하려면 '::after'를 사용하면 됩니다. content에는 사용할 문자를 입력하면 됩니다.
div::before{
content:url("path/to/image.png");
}
백그라운드 형태로 삽입한 이미지를 그대로 입력되어 크기를 조정할 수 없습니다. 다만 크기를 조정하기 위해서는 content를 공백으로 하고 background를 삽입하는 방법이 있습니다. 위 예제를 참고하시기 바랍니다.
이외에도 first-letter, selection, backdrop, placeholder, marker 등이 있습니다.
