[CSS] 반응형 레이아웃의 기본, 중단점( styled-componets 에서 중단점 적용 팁)

들어가는 말

오늘은 반응형 레이아웃의 기본이 되는 중단점에 대해 알아보고, 실제 styled-components 에 적용하는 방법과 사용 팁에 대해 정리해볼까 합니다.

중단점이란 뭘까요?

CSS에서 중단점(breakpoints)은 반응형 웹 디자인에서 화면의 크기에 따라 스타일을 변경할 수 있게 하는 기준점을 말합니다. 다양한 화면 크기(모바일, 태블릿, 데스크탑)에 맞는 스타일을 적용하기 위해 사용됩니다.

 

최근에는 중단점을 모바일 우선으로 두고, 스타일을 적용하고 있다는데 이를 어떻게 적용하고 있는지 향후 예시를 통해 알아볼 것입니다.

 

중단점 사용 방법

중단점은 주로 미디어 쿼리(media queries)를 통해 정의합니다. 특정 화면 너비 조건에 따라 스타일을 적용할 수 있도록 하는 것이 미디어 쿼리입니다.

@media (min-width: 768px) {
  /* 너비가 768px 이상일 때 적용할 스타일 */
}

@media (max-width: 767px) {
  /* 너비가 767px 이하일 때 적용할 스타일 */
}

 

일반적인 중단점 예시

그럼 W3C 에서 권고하는 중단점은 어떻게 될까요? 권고 기준으로 디바이스 크기에 따라 자주 사용되는 중단점은 다음과 같습니다.

초소형 (모바일)	max-width: 575.98px
작은 화면 (모바일)	min-width: 576px
중간 화면 (태블릿)	min-width: 768px
큰 화면 (데스크탑)	min-width: 992px
초대형 화면	min-width: 1200px

 

모바일을 기준으로 max-width를 575.98px 를 우선순위로 적용하고, 그 후 min-width 를 적용하여 우선순위에 따라 계층적으로 중단점을 잡은 것을 볼 수 있습니다.

 

그럼 이를 실제 적용한 예시를 살펴봅시다.

 

예시 코드

여기서 max-width: 575.98px 로 잡지 않더라도, .container 에 적용된 속성은 중단점에 속하지 않는 지점에 1순위로 적용됩니다.

/* 기본 스타일 (모바일 우선) */
.container {
  width: 100%;
  padding: 10px;
}

/* 태블릿 이상일 때 스타일 */
@media (min-width: 768px) {
  .container {
    width: 80%;
    padding: 20px;
  }
}

/* 데스크탑 이상일 때 스타일 */
@media (min-width: 992px) {
  .container {
    width: 70%;
    padding: 30px;
  }
}

 

헷갈릴 수 있는 min-width와 max-width 에 대해 잠시 살펴보면,

@media (min-width: value)	value 이상의 화면 너비에서 적용
@media (max-width: value)	value 이하의 화면 너비에서 적용

 

와 같습니다. 이를 적절한 너비 간격으로 설정하여 반응형 레이아웃을 쉽게 설계할 수 있습니다.

 

반응형 디자인을 위한 중단점 설계 시 고려 사항

앞서 초반에 모바일 우선 접근이 최근 트렌드라고 하였습니다. 최근 모바일 사용자가 많기 때문에, 사용자 경험을 높이기 위한 흐름의 반영이라고 할 수 있습니다. 이를 포함해서 반응형 디자인을 설계할 때 추가적으로 고려해야 할 부분은 아래와 같습니다.

 

1. 모바일 우선 접근: 기본 스타일은 모바일에 맞게 작성하고, 화면이 커질수록 더 복잡한 레이아웃을 적용하는 것이 일반적입니다.
2. 콘텐츠 중요도: 중요한 콘텐츠가 항상 잘 보이도록 화면 크기에 따라 적절히 배치합니다.
3. 유연한 그리드: 화면 너비에 따라 그리드 레이아웃을 변경하여 콘텐츠가 적절히 배치되도록 설계합니다.

 

styled-componets 에서 중단점 사용 예시와 팁

