이번 포스트에서는 vue component의 의 동작에 대해서 살펴보자. vs SFC와 styleSFC는 하나의 파일에 , , 가 들어간다. 문제는 최종적인 application은 SFC로 동작하지 않고 하나의 html 형태로 동작한다는 점이다.이 상황에서 문제가 되는 것 중 하나가 이다. CSS는 선택자 기반으로 동작하는데 StopWatch 컴포넌트에서 content라는 클래스에 적용된 CSS가 있을 때 우연히 GuguQuiz 컴포넌트에도 content 클래스가 있다면 두 개의 style은 충돌할 수밖에 없을 것이다. 이 문제를 해결하기 위해서 Vue는 style 태그에 scoped 속성을 사용한다. scoped의 목적은 컴포넌트에 선언된 css를 그 컴포넌트에만 영향을 주게 하겠다는 것이다. ..
[vue] <style scoped>의 비밀
이번 포스트에서는 vue component의 의 동작에 대해서 살펴보자. vs SFC와 styleSFC는 하나의 파일에 , , 가 들어간다. 문제는 최종적인 application은 SFC로 동작하지 않고 하나의 html 형태로 동작한다는 점이다.이 상황에서 문제가 되는 것 중 하나가 이다. CSS는 선택자 기반으로 동작하는데 StopWatch 컴포넌트에서 content라는 클래스에 적용된 CSS가 있을 때 우연히 GuguQuiz 컴포넌트에도 content 클래스가 있다면 두 개의 style은 충돌할 수밖에 없을 것이다. 이 문제를 해결하기 위해서 Vue는 style 태그에 scoped 속성을 사용한다. scoped의 목적은 컴포넌트에 선언된 css를 그 컴포넌트에만 영향을 주게 하겠다는 것이다. ..
2023.08.29