[SCSS] SCSS 반응형 디자인

반응형 디자인 소개

반응형 디자인은 웹 사이트 또는 애플리케이션을 다양한 디바이스 및 화면 크기에서 최적의 사용자 경험을 제공하기 위한 접근 방식입니다. SCSS는 반응형 디자인을 구현하는 데 유용한 다양한 도구와 편의 기능을 제공합니다.

---

미디어 쿼리 활용

SCSS에서는 미디어 쿼리(Media Query)를 활용하여 특정 화면 크기에 따라 스타일을 조정할 수 있습니다. 이를 통해 각 디바이스에 최적화된 레이아웃과 디자인을 구현할 수 있습니다.

• @media 디렉티브를 사용하여 미디어 쿼리를 생성합니다.
• 미디어 쿼리 내부에서는 원하는 화면 크기 범위에 따른 스타일을 작성할 수 있습니다.
• SCSS 변수를 활용하여 미디어 쿼리에서 사용되는 값들을 관리할 수 있습니다.

---

믹스인과 미디어 쿼리 조합

SCSS의 믹스인(Mixin) 기능은 반복적으로 사용되는 스타일을 재사용하고 관리하는 데 도움이 됩니다. 반응형 디자인에서는 믹스인과 미디어 쿼리를 조합하여 다양한 화면 크기에 맞는 스타일을 쉽게 적용할 수 있습니다.

• 미디어 쿼리 내에서 믹스인을 정의하고, 해당 화면 크기에 적용할 스타일을 선언합니다.
• 이후 원하는 엘리먼트에 해당 믹스인을 호출하여 스타일을 적용할 수 있습니다.

---

반응형 디자인 예제

아래는 SCSS를 사용하여 반응형 디자인을 구현하는 간단한 예제입니다.

$desktop-breakpoint: 1024px;
$tablet-breakpoint: 768px;

@mixin responsive-layout {
  @media (max-width: $desktop-breakpoint) {
    width: 100%;
  }
}

.container {
  width: 80%;
  margin: 0 auto;

  @include responsive-layout;

  h1 {
    font-size: 24px;

    @media (max-width: $tablet-breakpoint) {
      font-size: 20px;
    }
  }
}

위 코드에서는 데스크탑 및 태블릿 화면 크기에 따라 레이아웃과 폰트 크기가 조정되는 예제입니다.