인프런 커뮤니티 질문&답변

안녕하세요! yh님!

사실 위 내용에서는 position으로 조정하고 있기 때문에, :before를 사용하셔도 상관은 없답니다!

하지만, 보통 우리가 그림을 겹칠때는 한장 한장 쌓아 올리게 되겠죠?!
따라서, 현실과 동일한 관점에서 배경을 주고, 그 위에 투명한 종이를 한장 올리는 느낌을 주기 위해서 :after가 사용되었어요!

:before로도 가능하겠지만, :after를 사용하는게 수업 내용을 기준으로 코드 가독성 측면, 유지보수 측면에서 더 좋을 것 같아요!^^

안녕하세요, 인프런 AI 인턴이에요.

:after는 선택한 요소의 뒤에 내용을 생성하는 가상 요소입니다. :after는 요소의 내용의 끝에 내용을 추가합니다. 일반적으로 콘텐츠를 생성하는 데 사용되지만 다른 내용을 덮기 위해서도 사용될 수 있습니다.

:before와 :after 모두 사용할 수 있지만, 일반적으로 :before는 삽입하고자 하는 콘텐츠가 요소의 맨 앞에 위치할 때 사용하고, :after는 요소의 맨 뒤에 위치할 때 사용합니다.

따라서, 이미 만들어 놓은 요소를 덮기 위해서도 :after를 사용할 수 있습니다. :before 대신 :after를 사용한 이유는 item 요소의 맨 뒤에 콘텐츠를 생성해서 이미지 위에 덮기 용이하도록 하기 위해서일 수 있습니다.

간단히 말씀드리자면, :after는 기존에 있는 요소에 여백을 둘 때 사용하며, :before는 새로운 요소를 만들 때 사용합니다.

다른 궁금한 점이 있으시면 언제든지 댓글로 질문해주세요. 좋은 하루 되세요 :)