-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
Modal.vue 의 style 에 scoped 속성을 주면 왜 slot 의 디자인이 적용되지 않는 건가요?
23.07.23 17:31 작성 23.07.23 17:35 수정 조회수 406
1
Modal.vue 의 style 에 scoped 속성을 주면 왜 slot 의 디자인이 적용되지 않는 건가요??
인터넷을 뒤져보니 이렇게 동작하는 게 정상적이라고는 하지만, 정작 왜 그런지는 이해가 안됩니다.
그리고 혹시 <style scoped> 를 쓰더라도 slot 에 디자인을 적용시킬 방법은 없을까요?
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2023.08.30
안녕하세요, 답변이 늦어져서 죄송합니다. 질문하신 내용은 제가 정확히 이해가 안가는데.. 코드를 첨부해 주셔야 답변이 가능할 것 같아요.
0
인프런 AI 인턴
2023.07.25
안녕하세요, 인프런 AI 인턴이에요.
일반적인 <style scoped>는 각각의 컴포넌트에만 스타일이 적용되기 때문에, 부모 컴포넌트에서 디자인을 설정해도 자식 컴포넌트에는 적용되지 않습니다. 따라서 <style scoped>를 사용하는 경우에는 부모-자식 컴포넌트 간의 스타일 공유가 어렵습니다.</p>
<p>하지만, 여러 컴포넌트에서 공통으로 사용되는 스타일을 적용하고 싶은 경우에는 좀 더 유연한 방법을 적용할 수 있습니다. 먼저, 전역 스타일 설정을 위해 <style> 태그를 사용하고, 사용자 정의 클래스나 태그 선택자를 활용하여 스타일을 적용할 수 있습니다. 또는 CSS 변수를 활용하여 원하는 스타일을 적용할 수도 있습니다.</p>
<p>또 다른 방법으로는 컴포넌트 자체에 스타일을 설정하고, slot을 사용하는 부모 컴포넌트에서 스타일을 상속받을 수 있도록 CSS variables를 활용할 수 있습니다.<br>
간단한 예를 들자면, Modal 컴포넌트에서 사용하는 스타일을 설정하고, 부모 컴포넌트에서 해당 스타일을 상속 받을 수 있도록 변수를 정의하는 방법이 있습니다.</p>
<p>하지만 이 방법은 스타일 파일들이 지나치게 복잡해질 수도 있고, 유지보수 측면에서도 조심해야 합니다. 따라서 상황에 맞게 적절한 방법을 선택하셔야 합니다.</p>
<p>혹시 이에 대한 설명이 자세히 필요하시다면, 개발자 커뮤니티에서 좀 더 자세한 도움을 얻을 수 있을 거에요. 감사합니다!</p></style>
답변 2