[SCSS(SASS)] 반응형 breakpoints 추가하는 방법

개요

이번에는 반응형 웹사이트 작업 시 꼭 필요한 mediaquery를 공부해봅시다!

scss 사용해서 살펴보겠습니다 : )

 

코드

우선 완성된 코드를 보여주고 설명해드릴게요 : )

$breakpoints: (
    'mobile-extra-small': (min-width:  21.25rem),        // 340
    'mobile-portrait-only': (max-width:  29.9375rem),    // 479
    'mobile-landscape': (max-width:  51rem),             // 816
    'tablet-portrait': (min-width: 48rem),               // 768
    'desktop-template': (min-width: 48.0625rem),         // 769
    'tablet-portrait-only': (max-width: 48rem),          // 768
    'tablet-big': (min-width: 60.625rem),                // 970
    'desktop': (min-width: 64rem),                       // 1024
    'desktop-medium': (min-width: 75rem),                // 1200
    'desktop-large': (min-width: 90rem),                 // 1440
    'desktop-extra-large': (min-width: 120rem)           // 1920
);

@mixin respond-to($name) {
    @if map-has-key($breakpoints,
    $name) {
        @media only all and #{inspect(map-get($breakpoints, $name))} {
            @content;
        }
    }
    @else {
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.";
    }
}

 

위에서 알아볼 키워드로는

- $

- mixin

- media

- min-width

- max-width

- rem

- em

 

이 정도인데 빠르게 훑어볼게요. 소중한 시간 많이 안 뺏겠습니다. : )

 

$

$는 변수 선언하는 역할을 한다. $breakpoints는 SCSS 데이터 타입인 Maps를 사용해 변수에 할당했다. 

map-get($breakpoints, $name) 이런 식으로 첫 번째 인수의 변수를 넣고 두 번째 인수의 키값을 넣으면 해당 값이 반환한다.

 

mixin

minx은 재활용할 CSS를 선언해주는 역할을 한다.

아래 코드처럼 사용할 수 있다.

@include respond-to('tablet-portrait-only') {
  ...code css
}

// 실제 컴파일 된 코드
@media only all and (max-width: 48rem) {
  ...code css
}

 

media

media query는 단말기, 어떤 특성이나 수치 등에 따라 스타일을 수정할 때 사용한다.

@media only all and (조건문) {실행문}

@media는 미디어쿼리에 시작을 나타낸다.

only는 뒤에 디바이스(여기서는 all)를 지정할 텐데 여기에 지정한 것들만 해석하라는 명령이다. 

all은 미디어 종류을 지정한다.(대표적으로 all, screen, print)를 가장 많이 사용한다.

and는 논리연산자로 only all과 (조건문) 이 모두 충족할 때 {실행문}을 실행시킨다.

(조건문)에는 미디어 특성을 지정한다.(대표젹으로 min-width, max-width)를 사용한다.

 

max-width, min-width

max-width : 해당 너비 이하일때 적용(최대 너비로 제한을 둔다고 생각하면 될 듯)

min-width : 해당 너비 이상일 때 적용(최소 너비로 제한을 둔다고 생각하면 된다)

 

@media only all and (max-width: 10px) { // width값이 10px 이하일때 아래 css 적용
  ...code css
}

@media only all and (min-width: 10px) {// width값이 10px 이상일때 아래 css 적용
  ...code css
}

 

rem, em

em이 먼저 나오고 그다음 rem이 나왔다.

em은 해당 태그 font-size 기준으로 1em이라고 한다.

rem은 html 태그 font-size 기준으로 1 rem이라고 한다.

 

em 관련 질문이다. 아래 span 태그의 font-size는 몇 px 일까?

html {
  font-size: 12px;
}
h2 {
  font-size: 32px;
}
span {
  font-size: 1em;
}

<h2><span>span 1em은?</span></h2>

카운트 셉니다. 5, 4, 3, 2, 1, 0 땡

정답은 32px입니다. span 태그 font-size에 바로 1em을 설정했기 때문에 부모인 h2의 font-size를 상속받는다!!!

 

자 다음은 재탕입니다.

rem 관련 질문이다. 아래 span 태그의 font-size는 몇 px 일까?

html {
  font-size: 12px;
}
h2 {
  font-size: 32px;
}
span {
  font-size: 1rem;
}

<h2><span>span 1rem은?</span></h2>

카운트 셉니다. 5, 4, 3, 2, 1, 0 땡

정답은12px입니다.span 태그 font-size에 바로 1rem을 설정했기 때문에 html 태그 속성인 font-size: 12px;에서 12px을 1 rem으로 사용한다.

 

이제 마무리로 정리를 해보자.

우린 간략하게 필요한 키워드를 살펴봤으니 맨 처음 코드를 다시 살펴보자.

$breakpoints: (
    'mobile-extra-small': (min-width:  21.25rem),        // 340
    'mobile-portrait-only': (max-width:  29.9375rem),    // 479
    'mobile-landscape': (max-width:  51rem),             // 816
    'tablet-portrait': (min-width: 48rem),               // 768
    'desktop-template': (min-width: 48.0625rem),         // 769
    'tablet-portrait-only': (max-width: 48rem),          // 768
    'tablet-big': (min-width: 60.625rem),                // 970
    'desktop': (min-width: 64rem),                       // 1024
    'desktop-medium': (min-width: 75rem),                // 1200
    'desktop-large': (min-width: 90rem),                 // 1440
    'desktop-extra-large': (min-width: 120rem)           // 1920
);

@mixin respond-to($name) {
    @if map-has-key($breakpoints,
    $name) {
        @media only all and #{inspect(map-get($breakpoints, $name))} {
            @content;
        }
    }
    @else {
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.";
    }
}

mixin을 사용하여 언제 어디서나 재사용할 수 있고, if를 사용하여 breakpoints에 해당 name이 있는지 없는지 확인한다.

만약 있으면 @media~ 부분을 실행하고 없으면 @warn으로 경고 메시지를 보여준다.

@media~ 부분을 보면 #{} 이게 보이는데 이걸 사용하면 코드 어디에서만 변숫값을 넣을 수 있다.

inspect 함수를 사용하면 '(따옴표)가 없는 값을 반환받을 수 있다.

map-get은 $breakpoints map에서 원하는 key를 매개변수로 입력하고 값을 반환받는다.

@content는 mixin을 사용할 때 안에 넣은 css 코드들이 그대로 적용된다.

 

아래 예제를 통해 결과를 확인해보자.

// 컴파일 전
@include respond-to('tablet-portrait-only') {
  font-weight: 900;
  font-size: 28px;
}

// 컴파일 후
@media only all and (max-width: 48rem) {
  font-weight: 900;
  font-size: 28px;
}

 

결론

예전에 하드 코딩으로 일일이 하나씩 작업을 했지만, 이걸 알고 나서는 업무 효율이 매우 매우 좋아졌다.

더 좋은 방법이 있으면 언제들 알려주세요!