[SCSS] SCSS로 반응형 작업하기 / Responsive with SCSS in Web

 

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 SCSS로 반응형 하는 방법에 대해 공유하려고 합니다.

웹 개발을 하거나 퍼블리싱을 할 때 반응형은 언제나 번거로운 작업이죠.

SCSS로 반응형 프레임을 미리 잡아두면, 프로젝트마다 쉽게 미디어쿼리를 짤 수 있답니다.

 

먼저, SCSS가 CSS에 컴파일 되도록 설정이 되어 있어야 합니다.

만약 SCSS 설치가 안 되어 있다면, 아래 링크를 눌러주세요.

해당 포스팅을 따라하면, SCSS를 설치 및 연동할 수 있습니다 :)

[SCSS] HTML에 SCSS 적용하는 법 / how to apply css to html

 

SCSS가 적용되어 있나요?

그렇다면 여기서부터 따라해 주시면 됩니다!

 

 

  SCSS로 반응형 작업하는 방법

1. css 폴더 안에 _variable.scss 파일을 만들어 코드를 적어주세요.

variable 뜻은 '변하기 쉬운'이라는 뜻입니다.

해당 파일에서 화면 단위별로 픽셀을 쪼개볼게요. 어떤 화면인지 주석으로 달아놓을게요!

// 모바일
$breakpoint-mobile: 335px;

// 모바일에서 태블릿
$breakpoint-tabletToMobile: 535px;

// 태블릿
$breakpoint-tablet: 720px;

// 태블릿에서 노트북
$breakpoint-laptopToTablet: 960px;

// 노트북
$breakpoint-laptop: 1024px;

// 노트북에서 데스크탑
$breakpoint-desktopToLaptop: 1500px;

// 데스크탑
$breakpoint-desktop: 1800px;

 

 

2. css 폴더 안에 _mixin.scss 파일을 만들어 _variable.scss를 불러와 사용합니다.

맨 상단에 아까 만들어놓은 _variable.scss 파일을 불러오는 코드를 작성합니다.

눈치 채셨겠지만 import할 때 _(밑줄)이 생략되어 있죠?

-(밑줄)이 생략되어 있는 파일은 컴파일러에서 무시되기 때문인데요.

밑줄을 사용하면 이 파일이 '부분 파일'일 뿐이며, CSS 파일로 생성되어서는 안 된다는 것을 Sass가 알 수 있습니다.

 

위에서 우리는 화면별로 픽셀을 쪼개놨었어요.

이제 그 단위를 사용하여 미디어쿼리를 만들어 볼게요.

@import "./variable";

모바일 : 최소 '모바일'사이즈부터 ~ 최대 '모바일에서 태블릿'사이즈까지
@mixin mobile {
  @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tabletToMobile - 1px}) {
    @content;
  }
}

// 모바일에서 태블릿 : 최소 '모바일에서 태블릿'사이즈부터 ~ 최대 '태블릿'사이즈까지
@mixin tabletToMobile {
  @media (min-width: #{$breakpoint-tabletToMobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

// 태블릿 : 최소'태블릿'사이즈부터 ~ 최대 '태블릿에서 노트북'사이즈까지
@mixin tablet {
  @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-laptopToTablet - 1px}) {
    @content;
  }
}

// 태블릿에서 노트북 : 최소 '태블릿에서 노트북'사이즈부터 ~ 최대 '노트북'사이즈까지
@mixin laptopToTablet {
  @media (min-width: #{$breakpoint-laptopToTablet}) and (max-width: #{$breakpoint-laptop - 1px}) {
    @content;
  }
}

// 노트북 : 최소 '노트북'사이즈부터 ~ 최대 '노트북에서 데스크탑'사이즈까지
@mixin laptop {
  @media (min-width: #{$breakpoint-laptop}) and (max-width: #{$breakpoint-desktopToLaptop - 1px}) {
    @content;
  }
}

// 노트북에서 데스크탑 : 최소 '노트북에서 데스크탑'사이즈부터 ~ 최대 '데스크탑'사이즈까지 
@mixin desktopToLaptop {
  @media (min-width: #{$breakpoint-desktopToLaptop}) and (max-width: #{$breakpoint-desktop - 1px}) {
    @content;
  }
}

// 데스크탑 : 최소 '데스크탑'사이즈
@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

 

 

3. style.scss에서 _mixin.scss를 사용합니다.

이렇게 작성해서 브라우저를 폭을 줄여가며 작업을 하시면 되는데요.

저는 개인적으로 화면 단위로 잘 나뉘어졌는지 확인할 때,

가장 상단 background color를 바꿉니다.

 

예를 들어 데스크탑은 흰색, 노트북에서 데스크탑은 노란색 이런식으로 적용을 하는 거죠.

그럼 브라우저 폭을 점점 줄이다보면 상단 배경색이 바뀌겠죠?

그러면 '아~ 미디어쿼리가 잘 적용됐구나~' 하고 알 수 있습니다 :)

@import "./mixin";

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}


// 데스크탑
@include desktop {
	.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}


// 노트북에서 데스크탑
@include desktopToLaptop {
	.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}


// 노트북
@include laptop {
	.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}


// 태블릿에서 노트북
@include laptopToTablet {
	.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}


// 태블릿
@include tablet {
	.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}


// 모바일에서 태블릿
@include tabletToMobile  {
	.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}


// 모바일
@include mobile  {
.visual {
    }
    
    .section {
    }
    
    .footer {
    }
}

 

 

4. 작업 후 scss내용이 css에 반영이 됐는지 꼭 확인해 주세요!

확인 방법은 아래 링크에 나와 있습니다 :)

[SCSS] HTML에 SCSS 적용하는 법 / how to apply css to html