svelte는 sveltekit는  spa 라는 특징이 있습니다.

그래서 

css 로드에 대한 독득한 특징이 있습니다.

 

1. 글로벌은 모두 통합된다.

2. 페이지나 컴포넌트 단위로 독립 class 가 난수화 된다.(독립 된다.)

 

spa 는 상위 html과 head 그리고 body 를 한번 로드하면 

페이지가 변경되어도 body 안의 레이아웃만 변경되는 것이지 그위에 있는것은 그대로 남아 있게 됩니다.

그래서

css 를 불러오는 방식에 따라서 

계속 head 부분에 누적되거나 지역단위로만 사용되는 css가 새로 생겨서 기능을 하게 됩니다.

 

우선 css 를 불러오는 방법을 나열해 보겠습니다.

최상위 app.html 에서 CSS 파일 로드하기 : global

프로젝트를 생성하면, src 폴더에 app.html 파일이 생성되는에

여기에 일반적으로 css를 넣는 것입니다.

이건 일반 css 사용하듯이 <link href="외부css url"> 사용하면 됩니다

최상위에 있기 때문에 페이지 전체에 경향을 주는 글로벌 css 로 기능하게 됩니다.

그리고 생성된 class 명이 그대로 사용됩니다.

 

페이지에서 css 파일 로드하기 : global

+layout.svelte 나, +page.svelte 에서 css 파일 로드하기

<script> 테그 안에서 로드하기

import "경로/파일명.css";

<style>테그 안에서 로드하기

@import '경로/파일명.css';

파일로 로드한 경우 class 명이 그대로 사용됩니다.

 

페이지에서 style 안에 클래스 선언하기 : local

*.svelte 로 끝나는 파일 안에

<style> 테그 안에 

.btn{ border:1px solid #000;}

이렇게 선언하면

해당 파일 안에서만 적용되는 class 가 됩니다.

그런데 이게 생성된 후 파일을 보면

우리가 생성한 btn 이라는 클래스 명은 온데간대 없고

난수로 새로 생성된것을 볼 수 있습니다.

 

여기에서 알수 있는것이 spa 특징상 class 가 계속 누적되는데

이방법을 피하기 위해서 난수를 생성해서 class가 겹치지 않게 하는 방법을 사용한다는 점입니다.

 

우리는 *.svelte 로된 파일에서 기존 개발하듯이 class 를 생성하였지만

spa 특성상 이렇게 되면 반복되고 중첩되는 class가 있을 경우 의도치 않는 결과가 나올 수 있어

이를 방지하는 방식으로 난수를 사용하는것 같습니다.

 

그런데 문제는 *.svelte 에서 <style> 테그 안에서 사용되는 class는 괸찮은데,

글로벌로 등록한 css 파일들이 난수처럼 변경을 해주지 않아서 겹치는 문제가 발생할 수 있습니다.

 

그누보드5에 보면 default.css와 mobile.css 파일을 분기해서 사용하는데

이렇게 글로벌에서 다른 파일로 분기해서 사용할 수가 없습니다.

svelte 문법으로 분기를해서 import 해도 결국 2개의 파일이 동시에 모두 등록되어 사용됩니다.

그래서 반응형을 js로 분기하는 방법을 사용하기 난해합니다.

 

php의 경우 서버측렌더링을 먼저하고 그리고 그결과를 클라이언트에 보내기 대문에 

php 로 분기해서 뿌려줘도 문제가 없지만

클라이언트에서 랜더링하는 svelte 같은 경우에는 

css 가 먼저 로딩되고, js 파일이 읽어 들이는 특징 때문에

js 프로그램으로 분기하면 그전 css의 잔재가 남아있어서 페이지가 찌그러졌다 펴치는 현상을 경험할 수도 있습니다.

tailwindcss 에서 다크모드 사용할때 body 테그 class 에 dark class 넣고 빼고 하면서 분기하듯이

css 의 분기 방식을 사용하는 편이 더욱 깔급 합니다

이런거 쉽게하려면 scss 사용해야 겠네요.

 

아무튼 페이지 내에서 css class 명이 난수로 변경되어서 적용된다는 특징을 숙지하셔야 합니다.

이러한 특징 때문에 의도한 내용이 적용안되는 경험을 할 수 있기 때문입니다.

마지막으로 한가지 예를 들면,

DB 에 내용을 넣고 class 명을 적용하였을 경우 이런 경우에는 글로벌로 class 가 적용되어 있어야 합니다.

이런경우는 앞서 설명한 css 파일을 만들어서 그안에 글로벌 class 명을 정의 하는 방식으로 하면됩니다.