Svelte 강의 (3) - Styling

이번편은 별게 없다.

 

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 확장자를 가지는 파일은 파일 맨 처음에 대문자를 넣는데 컴포넌트 네이밍으로 관례처럼 생각하면 된다.
사실 혼자 개발할거면 상관없는데 저런 컨벤션은 이게 좋다 하면 따라주자. 협업할때나 가독성에 도움이 되니까