-
Svelte 강의 (3) - StylingDEV/SVELTE 2023. 11. 15. 22:31
이번편은 별게 없다.
style에 대해 말해주는데
<p>This is a paragraph.</p> <style> p { color: goldenrod; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style>
Style에서 p태그에 대해 스타일을 지정하면 <p>에 대해서는 모두 저 스타일로 지정이 된다.
그래서 그다음 Nested components 부분까지 함께 보자.
Nested components는 스벨트에서 여러 컴포넌트를 사용 하는 방법을 보여주는데
//App.svelte <script> import Nested from './Nested.svelte'; </script> <p>This is a paragraph.</p> <Nested /> <style> p { color: goldenrod; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style> // Nested.svelte <p>This is another paragraph.</p>
위에부분은 App.svelte고 아래는 Nested.svelte이다.
Nested.svelte는 그냥 한줄이고 App.svelte에서는 그걸 import 시켜 컴포넌트를 마크업에 추가 했다.
눈 여겨 볼 곳은 import 부분이다. import 문을 사용하여 컴포넌트를 가지고 와서 그걸 사용한 것이다.
또 한가지는 App.svelte에서 스타일에 p태그에 대해 스타일을 지정했는데 Nested.svelte에서 p태그를 이용해도
스타일은 바뀌지 않는 것을 알 수 있는데 이건 해당 컴포넌트에서 스타일을 지정해도 다른 컴포넌트에 영향을
미치지 않는 것을 볼 수 있다. 이게 특징이다. don't leak. 누출되지 않는다.
svelte 확장자를 가지는 파일은 파일 맨 처음에 대문자를 넣는데 컴포넌트 네이밍으로 관례처럼 생각하면 된다.
사실 혼자 개발할거면 상관없는데 저런 컨벤션은 이게 좋다 하면 따라주자. 협업할때나 가독성에 도움이 되니까'DEV > SVELTE' 카테고리의 다른 글
Svelte 강의 (6) - Assignments (0) 2023.11.16 Svelte 강의 (4) - HTML tags (1) 2023.11.15 Svelte 강의 (2) - Dynamic attributes (0) 2023.11.15 Svelte 강의 (1) - Introduction (0) 2023.11.15 Svelte - 컴포넌트간 변수 상태 공유 (0) 2023.11.15