
[컴포넌트 심화-1] 단일 파일 컴포넌트에서의 스타일
·
Frontend/Vue 3
전역 스타일` style 태그 안에 `.child` 스타일을 각각 정의했지만, 마지막에 임포트한 `Child3`의 style로 적용되어 충돌이 발생함이렇게, 동일한 css 클래스 이름 (여기서는 `.child`)이 여러 컴포넌트에 사용되면, 마지막에 임포트한 스타일이 적용됨다른 컴포넌트와의 스타일 충돌을 피하면서, 특정 컴포넌트만의 스타일을 지정하는 방법은 두 가지가 있음.특정 컴포넌트 스타일 지정1. 범위 CSS컴포넌트가 렌더링하는 요소에 특성 기반의 추가적인 식별자를 부여하여 충돌을 피하는 가장 쉬운 방법을 `` 로 변경하여 적용 위에서 충돌이 발생한 Child1과 Child2의 style을 로 변경하면, 충돌 없이 style이 적용됨console의 빨간 네모 박스와 같이, Child1과 Child2..