일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- hokeys
- 이종호
- 스위프트
- 호키스
- 자바스크립트 자료구조
- 리액트 예제
- Hitit
- 자바스크립트
- 개발
- 힛잇
- 개발자
- 스벨트
- 리액트
- 자스민
- Svelte
- HTML
- 계명대 이종호
- IOS
- 계명대
- queue
- 자료구조
- TDD
- SWIFT
- 호키도키
- react
- 비동기
- jest
- hokidoki
- data structure
- javascript
Archives
- Today
- Total
Dog foot print
[SVELTE] STYLE 본문
<style>
p {
/* this will only affect <p> elements in this component */
color: burlywood;
}
</style>
Svelte 파일 내부에 있는 style 태그는 해당 컴포넌트안에서만 유효범위를 가집니다.
이것은 Element
들에 컴포넌트에서 유효한 해쉬값을 붙인 클래스를 붙이는 것으로 가능합니다.
<style>
:global(body) {
/* this will apply to <body> */
margin: 0;
}
div :global(strong) {
/* this will apply to all <strong> elements, in any
component, that are inside <div> elements belonging
to this component */
color: goldenrod;
}
</style>
만약 해당 컴포넌트외에 전역적으로 style을 부여하고 싶다면 :global(selector)
를 사용하시면 됩니다.
<style>
@keyframes -global-my-animation-name {...}
</style>
만약 @keyframes
를 전역적으로 사용 하고 싶다면 -global-
을 사용하시면 됩니다. 위의 예제에서 my-animation-name이 사용되었지만 다른 이름으로 교체 하실 수 있습니다.
#svelte #style #keyframe
반응형
'SVELTE > API DOCS' 카테고리의 다른 글
[SVELTE] Comment (0) | 2021.05.21 |
---|---|
[SVELTE] Attributes and props (0) | 2021.05.21 |
[SVELTE] context="module" (0) | 2021.05.20 |
[SVELTE] Store contract (0) | 2021.05.20 |
[SVELTE] svelte-script (0) | 2021.05.20 |
Comments