반응형 웹

반응형 웹

• 반응형은 우리가 다양한 기기에서 인터넷을 할 때 화면이 자동으로 바뀌는 것
• 어떤 기기를 사용해도 화면이 편하게 보일 수 있도록 웹사이트를 만들 때 다양한 크기의 화면에 맞게 디자인 필요
• 컨텐츠는 거의 동일하게 제공하나 디바이스 마다 폰트의 크기, 레이아웃, 구성을 다르게 주어 사용자에게 효과적으로 내용을 전달할 수 있는 디자인을 ‘각 디바이스 별로’ 제공하는 것

적응형 웹

• 적응형은 각 기기마다 미리 정해진 화면 크기에 맞게 웹사이트를 만드는 것
• 그 기기 이외의 다른 기기에서는 화면이 잘 맞지 않을 수 있음
• 적응형으로 제작된 사이트의 경우 접속하는 디바이스에 따라서 URL이 변경되기도 함

반응형 웹 개발 방법

•  CSS 파일을 사용
  • CSS 파일에 미디어쿼리를 작성하여 리액트 컴포넌트에 적용. 리액트 컴포넌트에서 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를 사용
  • styled-components 라이브러리를 사용하면 JavaScript 파일 내에서 스타일을 정의
  • // SampleComponent.jsx

    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 라이브러리를 사용
  • react-responsive 라이브러리를 사용하면 미디어 쿼리를 리액트 컴포넌트에서 쉽게 사용
  • // SampleComponent.jsx

    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 의 theme을 활용하여 스크린 사이즈, 컬러, 폰트 등 다양한 디자인 프리셋을 만들어 활용
  • 디바이스 별로 대표 넓이(break point)를 지정하여 구현하게 됨. break point는 자연스럽게 변화하는 반응형 웹 사이트의 일종의 경유지라고 생각하면 됨. 디바이스 별, 즉 웹사이트의 가로 넓이 별 디자인을 지정해주려면 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) { ... }

          },

        },

      };

      
      
      
  • default로 min-width를 따라 가는 것을 확인할 수 있는데 단계 별로 조건에 맞는 css를 덮어 씌우게 되기 때문에 css 최적화를 위해서는 모바일 퍼스트(모바일에서 더 많이 쓰이는) 서비스라면 min-width, 데스크탑 퍼스트 서비스라면 아래와 같이 max-width를 기준으로 구현하는 것이 좋음. class에 screen에 대한 class를 주지 않는다면 가장 기본값은 맨 위에 선언된 값이 됨. 
    • /** @type {import('tailwindcss').Config} */

      module.exports = {

        theme: {

          screens: {

            "2xl": { max: "1535px" },

            // => @media (max-width: 1535px) { ... }

      
      

            xl: { max: "1279px" },

            // => @media (max-width: 1279px) { ... }

      
      

            lg: { max: "1023px" },

            // => @media (max-width: 1023px) { ... }

      
      

            md: { max: "767px" },

            // => @media (max-width: 767px) { ... }

      
      

            sm: { max: "639px" },

            // => @media (max-width: 639px) { ... }

          },

        },

      };
    • /** @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) { ... }

          },

        },

      };
    • <img class="w-16 md:w-32 lg:w-48" src="...">
    • 위와 같이 적용을 할 경우에 default인 sm 사이즈에서는 img의 width가 width: 4rem; /* 64px */, md 사이즈에서는 width: 8rem; /* 128px */, lg 사이즈에서는 width: 12rem; /* 192px */ 이 적용이 될 것
  • 색상을 미리 지정하여 사용할 수 있음. 서비스 전체의 컬러의 통일성과 코드 가독성에 좋음
    • /** @type {import('tailwindcss').Config} */

      module.exports = {

        theme: {

          screens: {

            sm: "480px",

            md: "768px",

            lg: "976px",

            xl: "1440px",

          },

          colors: {

            blue: "#1fb6ff",

            purple: "#7e5bef",

            pink: "#ff49db",

            orange: "#ff7849",

            green: "#13ce66",

            yellow: "#ffc82c",

            "gray-dark": "#273444",

            gray: "#8492a6",

            "gray-light": "#d3dce6",

          },

        },

      };

아래처럼 사용 가능

<span className="block md:hidden lg:hidden">모바일 환경</span>

<span className="hidden md:block lg:hidden">태블릿 환경</span>

<span className="hidden lg:block">데스크탑 환경</span>