# 8-MediaQuery

코알라코딩

●

scss

# 목차

1. 개요
2. ex
- 2.1. map 작성
- 2.2. map-get 작성
- 2.3. 사용

# 1. 개요

scss의 변수와 믹스인, map 을 사용하여 복잡한 반응형 코드를 간단히 작성할수 있다.

화면 크기를 픽셀 단위로 저장하는 변수를 만든다. 각 변수는 화면 중단점을 할당한다.
각 중단점이 키와 연결된 맵을 만든다.
이렇게 하면 해당 키를 사용해 특정 중단점의 픽셀 값을 쉽게 적용할수 있다

# 2. ex

실행화면

아래와 같은 경로에 파일을 생성한다.

root/
	├─basic.html
	└─scss/
		└─mixin/
			└── _media.scss

style.scss 파일을 열고 _media.scss를 임포트 한다.

style.scss
@charset "utf-8";
//base
@import 'base/base';
//mixin
@import 'mixin/mixin';
@import 'mixin/extend';
@import 'mixin/media';
@import 'mixin/theme';
//layout
@import 'layout/layout';
@import 'layout/gallery';

_media.scss를 열고 화면 크기를 변수로 작성한다.

mixin/_media.scss
$mobile: 568px;
$tablet: 768px;
$desktop: 992px;

# 2.1. map 작성

maps함수는 반복실행시 사용하면 편리하다.

array 와 다른점은 값의 구분을 인덱스가 아닌 키로 한다는 점이다.

# 사용법

map 함수에서 다룰수 있는 자료형의 변수를 생성한다.
- $변수:("키":값)
map.get() 의 argument로 적용할 변수와 키를 전달한다
- map.get($변수,"키")

# 규칙

키는 숫자,문자 모두 사용할수 있으나 중복사용은 불가하다.
키에 해당하는 값은 중복이 가능하다.
변수를 각각 선언하는 대신, 관련 있는 변수들을 한번에모아 maps로 만들어서 사용하면 간단히 코드를 작성할수 있다.

map 을 적용하기 위해 화면중단점을 변수로 작성한다.

mixin/_media.scss
$breakpoints: (
	'sm': (
		min-width: $mobile,
	),
	'md': (
		min-width: $tablet,
	),
	'lg': (
		min-width: $desktop,
	),
);

Review

$breakpoints 변수를 선언하고 'sm', 'md', 'lg'의 키를 정의한다.
각 키는 하위맵을 가진다.
각 하위의 맵에 'min-width' 키를 정의한다
'min-width' 키에 값으로 미리 정의 한 $mobile, $tablet, $desktop 변수를 할당하여 각각의 화면 크기를 지정한다.

# 2.2. map-get 작성

mixin/_media.scss
@mixin responsive($size) {
	$query: map-get($breakpoints, $size);
	$min-width: map-get($query, min-width);
	@media (min-width: #{$min-width}) {
		@content;
	}
}

Review

mixin responsive 는 매개변수 $size 를 받는다
지역변수 query 를 선언한다.
- map-get 함수에 인수로 변수$breakpoints변수에서 $size 변수값과 일치하는 키를 찾아 $query 에 할당한다
- 결과적으로 $query 에는 $breakpoints 변수의 키 $size 에서 검색된 값이 할당된다.
- 예를 들어 'sm' 이라는 값을 전달받으면 $breakpoints 의 키 중 sm 의 값이 할당되며 그 값은 min-width: $mobile 가 된다.
$min-width 변수는 2번의 $query 변수의 min-width 키에 해당하는 값을 할당한다.
- $min-width 에는 min-width: $mobile 의 값인 $mobile 이 할당된다.
@media 쿼리를 생성한다 이때 화면 중단점의 값은 변수 $min-width를 할당한다.
@content 은 믹스인 사용 시 믹스인에 전달되는 스타일을 포함시킨다.

# 2.3. 사용

layout/_layout.scss를 열고 작성한다.

layout/_layout.scss
main {
	@extend %padding;
	section {
		background-color: yellow;
		@include responsive('sm') {
			background-color: pink; //568~
		}
		@include responsive('md') {
			background-color: blue; //768~
		}

		@include responsive('lg') {
			background-color: red; //768~
		}
	}
}

scss