“반응형 CSS”, PC·태블릿·모바일 화면을 하나로 잡는다

들어가며

웹사이트를 만들다 보면 PC에서는 화면이 아주 멀쩡하게 보이는데 스마트폰으로 접속하는 순간 레이아웃이 엉망이 되는 경우가 있습니다.

메뉴가 화면 밖으로 밀려나가기도 하고, 이미지가 너무 크게 표시되기도 합니다. 어떤 경우에는 오른쪽에 가로 스크롤까지 생깁니다.

처음 웹 개발을 할 때 이런 문제가 발생하면 HTML 구조가 잘못된 건지, CSS가 잘못된 건지 한참 찾아보게 됩니다.

그런데 이런 문제를 해결하는 데 자주 사용되는 것이 바로 반응형 CSS입니다.

반응형 CSS는 하나의 웹페이지가 PC, 태블릿, 스마트폰처럼 서로 다른 화면 크기에 맞춰 자연스럽게 변화하도록 만드는 방법입니다.

특히 CSS의 @media를 이용하면 화면 너비에 따라 다른 스타일을 적용할 수 있습니다.

반응형 CSS란?

반응형 웹 디자인은 사용자가 어떤 기기를 사용하느냐에 따라 웹페이지의 레이아웃이 자연스럽게 변경되는 방식입니다.

예를 들어 PC에서는 가로로 메뉴가 펼쳐져 있다고 해보겠습니다.

[ 홈 ] [ 회사소개 ] [ 서비스 ] [ 게시판 ] [ 고객센터 ]

화면이 넓기 때문에 이런 구조가 충분히 가능합니다.

그런데 스마트폰에서는 화면이 좁습니다.

PC와 동일한 메뉴를 그대로 표시하면 화면을 벗어나거나 글자가 너무 작아질 수 있습니다.

그래서 모바일에서는 메뉴를 다른 형태로 바꾸거나 화면에 맞게 배치합니다.

이처럼 화면 크기에 따라 CSS를 다르게 적용하는 것이 반응형 웹의 기본적인 개념입니다.

반응형 CSS에서 가장 많이 사용하는 @media

반응형 CSS를 이야기할 때 빠지지 않는 것이 @media입니다.

간단한 예제를 하나 보겠습니다.

.container {
    width: 1200px;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

처음에는 .container의 너비를 1200px로 설정했습니다.

그런데 화면 너비가 768px 이하가 되면 @media 안의 CSS가 적용됩니다.

결과적으로 모바일과 같이 작은 화면에서는 .container의 너비가 100%로 변경됩니다.

이런 식으로 화면 크기에 따라 스타일을 바꾸는 것이 반응형 CSS의 대표적인 사용 방법입니다.

max-width는 무엇일까?

위의 예제에서 중요한 부분이 있습니다.

바로 다음 코드입니다.

@media (max-width: 768px)

max-width는 쉽게 말하면 화면 너비가 특정 값 이하일 때 해당 CSS를 적용하겠다는 의미입니다.

예를 들어

@media (max-width: 768px) {
    ...
}

라고 작성하면 화면 너비가 768px 이하인 환경에서 해당 스타일이 적용됩니다.

따라서 일반적으로 PC에서는 기본 스타일이 적용되고, 화면이 작아지면 모바일용 스타일을 추가로 적용하는 방식으로 사용할 수 있습니다.

물론 프로젝트의 디자인이나 기준에 따라 기준값은 달라질 수 있습니다.

무조건 768px을 사용해야 하는 것은 아닙니다.

모바일 화면에서 메뉴를 바꾸는 간단한 예제

반응형 CSS를 가장 쉽게 이해할 수 있는 예제가 메뉴입니다.

PC에서는 메뉴를 가로로 표시한다고 해보겠습니다.

.menu {
    display: flex;
    gap: 20px;
}

화면이 넓을 때는 메뉴가 가로로 배치됩니다.

하지만 모바일에서는 화면이 좁기 때문에 메뉴를 세로로 변경할 수도 있습니다.

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
        gap: 10px;
    }
}

