React 리액트 - 리액트 style 미디어 사이즈 적용 breakpoint.js

 
 

breakpoint.js

 
 

 
 
- 미디어 사이즈를 정의하는 파일
- 모바일, pc, 태블릿 등 미디어별로 이펙트 부여 가능
 
 
<styles > breakpoint.js>

const size ={
  mobile: "480px",
  tablet: "768px",
  laptop: "1024px",
  desktop: "1280px"
}

export const media = {
  mobile: `(max-width: ${size.mobile})`,
  tablet: `(max-width: ${size.tablet})`,
  laptop: `(max-width: ${size.laptop})`,
  desktop: `(max-width: ${size.desktop})`
}

 
 
<style.js>

import styled from "styled-components";
import { fadeIn } from "../../keyframes/keyframes";
import { media } from "../../styles/breakpoint";

const S = {}

  S.Title = styled.p`
    ${h1Bold}
    opacity: 0;
    animation: ${fadeIn} 1s ease-in forwards;

    @media ${media.mobile} {
      font-size: 10px;
    }
  `

export default S;

 
 
styles.js에 미디어 코드를 추가해 적용

@media ${media.mobile} { }

 
- 미디어 쿼리 내 font-size: 10px; 등 세부적인 사항 추가 가능
 
 
<Styled04.jsx>

import React from 'react';
import S from './style';

const Styled04 = () => {
  return (
    <div>
      <S.Title>
        MY H1 FONT! APPLIED MY OWN GUIDE
      </S.Title>
      <S.SubTitle>
        H3 REGULAR - MY FONT STYLE SUBTITLE
      </S.SubTitle>
      <S.SnowBg
        width={"300px"}
        height={"300px"}
        alt="snowbg" 
      />
    </div>
  );
};

export default Styled04;

 
 
- 기존에 만들어 둔 코드의 스타일에 적용됨
 
 
<결과화면>

 
 
https://developernew.tistory.com/448

React 리액트 - 리액트 style 애니메이션 적용

https://developernew.tistory.com/445 

React 리액트 - 폰트 스타일 적용 방법

 

 

https://developernew.tistory.com/447

React 리액트 - 리액트 style 활용 방법 theme.js

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일