웹 프론트엔드

반응형 웹(Responsive Web)

토리쟁이 2024. 1. 18. 02:57

 

웹 디자인 기법에는 적응형 웹과 반응형 웹이 존재한다.

그 중에서도, 이번 포스팅에서는 반응형 웹을 중점적으로 공부해 보려고 한다.

 

 

 

 

 

 

 

반응형 웹이란 무엇일까?

 

나무위키와 네이버에 쓰여져 있는 정의는 아래와 같다.

 

 

반응형 웹

  • 디바이스의 디스플레이 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹
  • 디바이스의 종류와 화면 크기에 실시간 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹

풀어서 설명해 보자면..

옛날과 달리, 요즘에는 컴퓨터, 노트북, 태블릿, 스마트폰 등 다양한 기기들로 웹 페이지에 접속한다. 이와 같은 디바이스들은, 같은 종류의 디바이스라고 할지라도 제품에 따라 굉장히 다양한 디스플레이 크기가 존재한다. 전자 기기들의 화면 크기가 다른 탓에, 어떠한 기기에서는 정상적으로 작동하는 웹 페이지가 다른 기기에서는 깨지기도 했으며, 이로 인해 개발자들은 여러 가지 버전의 웹 페이지를 만들어야 했다. 이러한 불편함을 해결하기 위해 크기에 따라 웹 페이지가 반응하는 반응형 웹 페이지가 나오게 되었다. 요즘에는 대부분 적응형이 아닌 반응형 웹으로 개발되며, 반응형 웹 구현에 사용되는 대표적인 기술은 CSS3이다. 미디어 쿼리를 이용하면 기기 화면의 폭이나 높이에 따라 레이아웃을 자동으로 구성할 수 있다.

 

(참고로, 적응형 웹은 웹 페이지를 다양한 화면 크기별로 미리 제작하여 보여주는 것이다.

사용자가 모바일 환경인지 PC환경인지에 따라-)

 

 

 

 

이제, 반응형 웹을 구현하기 위한 공부를 해보자

 

 

반응형 웹을 구현하기 위해서는, 먼저 뷰포트(Viewport)에 대해 알아야 한다.

 

 

뷰포트(Viewport)

  • 사용자에게 실제로 보여지는 웹 페이지(화면)의 영역
  • 웹 페이지의 컨텐츠들을 모바일 브라우저로 출력하여 실제 사용자들에게 보여지는 영역
  • html문서의 meta 태그를 활용하여 실제 보여지는 영역에 대한 값을 지정 가능
  • 기기마다 화면 사이즈가 다르기 때문에 기기에 맞춰 디자인을 하기 위해 필요한 크기 요소
  • 디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹 페이지 제공이 가능함
<head>
    <meta name="viewport" content="속성:속성값">  <!--뷰포트를 지정하는 기본 문법-->
</head>

<!-- 가장 보편적으로 사용되는 뷰포트의 메타태그
<meta name="viewport" content="width=device-width, initial-scale=1">
-->

 

 

 

 

미디어 쿼리(Media Query)

  • 서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하게 하는 기술
  • 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성

 

기본 문법은 다음과 같다.

 

미디어의 유형은 default 값이 all이라서 딱히 적으나 안 적으나 상관없다.

(all은 print와 screen 둘 다 가능)

 

사용 방법은 매우 간단하다.

미디어 쿼리를 적고 그 안에 코드를 작성하면 된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리</title>
    <style>
        /* 가로가 500px 이상일 때*/
        @media screen and (min-width:500px) {
            body{
                background-color: skyblue;
            }
        }

        /*가로가 300px 이하일 때*/
        @media screen and (max-width:300px) {
            body{
                background-color: orange;
            }
        }

        /* 세로가 500px 이상일 때*/
        @media screen and (min-height:500px) {
            p{
                background-color: green;
            }
        }

        /*세로가 300px 이하일 때*/
        @media screen and (max-height:300px) {
            p{
                font-family: Georgia, 'Times New Roman', Times, serif;
            }
        }
    </style>
</head>
<body>
    <p>미디어 쿼리 실습</p>
</body>
</html>

 

위의 예제의 미디어 쿼리 문법을 보면, 미디어 유형을 다 썼는데 사실상 아래와 같이 적어도 잘 돌아간다.

/* 가로가 500px 이상일 때*/
        @media (min-width:500px) {
            body{
                background-color: skyblue;
            }
        }

 

 

또한, 지정된 범위도 가능하다.

/*~부터 ~까지 범위 작성 가능*/
        @media(min-width:300px) and (max-width:600px) {
            /* 비교 연산자 사용 가능*/
            /*@media(300px <= width <= 600px){
            }*/
            .more-and-less{
                background-color: purple;
            }
        }

 범위는 and 로 표현해도 되고, 비교 연산자로 표현해도 된다.

 

 

그리고 크기가 아닌, 가로/세로 모드일 때로 나눠서 적용도 가능하다.

	/* 가로 모드*/
        @media screen and (orientation: landscape){
            body{
                background-color: pink;
            }
        }

        /* 세로 모드*/
        @media (orientation: portrait){
            body{
                background-color: gold;
            }
        }

 

 

 

 

참고)

 

Breakpoint(중단점)

  • media query가 적용될 지점
  • 규칙없이 중구난방으로 사용할 경우, 개발하기 힘들기 때문에 현업에서는 Breakpoint를 정하고,  Breakpoint 마다 layout을 변경
  • Breakpoint는 정하기 나름임