반응형웹 적용

[kimyouknow]

About

1. 반응형웹 적용

Description

1. 반응형웹 적용

• 데스크탑에 우선 개발

/* 데스크탑 우선 개발 예시 */

/* 데스크탑 */

@media screen and (max-width:1023px) {
/* 타블렛 */
}

@media screen and (max-width:767px) {
/* 모바일 */
}

• css variable 설정 (src/styles/GlobalStyle.tsx)

 html {
    /* global */
    --z-index-top: 999;
    --z-index-second: 500;
    --padding-xl: 100px;
    --padding-l: 60px;
    --padding-m: 50px;
    --padding-s: 40px;
    --main-content-width: 760px;
    --space-l: 16px;
    --space-m: 12px;
    --space-s: 8px;
    --icon-small: 18px;
    --icon-medium: 24px;
    --icon-large: 36px;
    --icon-xLarge: 64px;

    @media ${media.medium} {
      --padding-xl: 90px;
      --padding-l: 40px;
      --padding-m: 30px;
      --padding-s: 20px;
      --space-m: 10px;
      --space-s: 6px;
      --main-content-width: 90%;
    }

    @media ${media.small} {
      --padding-xl: 80px;
      --padding-l: 30px;
      --padding-m: 20px;
      --space-m: 8px;
      --space-s: 4px;
      --main-content-width: 95%;
    }
  }

• theme 변수 설정: 특정 컴포넌트에만 적용해야하는 css 설정시 사용
  • 네이밍 참고 desktop, mobile이 아닌 large, small로 작성한 이유 : https://github.com/airbnb/javascript/tree/master/css-in-javascript#naming

type DeviceType = 'xLarge' | 'large' | 'medium' | 'small'

const breakpoints: Record<DeviceType, number> = {
  xLarge: 1360,
  large: 1200,
  medium: 768,
  small: 600,
}

/**
 * 사용방법 예시
 *  export const Header = styled.div`
 *    height: 400px;
 *    @media ${({ theme }) => theme.media.medium} {
 *    height: 300px;
 *    }
 *  `
 */
const media = {
  xLarge: `screen and (max-width: ${breakpoints.xLarge}px)`,
  large: `screen and (max-width: ${breakpoints.large}px)`,
  medium: `screen and (max-width: ${breakpoints.medium}px)`,
  small: `screen and (max-width: ${breakpoints.small}px)`,
}

export default media

Result

i.e.e.e.2023-02-08.i.i.5.23.42.mov

Ref

CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features를 참고해서 breakpoint를 설정하는 방법 더 찾아보기

• https://dori-yunho.notion.site/44f32435003e4b66ae7b2aac0a1ca94c
• https://velog.io/@cookie004/css-variables-for-react-devs
• https://cocoder16.tistory.com/37
• https://nykim.work/84