React 리액트 반응형 디자인 | SCSS 미디어 쿼리 @media

CSS 미디어쿼리를 SCSS 문법에 적용한 반응형 레이아웃 예제

 

---

기본틀 App.js

import "./App.scss";

function App() {
  return (
    <div className="App">
      <div>DIV A</div>
      <div>DIV B</div>
      <div>DIV C</div>
    </div>
  );
}

export default App;

 

---

App.SCSS 작성

 

* 참고로 scss를 사용하려면 커맨드창에서 "sass"를 다음과 같이 설치 해주어야 함

npm install sass

 

1. scss만의 문법( @mixin 과 변수$ )을 사용하여 브레이크포인트 선언

/* Responsive layout, breakpoint */

$mobile-max: 360px;
$tablet-max: 1023px;
$desktop-min: 1024px;

@mixin mobile{
  @media (max-width: $mobile-max){
    @content;
  }
}
@mixin tablet{
  @media (max-width: $tablet-max) and (min-width: $mobile-max){
    @content;
  }
}
@mixin desktop{
  @media (min-width: $desktop-min){
    @content;
  }
}

 

2. @include로 불러와서 css 추가 

.App {
  margin: 0 auto; // self alignment
  display: flex;
  justify-content: center; // children's horizontal alignment
  max-width: $desktop-min;
  color: white;
  border: 1px solid black;
  & div{
    flex: 1;
    border: 1px solid black;
  };

  @include mobile{
    background-color: blue;
    flex-direction: column;
  }
  @include tablet{
    background-color: blueviolet;
  }
  @include desktop{
    background-color: red; 
  }
}

 

결과

 

1) 창크기 360px 이하

- 파란색 배경

- flex-direction: column

 

2) 창크기 360px 초과 1023px미만

- 보라색 배경

- flex: 1 (행 전체 너비로 확장)

 

3) 창크기 1024px 이상

- 빨간색 배경

- max-width: 1024px (최대크기 제한)

- margin: 0 auto (중앙정렬)