끄적끄적 개발 블로그입니다.

2 분 소요

모바일 최적화

저는 이것이 모바일 화면에서도 잘 적용되고 잘 보였으면 하기 때문에 모바일 최적화를 해줄 겁니다.

ViewPort 설정

반응형 웹에서 가장 중요한 설정 중 하나는 meta viewport를 설정하는 것입니다. 이 설정은 화면 크기에 맞게 콘텐츠를 어떻게 렌더링할지 지정합니다. public/index.html파일의 <head>태그 내에 아래와 같은 메타 태그를 추가해야합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

width=device-width: 화면의 너비를 디바이스의 화면 크기와 맞추도록 설정합니다.

initial-scale=1: 처음 로드될 때 화면 크기의 비율을 1로 설정합니다.

maximum-scale=1: 사용자가 화면을 확대할 수 없도록 설정합니다.

user-scalable=no: 화면 확대/축소를 금지할 수 있습니다.

CSS MediaQueries 사용

미디어 쿼리는 화면 크기에 따라 다른 스타일을 적용할 수 있게 해주는 CSS의 강력한 기능입니다. 화면 크기별로 스타일을 다르게 적용하여 모바일, 태블릿, 데스크톱 등 다양한 환경에 맞는 디자인을 제공할 수 있습니다.

/* 기본 스타일 (모바일 화면) */
body {
  font-size: 14px;
}

/* 화면이 768px 이상일 때 (태블릿 이상) */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 화면이 1024px 이상일 때 (데스크탑) */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

Flexbox 또는 Grid 레이아웃 사용

Flexbox와 CSS Grid 는 레이아웃을 반응형으로 만드는 데 매우 유용한 도구 입니다.

Flexbox는 요소들이 자동으로 크기를 조정하게 해주며, Grid는 더 복잡한 레이아웃을 유연하게 구성할 수 있습니다.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 100%; /* 기본적으로 100% 너비 */
}

@media (min-width: 768px) {
  .item {
    flex: 1 1 48%; /* 화면이 768px 이상이면 48% 너비 */
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 30%; /* 화면이 1024px 이상이면 30% 너비 */
  }
}

CSS-in-Js 사용(styled-components, Emotions 등)

리액트에서 styled-components나 emotion과 같은 라이브러리를 사용하면 컴포넌트 별로 스타일을 관리하면서 반응형 웹을 쉽게 구현할 수 있습니다.

import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

const Item = styled.div`
  flex: 1 1 100%; /* 기본적으로 100% 너비 */

  @media (min-width: 768px) {
    flex: 1 1 48%; /* 768px 이상에서는 48% 너비 */
  }

  @media (min-width: 1024px) {
    flex: 1 1 30%; /* 1024px 이상에서는 30% 너비 */
  }
`;

function App() {
  return (
    <Container>
      <Item>Item 1</Item>
      <Item>Item 2</Item>
      <Item>Item 3</Item>
    </Container>
  );
}

export default App;

반응형 이미지 사용

반응형 웹에서 중요한 요소 중 하나는 이미지 입니다. 이미지가 화면 크기에 맞게 적절히 크기를 조정해야합니다. srcset을 사용하여 다양한 화면 크기에서 최적화된 이미지를 로드할 수 있습니다.

<img 
  src="image-small.jpg" 
  srcset="image-large.jpg 1024w, image-medium.jpg 768w, image-small.jpg 480w" 
  sizes="(max-width: 1024px) 100vw, 50vw" 
  alt="Example Image"
/>

srcset: 여러 해상도의 이미지를 정의합니다.

sizes: 화면 크기에 따라 이미지를 어떻게 표시할지 설정합니다.

Responsive Design Libraries 활용

리액트에서는 다양한 반응형 웹 디자인 라이브러리가 제공됩니다.

React Bootstrap이나 Material-UI 를 사용하면 쉽게 반응형 레이아웃을 구현할 수 있습니다.

import { Container, Row, Col } from 'react-bootstrap';

function App() {
  return (
    <Container>
      <Row>
        <Col xs={12} md={6} lg={4}>Item 1</Col>
        <Col xs={12} md={6} lg={4}>Item 2</Col>
        <Col xs={12} md={6} lg={4}>Item 3</Col>
      </Row>
    </Container>
  );
}

export default App;

여기서 xs, md, lg는 화면 크기별로 컬럼의 너비를 조정하는 역할을 합니다.

카테고리:

업데이트:

댓글남기기

참고