CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드
요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 한다.
"::before", "::after" 2개만 새 컨텐츠를 추가하는 가상 요소이고, 나머지 4개는 콘텐츠의 특정 부분을 선택하는 가상 요소이다.
"::before", "::after" 가상 요소는 HTML 태그나 자바스크립트 없이도 HTML 페이지 안에 콘텐츠, 또는 디자인 요소를 추가할 수 있는 특별한 기능을 한다.
(CSS로 HTML 컨텐츠를 변경할 수 있는 몇 안 되는 중요한 키워드)
content 속성 값에는 문자열, 이미지, HTML 속성, 변수, 함수 등 CSS로 표현할 수 있는 대부분의 콘텐츠를 사용할 수 있다.
그리고 가상요소는 기본적으로 inline 요소이므로 특정 영역을 차지하고싶다면 display: block; 을 사용해야한다.
attr() 함수
::before와 ::after 가상 요소 content 속성에는 HTML 태그의 속성 값을 가져오는 attr() 함수를 사용할 수 있다.
특히 데이터 속성("data-") 값을 가져올 수 있기 때문에 콘텐츠에 표시하는 동적인 내용들을 다루고 관리하기가 훨씬 쉬워진다!!
attr() 함수는 하나의 컨텐츠 속성에 여러 번 사용할 수 있다.
<p class="eventnotice" data-startday="2021-08-16" data-endday="2021-09-05"></p>p.eventnotice::before {
content: "이벤트 기간은 " attr(data-startday) "일부터 " attr(data-endday) "까지입니다.";
padding: 0.5em 2em;
border-radius: 1em;
background-color: #f0f0f0;
border: 1px solid #a22;
}
이와 같이 사용할 수 있다.
주로 hover시 텍스트 박스를 띄우거나, 제목 엘리먼트 앞에 * 이나 # 같은 표시, 혹은 input이나 label을 스타일링 하기에 좋다!!!!!
