21.11.24 - TIL [Vue - style scoped]
style scoped
<style scoped>
를 사용하면 CSS는 해당 컴포넌트의 엘리먼트에만 적용된다.
soped를 적용하면
<template> <div class="example">Hello World</div> </template> <style scoped> .example { color: blue; } </style>
이런 식으로 자동 변환된다.
<template> <div class="example" data-v-f123ggf>Hello World</div> </template> <style scoped> .example[data-v-f123ggf] { color: blue; } </style>
부모 컴포넌트에서 scoped를 사용하면 하위 컴포넌트까지 내려간다.
블럭 처리된 부분이 컴포넌트로 삽입된 부분인데 부모인 컨테이너의 scoped가
하위 컴포넌트인 블럭까지 내려간 것을 볼 수 있다.
하위 컴포넌트에서도 style scoped를 사용하였기 때문에 data-v로 시작하는 명이 두개가 되는 것이다.
부모 style에서 태그를 이용해 스타일을 줬다면 하위 컴포넌트에 영향이 갈 가능성이 있으니 class,id를 이용해 스타일을 주는 것을 권장한다.
회고
오늘은 오늘의 집 조은 개발자님의 특강을 들었다. 다른 사람과 차별되는 나만의 무기가 무엇이 있을까 진지하게 고민해야겠다. 지금으로선..전혀 없다..
그리고 이제부턴 가고 싶은 분야, 회사를 찾아서 분석해봐야겠다. 그 회사에서 무얼 요구하는지, 어떤 사람을 원하는지 지금부터 탐색해야 나중에 기회가 왔을 때 잡을 수 있을 것이다.
Author And Source
이 문제에 관하여(21.11.24 - TIL [Vue - style scoped]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sjkim_jinnyk/21.11.24-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)