이렇게 하면 화면 크기가 작아졌을 때 메뉴가 세로 방향으로 변경됩니다.

같은 HTML 구조를 사용하면서 CSS만 다르게 적용할 수 있다는 것이 반응형 CSS의 편리한 부분입니다.

이미지도 반응형으로 만들어야 한다

반응형 웹페이지를 만들면서 자주 놓치는 부분이 이미지입니다.

HTML과 CSS의 레이아웃은 모바일에 맞게 변경했는데 이미지가 원래 크기를 그대로 유지한다면 화면 밖으로 튀어나갈 수 있습니다.

예를 들어 다음과 같은 이미지가 있다고 해보겠습니다.

.image {
    width: 1200px;
}

PC에서는 문제가 없을 수 있습니다.

하지만 스마트폰 화면의 너비보다 이미지가 훨씬 크기 때문에 가로 스크롤이 발생할 수 있습니다.

이럴 때는 이미지가 부모 영역을 넘어가지 않도록 다음과 같은 CSS를 사용하는 방법이 있습니다.

img {
    max-width: 100%;
    height: auto;
}

이렇게 하면 이미지가 부모 영역보다 커지는 것을 방지하면서 원래 비율을 유지할 수 있습니다.

반응형 웹을 만들 때 상당히 자주 사용되는 패턴입니다.

고정된 px 값만 사용하면 생기는 문제

반응형 CSS를 처음 작성할 때 흔히 하는 실수가 모든 요소에 고정된 px 값을 사용하는 것입니다.

예를 들어 다음과 같이 작성했다고 해보겠습니다.

.container {
    width: 1200px;
}

.content {
    width: 1000px;
}

.sidebar {
    width: 200px;
}

PC 화면에서는 적절하게 보일 수 있습니다.

하지만 스마트폰의 화면 너비가 390px 정도라면 이야기가 달라집니다.

화면보다 훨씬 큰 고정 너비를 가진 요소가 존재하기 때문에 가로 스크롤이 생길 수 있습니다.

이런 문제를 줄이기 위해 상황에 따라 %, vw, max-width, min(), max() 등의 CSS 단위를 활용할 수 있습니다.

예를 들어 다음과 같이 작성할 수도 있습니다.

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

이렇게 하면 화면이 넓을 때는 최대 1200px까지 사용하고, 작은 화면에서는 화면 너비에 맞춰 줄어들도록 만들 수 있습니다.

반응형 CSS와 viewport는 함께 확인해야 한다

앞서 살펴본 것처럼 모바일 웹페이지를 만들 때는 CSS만 확인해서는 안 됩니다.

HTML의 viewport 설정도 함께 확인해야 합니다.

일반적으로 다음과 같은 메타태그를 사용합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 설정은 모바일 브라우저에서 페이지의 viewport 너비와 초기 배율을 지정하는 역할을 합니다.

반응형 CSS가 화면 크기에 따라 스타일을 변경한다면, viewport는 모바일 브라우저가 페이지를 표시하는 기준을 잡아주는 역할을 한다고 생각하면 이해하기 쉽습니다.

따라서 모바일 화면이 이상하게 표시된다면 다음 두 가지를 함께 확인해보는 것이 좋습니다.

HTML
└─ viewport 설정

CSS
└─ @media 반응형 설정

둘 중 하나만 제대로 되어 있다고 해서 전체적인 모바일 화면이 정상적으로 만들어지는 것은 아닙니다.

반응형 CSS를 작성할 때 모바일만 따로 만드는 것은 아니다

반응형 웹이라고 해서 PC용 페이지와 모바일용 페이지를 완전히 별도로 만드는 것은 아닙니다.

일반적으로는 하나의 HTML 구조를 기반으로 화면 크기에 따라 CSS를 변경하는 방법을 사용합니다.

예를 들어 기본 스타일을 먼저 작성하고 모바일 환경에서 변경할 부분만 @media 안에 넣을 수 있습니다.

.card {
    width: 48%;
    padding: 20px;
}

