2022.02.08 TIL

스터디 과제인 클론 코딩을 진행하면서 새로 알게 된 개념이 있어서 정리해보려고 한다!

---

Pseudo-elements(가상 요소)

가상 요소는 선택자에 추가하는 키워드로 선택한 요소의 일부분에만 스타일을 입힐 수 있다.

p::first-line {
	color: blue;
} // 문단 첫 줄의 글씨만 바꿀 수 있다. 

::after

::after는 선택한 요소의 맨 마지막 자식으로 가상 요소를 하나 생성한다.

• content 속성과 함께 짝지어 요소에 장식용 콘텐츠를 추가할 때 사용할 수 있다.
  • content 속성은 생성한 값으로 요소를 대체한다.
• 기본값은 inline이다.

💡 ::after와 ::before로 생성한 가상 요소는 원본 요소의 서식 박스에 포함되므로 <img>나 <br> 등 대체 요소에 적용할 수 없다.

가상 요소적용 예시

클론 코딩에서 가상 요소를 적용한 예시!
dynamic을 id로 가진 div에 ::after를 사용해서 마지막 부분에 장식용 콘텐츠를 추가해줬다.
block 요소를 만들어서 바를 만들었고 js에서 setInterval 함수를 이용해서 0.5s에 한번씩 깜빡이게 해서 cursor가 깜빡이는 것처럼 만들어줬다!

<div class="text" id="dynamic">가상 요소! </div>

#dynamic::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  width: 4px;
  height: 100%;
  background-color: #fff;
}

const target = document.querySelector('#dynamic')
function blink(){
    target.classList.toggle('active');
}
setInterval(blink,500);