[웹개발#10] 반응형 웹을 만드는 방법 정리

 

반응형 웹이란?

반응형 웹 Responsive Web 이란 컴퓨터, 태블릿, 스마트폰 등의 여러 디바이스 환경에 따라 웹페이지의 구성이 적절하게 배치되도록 설계된 웹디자인 기법입니다.

그렇다면, 반응형 웹을 만드는 방법은 어떤 것들이 있을까요?

 

1. 미디어 쿼리를 이용한 방법

첫 번째로 소개할 방법은 가장 많이 사용되는 방법 중 하나인 CSS 미디어 쿼리를 이용한 방법입니다. 
일반적으로 아래와 같은 css 코드를 이용합니다.

@media 미디어 타입 (너비 및 높이) {
    (CSS 입력)
}

이 방법의 장점은 하나의 HTML 코드만으로 여러 타입의 웹페이지를 분기하여 구성할 수 있다는 점입니다. 전형적인 PC 웹에서부터, 태블릿, 모바일 등을 모두 아우를 수 있는 멋진 방법이라고 할 수 있습니다.

유용한 팁 하나를 드리자면, 하나의 유형을 기준으로 나머지 타입을 분기하여 사용하는 것이 좋습니다. 
예를 들어 모든 웹페이지를 모바일을 기준으로 제작하는 경우에는 일반 css를 모두 모바일 기준으로 작성하고, 태블릿이나 PC 기준에는 미디어 쿼리를 이용하는 것이죠.

// 1. 모든 CSS를 모바일 기준으로 작성
(CSS 입력)

// 2. 태블릿 기준
@media screen and (min-width: 768px) {
	(CSS 입력)
}

// 3. PC 기준
@media screen and (min-width: 1024px) {
	(CSS 입력)
}

반대로 PC를 기준으로 하자면 이렇게 할 수 있을 겁니다.

// 1. 모든 CSS를 PC 기준으로 작성
(CSS 입력)

// 2. 태블릿 기준
@media screen and (max-width: 1023px) {
	(CSS 입력)
}

// 3. 모바일 기준
@media screen and (max-width: 767px) {
	(CSS 입력)
}

CSS 미디어 쿼리를 이용한 디바이스 해상도별 분기 기준은 아래와 같습니다. 

PC: 1024px 이상
태블릿: 768px ~ 1023px
모바일: 767px 이하

 

2. 미디어 쿼리를 응용한 방법

두 번째로 소개할 방법은 미디어 쿼리를 응용한 방법입니다. 

예를 들어, PC 버전과 모바일 버전의 구성 요소가 다르다면 첫 번째 소개해 드린 방법만으로는 반응형 웹을 구성하는 게 어렵게 느껴질 수도 있습니다. 

그럴 때는 예전에 많이 사용했던 'PC 버전 따로, 모바일 버전 따로' 방법을 여기에 적용하는 거죠.

부트스트랩에는 해상도별로 적용되는 d-block, d-none, d-lg-block, d-lg-none 과 같은 css 클래스를 이용하여 특정 요소를 보이거나 숨길 수 있게 되어 있습니다. 이같은 방식으로 pc, 태블릿, 모바일 버전 html 코드를 모두 작성하여 css 미디어 쿼리를 이용해 특정 해상도마다 적합한 html 코드를 보여주는 방법입니다. 

// HTML 코드

    <div class="wrap_pc">
    </div>

    <div class="wrap_mobile">
    </div>


// CSS 코드

    // 1. 모바일 기준
    @media screen and (max-width: 991px) {
        .wrap_pc { display: none; }
        .wrap_mobile { display: block; }
    }
    // 2. PC 기준
    @media screen and (min-width: 992px) {
        .wrap_pc { display: block; }
        .wrap_mobile { display: none; }
    }

부트스트랩에서 쓰는 방법을 이용하자면 이렇게 표현할 수 있습니다.

// HTML 코드 1 - 모바일 기준

    <div class="d-none d-pc-block">
      (PC 버전)
    </div>
    <div class="d-block d-pc-none">
      (MOBILE 버전)
    </div>


// HTML 코드 2 - PC 기준

    <div class="d-block d-mobile-none">
      (PC 버전)
    </div>
    <div class="d-none d-mobile-block">
      (MOBILE 버전)
    </div>


// CSS 코드

    .d-block {display: block;}
    .d-none {display: none;}

    // 1. 모바일 기준
    @media screen and (max-width: 991px) {
        .d-mobile-none { display: none; }
        .d-mobile-block { display: block; }
    }
    // 2. PC 기준
    @media screen and (min-width: 992px) {
    	.d-pc-none { display: none; }
        .d-pc-block { display: block; }
    }

 

이 외에도 고전적인 여러 방법들이 있겠지만, 요즘은 이 두 가지를 주로 사용하고 있어서 기록해둡니다.