본문 바로가기
카테고리 없음

Study_240616 ( 반응형 웹 )

juni_shin 2024. 6. 16. 02:04

반응형 웹

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

적응형 웹

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

 

저작자표시 비영리 변경금지

티스토리툴바