실무에서 유용한 CSS 패턴 알아보기 - 가상 요소

2024/03/03

안녕하세요 lika-7 입니다.

이번시간에는 가상 요소를 알아보겠습니다.

가상요소란

• 가상 요소는 특정 요소에 추가하여 스타일을 적용할 때 사용합니다
• 가상 요소는 존재하지 않는 요소를 존재하는 것처럼 해줌으로 문서의 특정 부분을 선택 할 수 있습니다
• 실무에서는 ::before, ::atfer를 가장 많이 사용합니다.

<button class="coupon" data-username="사용자 이름"></button>
<style>
  button.coupon::before{
    display: block;
    content: attr(data-username)"을 위한 쿠폰";
    padding: 10px 20px;
    color: #ff8822;
  }
</style>

• 위의 예제는 content 속성에 attr() 함수를 사용하여 data-username값(사용자 이름)을 가져왔습니다.
• 이처럼 가상 요소를 이용해 동적 콘텐츠를 만들수 있습니다.