가상 요소(Pseudo elements)를 이용하여 배경 돌리기

서론

CSS의 여러 기능들을 학습하기 위해 태양계를 구현해 보는 프로젝트를 진행해 보았다.

태양과 지구 이미지를 background로 넣어주고, 애니메이션으로 transform 속성을 이용하여 요소를 회전시켜 자전과 공전을 시키려고 했다.

그래서 태양의 자전을 구현하였더니 아래와 같은 문제가 발생했다.

 

 

태양의 자식 요소였던 지구의 궤도가 함께 돌아버리는 것이다.

부모 요소에 애니메이션을 적용시키니 자식 요소까지 한 번에 적용되는 문제가 발생한 것이다.

이를 해결하기 위해 가상 요소에 대해 학습을 진행하였다.

가상 요소(Pseudo elements)

가상 요소란 선택자에 키워드로 가상의 요소를 추가하는 것이다.

즉, 존재하지 않는 요소를 만들어서 스타일을 입힐 수 있게 해주는 것이다.

사용법은 간단히 아래와 같다.

 

selector::pseudo-element {
  property: value;
}

 

먼저, ::before를 아래와 같이 사용할 수 있다.

 

See the Pen Untitled by Seo Jonghyeon (@surpise) on CodePen.

::before는 선택된 요소의 첫번째 자식에 해당하는 가상 요소를 생성한다.

content라는 요소를 사용하였는데, 이는 HTML-에 포함되지 않은 CSS에 새롭게 생성해 주기 위해 필요한 속성이다.

따라서 content를 꼭 지정해줘야 가상 요소가 만들어진다.

content에 느낌표를 넣어주어 div의 첫 번째 자식 요소의 값으로 할당해 준 것을 확인할 수 있다.

 

See the Pen Untitled by Seo Jonghyeon (@surpise) on CodePen.

::after도 ::before와 같이 사용할 수 있다.

대신 ::after는 선택된 요소의 마지막 자식에 해당하는 가상 요소를 생성한다.

 

가상 요소는 이외에도

• ::first-letter - 선택된 요소의 첫 번째 글자에 스타일 적용
• ::first-line - 선택한 요소의 첫 번째 줄에 스타일 적용

등이 존재한다.

문제 해결

가상 요소에는 여러 종류가 있지만, 가장 많이 사용하는 ::before와 ::after로 위의 문제를 해결해 보려고 한다.

기존에는 아래와 같이 요소에 직접 애니메이션을 적용하였다.

 

See the Pen Untitled by Seo Jonghyeon (@surpise) on CodePen.

 

그 결과, 자식 요소인 지구까지 함게 애니메이션을 적용된다.

그래서 가상 요소를 하나 만들어서 해당 요소에 배경과 애니메이션을 적용을 시켜보았다.

 

See the Pen Untitled by Seo Jonghyeon (@surpise) on CodePen.

 

HTML에는 추가한 요소가 없지만, CSS에 sun::before를 추가하여 sun 요소 앞에 가상의 요소를 하나 만들었다.

그리고 해당 요소에 배경과 애니메이션을 적용시켜서 자식 요소에 영향을 미치지 않게 구현할 수 있었다.

후기

프로젝트를 진행하다보니 지구를 태양 요소에서 분리하게 되어 가상 요소를 쓸 필요가 없게 되었었다.

그래서 가상요소를 쓸만한 다른 곳은 없을까 고민하다가 애니메이션 속도를 조절하는 슬라이더 버튼을 만들어 보았다.

 

 

처음엔 생각대로 잘 되지 않다 보니 답답한 부분도 있었지만, 구현 후 동작하는 것을 보니 뿌듯했다.

계속 CSS를 추가 학습하면서 이것저것 기능들을 추가해 볼 계획이다.

진행사항은 해당 링크에서 확인할 수 있다. https://github.com/surpise/Solar-System

참고

https://dev.to/afozbek/how-to-rotate-background-image-35mi