[javascript] Svelte에서 반응형(Responsive) 웹 디자인을 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Svelte는 반응형 웹 디자인을 구현하기 위해 다양한 방법을 제공합니다. 일반적으로 CSS 미디어 쿼리를 사용하여 뷰포트의 크기에 따라 스타일을 동적으로 변경하는 것이 일반적입니다.

아래는 Svelte에서 반응형 웹 디자인을 구현하는 예시입니다:

CSS 미디어 쿼리 사용하기:

<script>
  import { onMount } from "svelte";
  let isMobile = false;

  onMount(() => {
    const mediaQuery = window.matchMedia("(max-width: 768px)");
    isMobile = mediaQuery.matches;

    const handleChange = (mediaQuery) => {
      isMobile = mediaQuery.matches;
    };

    mediaQuery.addEventListener("change", handleChange);
  });
</script>

<style>
  .container {
    display: flex;
    flex-direction: ${isMobile ? "column" : "row"};
  }

  .content {
    flex-grow: ${isMobile ? 0 : 1};
  }
</style>

<div class="container">
  <div class="sidebar">
    <!-- sidebar content -->
  </div>
  <div class="content">
    <!-- main content -->
  </div>
</div>

위의 예시에서는 window.matchMedia를 사용하여 뷰포트의 크기를 감지하고, isMobile 변수를 변경하여 해당하는 스타일을 적용합니다. 이를 통해 뷰포트가 모바일 크기인 경우(column)와 데스크탑 크기인 경우(row)를 구분하여 스타일을 조정합니다.

Svelte 컴포넌트의 prop 활용하기:

<script>
  export let isMobile = false;
</script>

<style>
  .container {
    display: flex;
    flex-direction: ${isMobile ? "column" : "row"};
  }

  .content {
    flex-grow: ${isMobile ? 0 : 1};
  }
</style>

<div class="container">
  <div class="sidebar">
    <!-- sidebar content -->
  </div>
  <div class="content">
    <!-- main content -->
  </div>
</div>

위의 예시에서는 isMobile prop을 사용하여 부모 컴포넌트에서 값을 전달받아 스타일을 적용합니다. 부모 컴포넌트에서 isMobile prop을 변경하면 해당 컴포넌트가 다시 렌더링되면서 스타일이 변경됩니다.

다른 방법들도 있지만, 이러한 방법들을 사용하면 Svelte에서 반응형 웹 디자인을 쉽게 구현할 수 있습니다.