[SCSS]mixin을 활용한 모바일 폰트 사이즈 설정(62.5%)

CSS(Sass)에서 모바일 초기 셋팅을 위해 62.5%를 기준으로 폰트 크기와 관련된 믹스인과 함수를 설정할 수 있습니다. 이렇게 하면 rem 단위를 더 직관적으로 사용할 수 있게 됩니다. 예를 들어, 1rem이 10px로 설정되어 계산이 간편해집니다. 여기서는 기본 설정과 함께 유용한 믹스인 및 함수를 정의해 보겠습니다.

 

반응형

 

1. 기본 설정

먼저, html 태그의 폰트 크기를 62.5%로 설정합니다. 이렇게 하면 기본 폰트 크기가 16px에서 10px로 변경됩니다.

html {
  font-size: 62.5%; // 1rem = 10px
}

body {
  font-size: 1.6rem; // 16px
  margin: 0;
  padding: 0;
}

 

2. 폰트 크기 믹스인

폰트 크기를 쉽게 설정하기 위한 믹스인을 작성합니다.

@mixin font-size($size) {
  font-size: $size / 10 * 1rem;
}

 

3. 미디어 쿼리 믹스인

반응형 디자인을 위한 미디어 쿼리 믹스인을 작성합니다.

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == medium {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == large {
    @media (max-width: 1200px) { @content; }
  }
}

 

4. 패딩 및 마진 믹스인

패딩과 마진을 쉽게 설정하기 위한 믹스인을 작성합니다.

@mixin spacing($property, $size) {
  #{$property}: $size / 10 * 1rem;
}

 

5. 예시 사용법

위에서 정의한 믹스인들을 사용하여 스타일을 설정하는 예시입니다.

.header {
  @include font-size(20); // 20px -> 2rem
  @include spacing(margin-bottom, 20); // 20px -> 2rem

  @include respond-to(small) {
    @include font-size(18); // 18px -> 1.8rem
  }
}

.container {
  @include spacing(padding, 15); // 15px -> 1.5rem

  @include respond-to(medium) {
    @include spacing(padding, 10); // 10px -> 1rem
  }
}

 

이제, 이 설정을 사용하여 SCSS 파일을 구성하면 모바일 환경에 맞춰 반응형으로 스타일을 쉽게 설정할 수 있습니다. 필요한 경우 각종 설정과 믹스인을 추가하여 더욱 세부적으로 조정할 수 있습니다.