인프런 커뮤니티 질문&답변
작성한 질문수
배너 Iframe 디자인 시 가상 요소
작성
·
473
0
여기서 &를 써서 스타일을 추가하는 이유가 무엇인가요?
그냥 위에 있는 Iframe에 적용하면 안되는 건가요?
이 부분을 Iframe에 포함시키니 오류가 나서 왜인지 궁금합니다.
const Iframe = styled.iframe`
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.65;
border: none;
&: :after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%
}
`;답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
”&” 기호는 부모 요소에 스타일을 추가하기 위한 가상 클래스 선택자입니다. 그래서 여기서 “:“은 “&“와 동일한 역할을 합니다. 그래서 “Iframe”의 부모 요소에 스타일을 추가하기 위해서 “&“와 “:“을 사용한 것입니다.
만약 해당 가상 클래스 선택자를 Iframe 요소에 바로 적용한다면, 해당 가상 클래스 선택자의 부모 요소는 Iframe입니다. Iframe은 content 속성을 지원하지 않으므로 오류가 발생하는 것입니다.
따라서, “&:after”를 사용하여 Iframe의 부모 요소인 컨테이너에 스타일을 추가하고 이를 Iframe에 영향을 주도록 한 것입니다.
이해가 되셨는지요? 궁금한 점이 있다면 다시 질문해주세요. 수고하세요!