You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:
5
+
`<style>` 태그에 `scoped` 속성이 있으면,
6
+
해당 CSS는 현재 컴포넌트의 엘리먼트에만 적용됩니다.
7
+
이것은 Shadow DOM에서 발견되는 스타일 캡슐화와 유사합니다.
8
+
몇 가지 주의 사항이 있지만,
9
+
폴리필이 필요하지 않습니다.
10
+
PostCSS를 사용하여 다음을 변환함으로써 달성됩니다:
9
11
10
12
```vue
11
13
<style scoped>
@@ -15,11 +17,11 @@ When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements
With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
40
+
`scoped`를 사용하면 부모 컴포넌트의 스타일이 자식 컴포넌트로 누출되지 않습니다.
41
+
그러나 자식 컴포넌트의 루트 노드는 부모의 범위가 지정된 CSS와 자식의 범위가 지정된 CSS 모두의 영향을 받습니다.
42
+
이것은 부모가 레이아웃 목적으로 자식 루트 엘리먼트의 스타일을 지정할 수 있도록 의도적으로 설계된 것입니다:
39
43
40
-
### Deep Selectors
44
+
### 깊은 셀렉터 {#deep-selectors}
41
45
42
-
If you want a selector in `scoped`styles to be "deep", i.e. affecting child components, you can use the `:deep()`pseudo-class:
46
+
`scoped`스타일의 셀렉터를 "깊게"(즉, 자식 컴포넌트에 영향을 미치게 하려면) `:deep()`의사 클래스를 사용할 수 있습니다:
43
47
44
48
```vue
45
49
<style scoped>
@@ -49,7 +53,7 @@ If you want a selector in `scoped` styles to be "deep", i.e. affecting child com
49
53
</style>
50
54
```
51
55
52
-
The above will be compiled into:
56
+
위의 내용은 다음과 같이 컴파일됩니다:
53
57
54
58
```css
55
59
.a[data-v-f3f3eg9] .b {
@@ -58,12 +62,16 @@ The above will be compiled into:
58
62
```
59
63
60
64
:::tip
61
-
DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
65
+
`v-html`로 만든 DOM 콘텐츠는 범위가 지정된 스타일의 영향을 받지 않지만,
66
+
깊은 셀렉터를 사용하여 스타일을 지정할 수 있습니다.
62
67
:::
63
68
64
-
### Slotted Selectors
69
+
### 슬롯형 셀렉터 {#slotted-selectors}
65
70
66
-
By default, scoped styles do not affect contents rendered by `<slot/>`, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class:
71
+
기본적으로 범위가 지정된 스타일은 `<slot/>`에 의해 렌더링된 콘텐츠에 영향을 미치지 않습니다.
72
+
스타일을 전달하는 부모 컴포넌트가 소유한 것으로 간주되기 때문입니다.
73
+
슬롯 콘텐츠를 명시적으로 대상으로 지정하려면,
74
+
`:slotted` 의사 클래스를 사용해야 합니다:
67
75
68
76
```vue
69
77
<style scoped>
@@ -73,9 +81,10 @@ By default, scoped styles do not affect contents rendered by `<slot/>`, as they
73
81
</style>
74
82
```
75
83
76
-
### Global Selectors
84
+
### 전역 셀렉터 {#global-selectors}
77
85
78
-
If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `<style>` (see below):
86
+
하나의 규칙만 전역적으로 적용하려면,
87
+
다른 `<style>`을 만드는 대신 `:global` 의사 클래스를 사용할 수 있습니다(아래 참조):
79
88
80
89
```vue
81
90
<style scoped>
@@ -85,33 +94,41 @@ If you want just one rule to apply globally, you can use the `:global` pseudo-cl
85
94
</style>
86
95
```
87
96
88
-
### Mixing Local and Global Styles
97
+
### 로컬 및 전역 스타일 혼합 {#mixing-local-and-global-styles}
89
98
90
-
You can also include both scoped and non-scoped styles in the same component:
99
+
동일한 컴포넌트에 범위가 지정된 스타일과 범위가 지정되지 않은 스타일을 모두 포함할 수도 있습니다:
91
100
92
101
```vue
93
102
<style>
94
-
/* global styles */
103
+
/* 전역 스타일 */
95
104
</style>
96
105
97
106
<style scoped>
98
-
/* local styles */
107
+
/* 로컬 스타일 */
99
108
</style>
100
109
```
101
110
102
-
### Scoped Style Tips
111
+
### 범위가 지정된 스타일 팁 {#scoped-style-tips}
103
112
104
-
-**Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.
113
+
-**범위가 지정된 스타일은 클래스의 필요성을 제거하지 않습니다**.
114
+
브라우저가 다양한 CSS 셀렉터를 렌더링하는 방식 때문에,
115
+
`p { color: red }`처럼 범위를 지정할 때(즉, 속성 셀렉터와 결합될 때) 속도가 몇 배 느려집니다.
116
+
`.example { color: red }`와 같이 클래스나 ID를 사용하면,
117
+
성능 저하를 거의 제거할 수 있습니다.
105
118
106
-
-**Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
119
+
-**재귀적 컴포넌트의 자손 셀렉터에 주의해야 합니다!**
120
+
셀렉터가 `.a .b`인 CSS 규칙의 경우,
121
+
`.a`와 일치하는 엘리먼트가 재귀적인 자식 컴포넌트를 포함한다면,
122
+
해당 자식 컴포넌트의 모든 `.b`는 규칙과 일치하게 됩니다.
107
123
108
-
## CSS Modules
124
+
## CSS 모듈 {#css-modules}
109
125
110
-
A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$style`:
결과적으로 CSS 클래스를 `$style` 키(key) 내부에 객체로 컴포넌트에 노출합니다:
111
128
112
129
```vue
113
130
<template>
114
-
<p :class="$style.red">This should be red</p>
131
+
<p :class="$style.red">이것은 빨간색이어야 합니다.</p>
115
132
</template>
116
133
117
134
<style module>
@@ -121,13 +138,15 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul
121
138
</style>
122
139
```
123
140
124
-
The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
141
+
결과적인 클래스는 충돌을 피하기 위해 해시되어,
142
+
CSS 범위를 현재 컴포넌트로만 지정하는 것과 동일한 효과를 얻습니다.
125
143
126
-
Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
144
+
[전역 예외](https://github.com/css-modules/css-modules#exceptions), [구성](https://github.com/css-modules/css-modules#composition) 등의 자세한 사항은 [CSS 모듈 스팩](https://github.com/css-modules/css-modules)을 참고하십시오.
127
145
128
-
### Custom Inject Name
146
+
### 커스텀 이름 삽입 {#custom-inject-name}
129
147
130
-
You can customize the property key of the injected classes object by giving the `module` attribute a value:
148
+
`module` 속성에 값을 지정하여,
149
+
주입된 클래스 객체의 속성 키를 커스텀할 수 있습니다:
131
150
132
151
```vue
133
152
<template>
@@ -141,28 +160,30 @@ You can customize the property key of the injected classes object by giving the
141
160
</style>
142
161
```
143
162
144
-
### Usage with Composition API
163
+
### 컴포지션 API와 함께 사용 {#usage-with-composition-api}
145
164
146
-
The injected classes can be accessed in `setup()` and `<script setup>` via the `useCssModule` API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:
165
+
주입된 클래스는 `useCssModule` API를 통해 `setup()` 및 `<script setup>`에서 접근할 수 있습니다.
166
+
커스텀 주입 이름이 있는 `<style module>` 블록의 경우 `useCssModule`은 일치하는 `module` 속성 값을 첫 번째 인자로 받습니다:
147
167
148
168
```js
149
169
import { useCssModule } from'vue'
150
170
151
-
//inside setup() scope...
152
-
//default, returns classes for <style module>
171
+
// setup() 내부에서...
172
+
//기본값은, <style module>의 클래스 반환
153
173
useCssModule()
154
174
155
-
//named, returns classes for <style module="classes">
175
+
//이름을 지정한 경우, <style module="classes">의 클래스 반환
156
176
useCssModule('classes')
157
177
```
158
178
159
-
## `v-bind()`in CSS
179
+
## CSS에서 `v-bind()`{#v-bind-in-css}
160
180
161
-
SFC `<style>` tags support linking CSS values to dynamic component state using the `v-bind` CSS function:
181
+
SFC `<style>` 태그는 `v-bind` CSS 함수를 사용하여,
182
+
CSS 값을 동적 컴포넌트 상태에 연결하는 것을 지원합니다:
162
183
163
184
```vue
164
185
<template>
165
-
<div class="text">hello</div>
186
+
<div class="text">안녕!</div>
166
187
</template>
167
188
168
189
<script>
@@ -182,7 +203,8 @@ export default {
182
203
</style>
183
204
```
184
205
185
-
The syntax works with [`<script setup>`](./sfc-script-setup), and supports JavaScript expressions (must be wrapped in quotes):
The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes.
0 commit comments