ABOUT ME

Today
Yesterday
Total
  • Svelte 강의 (3) - Styling
    DEV/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' 카테고리의 다른 글

Designed by Tistory.