반응형 웹 레이아웃 만들기 - 이미지 바꾸기

반응형이란 무엇인가?

웹은 사용자가 편하게 드나들 수 있는 플랫폼입니다.

스마트폰에서도, Window에서도, Mac에서도, 태블릿에서도 별다른 설치나 설정없이 브라우저만 있으면 접근할 수 있기 때문입니다.

이러한 장점을 가지고 있는 웹이지만 웹 페이지 혹은 웹 사이트를 개발하는 개발자 입장에서는 매우 난감한 상황이 벌어질 수 있습니다.

바로 우리가 사용하는 모니터, 스마트폰, 태블릿등 기기들의 화면 크기가 모두 다르다는 사실 때문이죠.

상상이 되시나요? 그 모든 기기들의 크기에 따라 웹 페이지가 다르게 보여야한다면 대체 얼마나 많은 코드가 존재해야 할까요?

반응형(Responsive)라는 말은 이런 문제를 극복하고자 나오게 된 개념입니다.

즉, 기기의 너비(width)와 높이(height)에 따라 웹 페이지를 다르게 보여주는 것입니다.

쉽게 말해서, 너비가 1024픽셀 이상일 때에는 메뉴에 아이콘을 보여줘! 같은 명령을 수행할 수 있다는 것입니다. 사이즈 조절도 물론 가능하겠죠?

반응형 웹을 만들 수 있는 여러가지 프레임워크가 나오게 되면서 모바일용 웹페이지를 따로 만든다거나, 개발자들을 쪼아서 수 많은 예외처리를 하는 일은 더이상 없을 것으로 보입니다.

이번에는 대표적인 반응형 웹 프레임워크인 Twitter의 Bootstrap으로 너비가 달라졌을 때 어떻게 다른 이미지를 보여줄 수 있는지 살펴보도록 하겠습니다.

반응형 디자인 사이즈 살펴보기

모바일의 경우 대부분이 다음의 3가지 사이즈에 해당됩니다.

• Mobile Small → 320px
• Mobile Medium → 375px
• Mobile Large → 425px

노트북의 경우 대부분이 다음의 3가지 사이즈에 해당합니다.

• Laptop → 1024px
• Laptop Large → 1440px
• 4K → 2560px

태블릿의 경우 다음의 사이즈에 해당합니다.

• Tablet → 768px

물론 기기마다 모두 사이즈가 다르기 때문에 이에 맞는 설정을 해주어야 합니다.

위처럼 크게 분류해서 반응형 설정을 한다면, 기기별로 사용자가 더 편리하게 볼 수 있는 웹 페이지를 만들 수 있습니다.

너비에 따라 바뀌는 이미지 적용하기

/*
    Mobid S - 320px
*/
@media(max-width: 320px){
    .container_header{
        width: 440px;
    }
    .navbar-brand{
        padding: 14px 20px;
    }
    .navbar-toggle{
        margin-right: 125px;
    }

}

위에 코드처럼 CSS 파일에 Media 쿼리를 추가해줍니다.

이 Media 쿼리는 기기가 설정한 사이즈의 조건에 해당되면 프로그래밍한 내용을 실행해줍니다.

• max-width → 예를 들어 320px이 설정되어 있다면, 320px까지 해당 설정을 적용하겠다는 의미가 됩니다.
• min-width → 예를 들어 1024px이 설정되어 있다면, 1024px부터 해당 설정을 적용하겠다는 의미가 됩니다.

이것을 응용하면 디바이스 사이즈에 따라 다른 이미지를 보여주는 것도 가능합니다.

<div class="container clearfix">
       <div class="row">
             <img id="example_image_large" src="img/page4/drawable-xxxhdpi/1.png" alt="" class="img-responsive"/>
             <img id="example_image_small" src="img/mobile/people/drawable-xxxhdpi/1_page_5.png" alt="" class="img-responsive"/>
       </div>
</div>

위처럼 2개의 이미지를 div 태그 안에 준비해놓습니다.

/*
    이미지 반응형 조정
*/
@media(min-width: 1024px){
    #example_image_large{
        display: block;
    }
    #example_image_small{
        display: none;
    }
}

@media(max-width: 768px){
    #example_image_large{
        display: none;
    }
    #example_image_small{
        display: block;
    }
}

그리고 CSS 파일에서 사이즈에 따라 특정 이미지를 보여주는 것입니다.

1024xp 이상일 때 큰 사이즈의 이미지를 보여주고, 768px 이하일 때는 작은 사이즈의 이미지를 보여주는 것입니다.