스타일드 컴포넌트를 사용할 때, 중단점(breakpoints)을 적용하려면 미디어 쿼리를 스타일 내에 포함시킬 수 있습니다. styled-components에서는 일반 CSS와 동일하게 미디어 쿼리를 사용하지만, 자바스크립트 변수를 통해 중단점을 더 깔끔하고 재사용 가능하게 관리할 수 있습니다.

 

[기본] 기본 사용 예시

import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  padding: 10px;

  /* 태블릿 이상일 때 적용 */
  @media (min-width: 768px) {
    width: 80%;
    padding: 20px;
  }

  /* 데스크탑 이상일 때 적용 */
  @media (min-width: 992px) {
    width: 70%;
    padding: 30px;
  }
`;

 

위 코드는 기본적으로 모바일 화면에서 width: 100%로 설정되고, 화면 크기가 768px 이상일 때는 width: 80%, 992px 이상일 때는 width: 70%로 설정됩니다.

 

[사용 팁] 중단점 변수를 사용한 방식

중단점을 코드 여러 곳에서 사용할 수 있도록 변수로 관리하면 더 효율적입니다. 이때 자바스크립트 객체에 중단점을 정의한 후 재사용할 수 있습니다.

// breakpoints.js (중단점 관리 파일)
export const breakpoints = {
  mobile: '576px',
  tablet: '768px',
  desktop: '992px',
  largeDesktop: '1200px',
};

// styled component에서 중단점 적용
import styled from 'styled-components';
import { breakpoints } from './breakpoints';

const Container = styled.div`
  width: 100%;
  padding: 10px;

  @media (min-width: ${breakpoints.tablet}) {
    width: 80%;
    padding: 20px;
  }

  @media (min-width: ${breakpoints.desktop}) {
    width: 70%;
    padding: 30px;
  }

  @media (min-width: ${breakpoints.largeDesktop}) {
    width: 60%;
    padding: 40px;
  }
`;

 

중단점을 활용한 복잡한 예시

다음은 다양한 스타일 요소에 중단점을 적용하는 예시입니다.

import styled from 'styled-components';
import { breakpoints } from './breakpoints';

const Card = styled.div`
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* 기본 폰트 크기 */
  font-size: 14px;

  /* 태블릿 이상일 때 폰트 크기 조정 */
  @media (min-width: ${breakpoints.tablet}) {
    font-size: 16px;
  }

  /* 데스크탑 이상일 때 폰트 크기와 패딩 조정 */
  @media (min-width: ${breakpoints.desktop}) {
    font-size: 18px;
    padding: 30px;
  }

  /* 큰 데스크탑 이상일 때 */
  @media (min-width: ${breakpoints.largeDesktop}) {
    font-size: 20px;
    padding: 40px;
  }
`;

 

중단점을 변수로 사용 시 장점

• 재사용성: 중단점을 변수로 관리하면 코드의 여러 부분에서 동일한 중단점을 사용할 수 있어 유지보수가 용이합니다.
• 가독성: 미디어 쿼리를 CSS 파일이 아닌 스타일드 컴포넌트 내에서 직접 사용하므로, 컴포넌트 스타일을 한 곳에서 관리할 수 있습니다.
• 모바일 우선 디자인: 스타일드 컴포넌트와 미디어 쿼리를 함께 사용하면 모바일 우선(Mobile First) 접근 방식을 쉽게 적용할 수 있습니다.

이 방식으로 중단점을 정의 후 스타일드 컴포넌트에 적용하면 반응형 웹 디자인을 효율적으로 구현할 수 있습니다. 참고하셔서 한 번 적용해보면 좋을 것 같습니다.

 

나가는 말

오늘은 반응형 디자인 및 레이아웃 설계 시 중요한 기준이 되는 중단점과 이를 스타일드 컴포넌트에서 적용 시 팁에 대해서 정리해보았습니다. 이 글이 중단점에 대해 이해가 잘 안 되셨던 분이나 스타일드 컴포넌트에 적용해보고자 했던 분들에게 도움이 되길 바라며 이만 글을 줄여봅니다.