날렵한 스타일링

소개

Svelte는 Rich Harris가 만든 무료 오픈 소스 프런트 엔드 컴파일러입니다.

첫 출시는 2016년 11월이었다. 현재 버전 3.0.0을 사용 중이며, 2019년 4월에 출시했다. 그해 개발자들 사이에서 인기를 끌었다.

Svelte는 react.js 또는 vue.js 과 같이 변경 사항을 즉시 볼 수 있는 반응형 웹 앱 및 인터페이스를 만드는 데 사용됩니다. 사용 편의성과 고성능으로 인해 개발자들 사이에서 인기가 있습니다.

전제 조건

이 문서를 따라하려면 다음을 수행하십시오.

JavaScript 또는 React.js과 같은 라이브러리에 대해 잘 알고 있어야 합니다.

시스템에 node.js을 설치합니다.

날렵한 스타일링

svelte의 스타일 지정은 스타일 구성 요소* index.css 또는 app.css 파일*이 있는 React와 다릅니다. svelte에서 스타일은 파일 구성 요소 내에서 바로 찾을 수 있습니다.

단일 파일 구성 요소는 Script 태그, Html 태그 및 스타일 태그로 구성됩니다.

<script>

</script>

<main>

</main>

<style>

</style>

날렵한 스타일링은 3가지로

전역 스타일: 전역 스타일은 프로젝트에 있는 모든 다른 구성 요소(페이지)에 적용됩니다. 범용 스타일 시트와 같습니다. CMD(명령줄)에서 날렵한 애플리케이션을 구축할 때 이러한 글로벌 스타일 시트가 생성됩니다. 애플리케이션의 public 폴더 아래에 있습니다.

표시된 영역에는 기본적으로 생성되는 global.css가 표시됩니다.

기본적으로 이러한 전역 스타일은 svelte 애플리케이션을 빌드하는 동안 생성된 미리 만들어진 CSS.styles와 함께 제공됩니다. 스타일을 유지하거나 삭제하는 것은 사용자의 선택입니다.

미리 만들어진 CSS 스타일

HTML, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

구성 요소별 스타일: 이러한 스타일은 구성 요소 기반입니다. 즉, 응용 프로그램(일반)의 모든 구성 요소에 적용되는 것이 아니라 특정 구성 요소에 적용됩니다.

위의 그림은 두 스타일 시트의 차이점을 보여줍니다.

구성 요소별 스타일의 결과

조건부 스타일 또는 고급 스타일: 특정 조건에 따라 스타일을 추가하는 것입니다. 즉, 값이 true 또는 false입니다.

예를 들어 조건부 클래스를 사용하여 모달의 배경색을 변경합니다.

초기에 모달 배경색을 true로 설정합니다.

배경색 보라색을 얻으려면 isModal **이라는 클래스를 제공하고 **false로 설정합니다.

암호

<script>
 let modal = true;
 let isModal = false;
</script>

{#if modal}
 <div class="bg-cover" class:bg-modal={isModal}>
 <div class="modal" >
 <p>This is a modal!</p>
 </div>
 </div>
{/if}

<style>
 .bg-cover{
 width:100%;
 height: 100%;
 position: fixed;
 background-color: cyan;
 }

 .modal {
 padding: 10px;
 border-radius: 10px;
 max-width: 400px;
 margin: 10% auto;
 text-align: center;
 background: purple;
 color: white;
 }
.bg-modal .modal {
 background-color: orange;
 color: white;
 }
</style>

false로 설정했을 때의 결과

다른 배경색을 얻기 위해 모달의 배경색을 변경하려면 다음을 수행하십시오.

클래스 isModal을** true**로 설정합니다.

암호

<script>
 let modal = true;
 let isModal = true;
</script>

{#if modal}
 <div class="bg-cover" class:bg-modal={isModal}>
 <div class="modal" >
 <p>This is a modal!</p>
 </div>
 </div>
{/if}

<style>
 .bg-cover{
 width:100%;
 height: 100%;
 position: fixed;
 background-color: cyan;
 }

 .modal {
 padding: 10px;
 border-radius: 10px;
 max-width: 400px;
 margin: 10% auto;
 text-align: center;
 background: purple;
 color: white;
 }
 .bg-modal .modal {
 background-color: orange;
 color: white;
 }
</style>

true로 설정했을 때의 결과

결론

Svelte는 CSS 스타일을 관리하는 세 가지 방법인 전역 스타일, 구성 요소별 또는 고급 스타일, 조건부 스타일을 제공합니다.

자원

svelte에 대한 이해를 높이거나 배우고자 하는 데 도움이 될 수 있는 몇 가지 리소스가 있습니다.

Svelte

시간을 가장 잘 관리하려면 VS Code용 Visual Studio 코드 확장 Svelte를 다운로드하십시오.

읽어 주셔서 감사합니다