가상요소 ::before 와 ::after 태그의 역할 (feat.네이버 메인 페이지)

네이버 메인 페이지를 보면 before after태그를 자주 쓰이는 것을 볼 수 있습니다.

 

 

그렇다면 이 포스팅에서는

before 와 after 태그의 의미와 어떻게 쓰이는 지 언제 쓰면 좋을지 알아보도록 합니다.

 

 

::Before &  ::After 란?

Css의 가상요소 ::before 와 ::after는 실제 태그의 앞 혹은 뒤에

컨텐츠를 삽입할 수 있도록 해줍니다.

 

 

가상 요소의 생성 순서?

::before 가상요소 > 콘텐츠 > ::after 가상요소

 

콘텐츠를 기준으로 

before는 왼쪽에, after는 오른쪽에 생성됩니다.

가상요소는 선택자로 선택한 요소의 하위 요소로 위치하며, 요소의 기본 속성들을 상속해서 받게 됩니다.

가상요소는 실제 요소처럼 배치 속성을 부여해서 자유롭게 위치를 조절할 수 있습니다.(ex. position: relative)

 

 

::Before &  ::After 를 사용하는 이유?

 

스타일에 관한 요소를 실제 Html 구조에 영향을 미치지 않고 조작할 수 있도록 해줍니다.

또한,

코드의 중복을 줄여주어 특정 효과를 구현하는데 필요한 코드의 양을 줄여주어 

적은 코드로 시각적으로 매력적인 사이트를 만들어줄 수 있습니다.

 

 

어떤 컨텐츠를 넣을 수 있을까?

 

아이콘, 테두리, 배경, 텍스트까지 삽입이 가능합니다.

 

 

 

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

가상요소 content 속성에는 Html 태그의 속성 값을 가져오는 attr() 함수를 사용할 수 있습니다.

특히 데이터 속성("data-") 값을 가져올 수 있기 때문에 콘텐츠에 표시하는 동적인 내용들을 다루고 관리하기가

훨씬 쉬워집니다. 

 

 

Html과 Css 코드의 관리와 유지보수 측면에서도 훨씬 효율적,

동적인 데이터를 웹에 표시할 때 체계적인 데이터 관리가 가능합니다.

 

 

태그 데이터 속성으로 동적인 데이터를 표시한 후,

<button class="coupon" data-username="이찬혁"></button>

 

 

::before 가상요소와 attr() 함수를 사용하여 버튼에 표시할 텍스트를 작성합니다.

 

*attr()함수: content 영역에 동적으로 넣을 수 있도록 연결해주는 역할의 함수.

button.coupon::before {

   display: block;
   content: attr(data-username) " 님을 위한 쿠폰";
   padding: 10px 20px;
   color: #ff8822;
   
   }

 

버튼의 기능은 그대로 사용 + 동적으로 버튼의 표시 내용을 변경할 수 있다.

표시할 컨텐츠 내용을 수정하기 위해 Html을 수정할 필요가 없고, 동적인 데이터 부분만 태그 속성으로 따로 관리하기 때문에 데이터의 관리도 편해집니다.

attr() 함수는 여러번 사용 될 수 있다 없다?

있다!

attr() 함수는 하나의 컨텐츠 속성에 여러 번 사용할 수 있습니다.

2개의 데이터 속성 값을 사용하여 날짜 범위에 대한 안내 문구 표현을 해보면

 

<p class="evennotice" data-startday="2021-05-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 red;
  
  }

 

 

 

네이버 메일 아이콘 : ul > li > a > span > before, after > span > a >li > ul

 

 

 

 

 

 

 

 

 

모바일 버전으로 보기 버튼: a > 텍스트 > before > after 

a태그 안에 '모바일 버전으로 보기'를 적은 후에

before로 모바일 이미지를 넣고

after 태그로 전체 라운딩된 박스를 넣어준 것 같다.