전역 스타일
<style> 태그 내에 작성한 스타일이나, src/main.js에서 import 한 CSS 스타일 👉 전역 스타일
전역 스타일은 페이지 전체에서 사용되므로, 컴포넌트 간의 충돌이 발생할 수 있다 (충돌 ≒ 덮어쓰기)
<template>
<div class="child">
<h2>child1</h2>
</div>
</template>
<script>
export default {
name: 'Child1',
};
</script>
// Child2, Child3 컴포넌트도 마찬가지로 .child 스타일을 정의함
<style>
.child {
background-color: aqua;
border: solid 1px, black;
margin: 1.5em;
padding: 1em;
}
</style>
style 태그 안에 .child 스타일을 각각 정의했지만, 마지막에 임포트한 Child3의 style로 적용되어 충돌이 발생함
이렇게, 동일한 css 클래스 이름 (여기서는 .child)이 여러 컴포넌트에 사용되면, 마지막에 임포트한 스타일이 적용됨
다른 컴포넌트와의 스타일 충돌을 피하면서, 특정 컴포넌트만의 스타일을 지정하는 방법은 두 가지가 있음.
특정 컴포넌트 스타일 지정
1. 범위 CSS
컴포넌트가 렌더링하는 요소에 특성 기반의 추가적인 식별자를 부여하여 충돌을 피하는 가장 쉬운 방법
<style>을 <style scoped> 로 변경하여 적용
위에서 충돌이 발생한 Child1과 Child2의 style을 <style scoped>로 변경하면, 충돌 없이 style이 적용됨
console의 빨간 네모 박스와 같이, Child1과 Child2에 data-v-xxxxx 같은 특성이 추가 돼 있음
콘솔 창의 style도 마찬가지로 .child[data-v-xxxxxx]로 변환 되어 표기 됨
📌 일반적으로 기본 밑바탕이 되는 CSS 클래스들은 css 파일로 작성하여,src/main.js에서 임포트 함
해당 스타일들은 가장 먼저 임포트 하기 때문에, 앱 전체의 공통 스타일을 적용하기 편리
각 컴포넌트에 적용할 CSS 클래스들은 .vue 파일 내에서 범위 css로 충돌을 피해 적용하는 게 바람직
2. CSS 모듈
CSS 스타일을 마치 객체처럼 다룰 수 있도록 함
<style> 대신 <style module>로 변경하여 사용
추가 속성을 부여하는 범위 CSS와 달리, class명이 절대 충돌 안 하게끔 변경됨.
이 희한한 클래스는 $style옵션에 객체로 등록 됨
.child로 스타일을 작성했더라도,컴파일 과정에서 위처럼 고유한 이름 (여기서는 ._child_u513g_3)으로 변환됨
👉 HTML 템플릿에서 원래 클래스 이름인 .child로 접근할 수 없음
따라서 우리는 :class="$style.child" 와 같이 v-bind 디렉티브를 사용해야 함 (＝ 바인딩)
여러 개를 사용하는 경우, <div :class= "[$style.class, $style.italic]"> ... </div> 처럼 사용
📌 범위 CSS 와 CSS 모듈의 가장 큰 차이점
- 범위 CSS: 추가 식별자 (data-v-xxxx)을 부여
- CSS 모듈: 클래스 이름을 바꿔버림