가상 요소 ::before, ::after

CSS의 가상 요소 중 ::before와 ::after는 지정한 요소의 앞이나 뒤에 텍스트나 이미지 등을 삽입할 수도 있고, 스타일을 추가할 수도 있습니다. HTML 태그 마크업(markup)은 웹 문서의 내용을 작성할 때 사용하는데, 예를 들어 버튼 앞에 붙이는 아이콘은 굳이 마크업을 사용할 필요는 없죠. 단순히 눈에 보이는(visiblie) 효과를 위해서 사용하니까요. 그래서 이런 요소들은 마크업 대신 ::before 가상 요소를 사용해서  삽입하는 경우가 많습니다.

 

::before나 ::after 요소를 사용할 때는 다음과 같은 형식을 사용합니다. 이 때 content 속성은 내용의 앞이나 뒤에 추가할 내용을 가리키는데, 따로 추가할 내용이 없다면 content:""; 처럼 빈 문자열을 사용합니다. content 속성은 꼭 들어가야 한다는 뜻이죠.

 

::before {
   content: "내용";
   (기타 css 속성)
}

예를 들어, 다음 소스에서는 p 요소에 ::before 요소와 ::after 요소를 사용했는데, ::before 요소는 p 내용("간단한 텍스트") 앞에 적용되고, ::after 요소는 p 내용 다음에 적용됩니다.

 

 

See the Pen pseudo elements 1 by Kyunghee Ko (@funnycom) on CodePen.

 

 

가상 요소에서 특수 기호 사용하기

 

::before나 ::after의 content에서 특수 기호를 삽입할 수 있습니다. 특수 기호는 유니코드를 사용하는데, https://unicode-table.com/ 에서 다양한 유니코드를 검색할 수 있습니다.

예를 들어, "mail"로 검색하면 관련된 아이콘들이 나타나는데 각 아이콘을 클릭하면 해당 아이콘의 유니코드 값이 나열되어 있습니다. CSS의 가상 요소에서 사용할 때는 CSS Code에 있는 값을 사용하면 됩니다. 

 

 

 

예를 들어, 인용문을 삽입할 때 기본적으로 다른 텍스트보다 들여써지지만, 내용 앞 뒤에 따옴표를 붙이면 시각적으로 인용문이라는 걸 쉽게 드러낼 수 있습니다.

 

See the Pen pseudo elements 3 by Kyunghee Ko (@funnycom) on CodePen.