@media (max-width: 768px) {
    .card {
        width: 100%;
        padding: 15px;
    }
}

PC에서는 카드가 두 개씩 배치되고 모바일에서는 한 줄에 하나씩 표시되도록 만들 수 있습니다.

이런 방식으로 화면 크기에 맞춰 레이아웃을 자연스럽게 변경할 수 있습니다.

모바일에서 가로 스크롤이 생긴다면?

반응형 웹을 개발하다 보면 가장 쉽게 발견할 수 있는 문제가 바로 가로 스크롤입니다.

스마트폰에서 화면을 좌우로 움직여야 전체 페이지를 볼 수 있다면 어느 요소가 화면보다 크게 만들어져 있는지 확인해볼 필요가 있습니다.

대표적으로 다음과 같은 부분을 확인할 수 있습니다.

• 고정된 width
• 지나치게 큰 이미지
• 긴 텍스트
• 고정된 테이블 너비
• position으로 화면 밖에 배치된 요소
• white-space: nowrap
• 큰 min-width 값

특히 PC에서 정상적으로 보인다고 해서 모바일에서도 정상이라는 의미는 아닙니다.

개발자 도구의 모바일 화면을 이용해 여러 화면 크기로 테스트하는 습관을 들여두면 이런 문제를 찾기가 훨씬 편합니다.

반응형 CSS는 직접 화면을 줄여보면서 확인하는 것이 좋다

CSS를 작성한 뒤에는 실제 화면 크기를 바꿔보는 것이 중요합니다.

PC 화면에서만 확인하지 말고 브라우저 개발자 도구를 이용해 스마트폰 크기로 변경해보는 것도 좋은 방법입니다.

예를 들어 다음과 같은 크기를 가정하고 테스트할 수 있습니다.

PC
1920px

태블릿
768px ~ 1024px

모바일
360px ~ 430px

물론 실제 서비스에서는 다양한 기기와 화면 크기를 고려해야 합니다.

특정 기기의 숫자만 맞추는 것보다는 화면이 줄어들었을 때 레이아웃이 자연스럽게 변화하는 구조를 만드는 것이 중요합니다.

반응형 CSS를 처음 적용한다면

처음부터 복잡한 CSS를 작성할 필요는 없습니다.

우선 다음 정도부터 시작해도 충분합니다.

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
    }

    .content {
        width: 100%;
    }
}

이후 실제 화면에서 문제가 발생하는 부분을 하나씩 수정하면 됩니다.

반응형 웹은 한 번에 완성하는 것보다 PC → 태블릿 → 모바일 순서로 화면을 확인하면서 조금씩 조정하는 방식이 오히려 편할 때가 많습니다.

마무리

반응형 CSS는 단순히 모바일에서 화면을 작게 만드는 기술이 아닙니다.

사용자의 화면 크기에 따라 웹페이지의 구조와 크기, 배치 등을 자연스럽게 변경하는 방법입니다.

핵심적으로 기억할 부분은 @media입니다.

@media (max-width: 768px) {
    /* 모바일에서 적용할 CSS */
}

여기에 모바일에서 변경해야 하는 스타일을 작성하면 됩니다.

그리고 이미지에는 max-width: 100%를 적용하고, 지나치게 큰 고정 width를 사용하지 않는 것도 중요합니다.

또한 모바일 웹페이지를 만들 때는 HTML의 viewport 설정도 함께 확인해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

결국 반응형 웹을 만들 때는 HTML의 viewport 설정 + CSS의 @media + 유동적인 레이아웃을 함께 생각하는 것이 좋습니다.

PC에서는 잘 보이는데 스마트폰에서 화면이 깨진다면 무작정 CSS를 하나씩 수정하기보다는 먼저 고정된 너비가 있는지, 이미지가 너무 큰지, @media가 제대로 적용되고 있는지부터 확인해보세요.

처음에는 조금 복잡해 보여도 몇 번 직접 화면 크기를 바꿔가며 테스트하다 보면 반응형 CSS의 흐름이 자연스럽게 눈에 들어오기 시작합니다.