• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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 에 디자인을 적용시킬 방법은 없을까요?

답변 2

·

답변을 작성해보세요.

0

안녕하세요, 답변이 늦어져서 죄송합니다. 질문하신 내용은 제가 정확히 이해가 안가는데.. 코드를 첨부해 주셔야 답변이 가능할 것 같아요.

0

인프런 AI 인턴님의 프로필

인프런 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>