반응형 웹

다양한 기기에 맞게 화면이 자동으로 변하는 디자인

• 컨텐츠는 거의 동일하게 제공하나 디바이스마다 폰트의 크기, 레이아웃, 구성을 다르게 보여준다

개발 방법

CSS파일을 사용한 방법

예시코드

/* styles.css */
.container {
  padding: 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

리액트 컴포넌트에서 임포트

import React from 'react';
import './styles.css';

const SampleComponent = () => {
  return (
    <div className="container">
      반응형 웹
    </div>
  );
}
export default SampleComponent;

Styled-components를 사용한 방법

예시코드

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
`;

const SampleComponent = () => {
  return (
    <Container>
      반응형 웹
    </Container>
  );
}

export default SampleComponent;

react-responsive 라이브러리를 사용한 방법

예시코드

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const SampleComponent = () => {
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

  return (
    <div style={{ padding: isMobile ? '10px' : '20px' }}>
      반응형 웹
    </div>
  );
}

export default SampleComponent;

Tailwind CSS를 사용한 방법

각각의 디바이스 가로 넓이 별 디자인을 지정해주려면 tailwind.config.js에 screen 설정을 한다

예시코드

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

• 단계 별로 조건에 맞는 css를 덮어 씌우게 되기 때문에 css 최적화를 위해서는
  모바일퍼스트(모바일에서 더 많이 사용하는)서비스라면 min-width, 데스크탑 퍼스트 서비스라면
  max-width를 기준으로 구현하는것이 좋다

공식문서

• https://tailwindcss.com/docs/responsive-design
• https://tailwindcss.com/docs/theme
• https://tailwindcss.com/docs/screens

적응형 웹

각 기기마다 미리 정해진 화면 크기에 맞게 웹사이트를 만드는 것

• 특정 기기의 화면 크기에 따라 디자인을 미리 정해놓고 그에 맞게 보여준다
  ❗️ 적응형으로 제작된 사이트의 경우 접속하는 디바이스에 따라서 URL이 변경되기도 한다