::after
-
가상 요소(Pseudo elements)를 이용하여 배경 돌리기FE/CSS 2024. 5. 4. 00:12
서론CSS의 여러 기능들을 학습하기 위해 태양계를 구현해 보는 프로젝트를 진행해 보았다.태양과 지구 이미지를 background로 넣어주고, 애니메이션으로 transform 속성을 이용하여 요소를 회전시켜 자전과 공전을 시키려고 했다.그래서 태양의 자전을 구현하였더니 아래와 같은 문제가 발생했다. 태양의 자식 요소였던 지구의 궤도가 함께 돌아버리는 것이다.부모 요소에 애니메이션을 적용시키니 자식 요소까지 한 번에 적용되는 문제가 발생한 것이다.이를 해결하기 위해 가상 요소에 대해 학습을 진행하였다.가상 요소(Pseudo elements)가상 요소란 선택자에 키워드로 가상의 요소를 추가하는 것이다.즉, 존재하지 않는 요소를 만들어서 스타일을 입힐 수 있게 해주는 것이다.사용법은 간단히 아래와 같다. se..