728x90

전역 스타일

`<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>

 

child 3의 style로 덮어 씌워진 결과

style 태그 안에 `.child` 스타일을 각각 정의했지만, 마지막에 임포트한 `Child3`의 style로 적용되어 충돌이 발생함

이렇게, 동일한 css 클래스 이름 (여기서는 `.child`)이 여러 컴포넌트에 사용되면, 마지막에 임포트한 스타일이 적용됨

다른 컴포넌트와의 스타일 충돌을 피하면서, 특정 컴포넌트만의 스타일을 지정하는 방법은 두 가지가 있음.

특정 컴포넌트 스타일 지정

1. 범위 CSS

컴포넌트가 렌더링하는 요소에 특성 기반의 추가적인 식별자를 부여하여 충돌을 피하는 가장 쉬운 방법

<style>을 `<style scoped>` 로 변경하여 적용

<style scope> 범위 css를 적용한 child1, child2

 

위에서 충돌이 발생한 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>`로 변경하여 사용

Child 3의 style을 CSS 모듈로 작성

추가 속성을 부여하는 범위 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 모듈: 클래스 이름을 바꿔버림
728x90

티스토리툴바