가상 요소

가상 요소

• 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드
• 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있음
• 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 하나의 하위 요소처럼 사용할 수 있음

가상 요소	설명
::before	요소 내용 앞쪽에 새 컨텐츠를 추가
::after	요소 내용 끝에 새 컨텐츠를 추가
::selection	마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택
::marker	목록 아이템 앞에 붙는 마커를 선택
::first-letter	현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택
::first-line	현재 웹 브라우저에 보이는 상태를 기준으로 텍스트 컨텐츠 첫 줄 내용을 선택

 

가상 요소 작성 방법

가상 요소는 키워드 앞에 콜론(:) 2개를 연달아 붙여 가상 요소임을 표시함

가상 클래스는 콜론(:) 1개로 표시함

[기본 사용 구문 구조]

선택자::가상요소{
	속성: 속성 값;
}

가상 요소는 선택된 요소에 의존적인 키워드

가상 요소를 적용하기 위해 CSS 선택자로 선택한 요소가 여러 개면 가상 요소로 적용하는 속성도 선택된 요소들에 모두 적용됨

 

 

content 속성과 속성 값

content속성은 ::before와 ::after 가상 요소에 사용할 수 있는 속성들 중 가장 중요한 역할을 하는 속성

가상 요소에서만 사용할 수 있음

::before와 ::after 가상 요소로 추가하는 콘텐츠의 내용에 해당하는 것을 표시하는 속성

content 속성 값 : 문자열, 이미지, HTML 속성, 변수, 함수 등 대부분의 콘텐츠를 사용할 수 있음

• 문자열 : content:’내용’과 같이 따옴표로 문자열 내용을 감싸서 표시함 (문자열은 일반 문자열 or 코드값 or 이모지도 가능)
• 이미지 : content: ‘url(이미지경로)’, <img>태그로 표시하는 이미지의 속성들을 똑같이 사용할 수 있음
• 선택자 : content:attr(속성명) 속성에 표시하는 속성은 선택자로 가져올 수도 있음

문자열
p::before {content: '';} /* 빈 컨텐츠 표시 */
p::before {content: '문단 맨 앞에 텍스트 표시';}
p::before {content: '👨🏽‍💻';} /* 이모지 */
p::before {content: '\\0244';} /* 캐릭터 코드 */

이미지
p::before{content:url(<http://naver.com>); margin-right:10px;}

선택자
p::before{
  content: attr(data-before-text);
  background-color: aqua;
  margin-right: 0.625rem;
  padding: 0.625rem;
}

 

가상 요소의 컨텐츠 표시 위치

가상 요소의 생성 위치 ::before 가상요소 → 요소의 콘텐츠 → ::after 가상요소 순서로!

그리고 선택된 요소의 태그 안에 가상 요소가 위치함

 

가상 요소에 동적 컨텐츠 표시하기

::before와 ::after 가상 요소 content 속성에는 HTML 태그의 속성 값을 가져오는 attr() 함수를 사용할 수 있음

특히 데이터 속성(”data-”)값을 가져올 수 있기 때문에, 동적인 내용들을 다루고 관리하기가 훨씬 쉬워짐

여러번 사용도 가능!