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

2018. 5. 17. 20:30개발을 파헤치다/Web

반응형

반응형이란 무엇인가?

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

스마트폰에서도, 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 이하일 때는 작은 사이즈의 이미지를 보여주는 것입니다.

반응형