배너 Iframe 디자인 시 가상 요소
565
작성한 질문수 7
여기서 &를 써서 스타일을 추가하는 이유가 무엇인가요?
그냥 위에 있는 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에 영향을 주도록 한 것입니다.
이해가 되셨는지요? 궁금한 점이 있다면 다시 질문해주세요. 수고하세요!
강의 소스 코드 압축 풀기 오류
0
71
1
런타임 에러 ㅠㅠ
0
86
1
강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ
0
102
1
안녕하세요 개발과 상관없는 질문입니다만
0
111
1
리액트 라우터 관련
0
103
1
react-beatiful-dnd에서 문제가 발생합니다.
0
103
1
react19에서는 react-beautiful-dnd가 설치되지 않습니다.
0
813
1
useEffect로 사용을 해도 되나요?
0
201
1
넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.
0
195
1
react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다
0
281
2
리액트 dockderfile 작성 시 COPY 질문
0
145
1
next.js에서부터는 react query 필요없는지
0
320
1
기능
0
197
1
오류가 안보여요
0
196
1
CSS
0
218
1
local storage
0
209
1
list컴포넌트 생성하기
0
224
1
검색어 입력 후 초기화하는 방법 궁금합니다!
0
331
1
Banner.css에 대해서
0
447
1
플러그인이 추천을 안해줍니다
0
321
1
마이너스버튼 테스트
0
279
2
리액트 서버 실행 오류
0
1156
2
오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ
0
298
1
creactStore질문이요
1
284
2