반응형 웹은 모바일에 대응 하기 위한 웹 디자인 및 개발 방법론입니다. 특히 요즘같이 웹사이트 디자인이 점점 단순해지는 경향 속에서는 더욱 돋보이는 기술 중에 하나 입니다.

그렇다고 무턱대고 모든 것을 반응형으로 제작하는 것은 적절하지 않습니다. 규모와 쓰임새에 맞는지 충분히 검토 후 반응형 도입을 결정하는 것이 좋으며, 그러기 위해서는 일반적으로 많이 쓰이고 있는 반응형 웹 디자인 레이아웃 패턴들과 그 장단점을 잘 알고 있어야 할 것입니다.

출처 : https://developers.google.com/web/fundamentals/layouts/rwd-patterns/

구글 웹 fundamentals이 소개하는 이 글은, 반응형 웹디자인의 패턴들을 잘 정리하고 있어 이곳에 소개해드리겠습니다.

=====================================================

반응형 웹디자인 패턴들은 빠르게 진화하고 있지만 데스크탑과 모바일 기기를 가로질러 모두 잘 작동하는 패턴들은 많지 않다.

반응형 웹페이지에서 사용되는 대부분의 레이아웃들은 5가지 패턴들로 요약할 수 있다 : mostly flouid, column drop, layout shifter, tiny tweaks 그리고 off canvas. 어떤 경우에는 이 패턴들을 조합하여 사용하기도 한다. 예를 들어 column drop과 off canvas를 조합하는 경우가 있다. 원래 Luke Wroblewski가 정의한 이 패턴들은 모든 반응형 페이지에 있어서 훌륭한 출발점을 제공한다.

패턴들

간단하고 이해하기 쉬운 샘플을 만들기 위해 각 샘플들은 모질라에서 소개하고 있는 유동형 박스 스타일을 사용하여 실제 마크업해서 만들었다. 이것은 primary container 역할을 하는 div 박스로 세 개의 div 박스를 감싸는 식이다. 각 샘플들은 가장 작은 화면을 우선으로 작성하기 시작했고 중단점(breakpoints)은 필요할 때 추가했다. flaxbox 레이아웃 방식은 모던 웹 브라우저를 지원한다.

유동형 Mostly fluid

유동형 패턴은 주로 유동형 격자(grid)로 구성된다. 대형 혹은 중간크기의 스크린에서 이 패턴은 보통 같은 크기로 간주되며, 단지 더 넓은 화면에서는 여백정도만 조정된다. 더 작은 스크린에서 이 패턴은 열(columns)들이 수직 방향으로 쌓이면서 컨텐츠가 재배치 된다. 이 패턴의 중요한 장점은 작은 화면과 큰 화면 사이에 단 하나의 중단점(breakpoints)만 있으면 된다는 것이다.

첨부이미지

샘플보기

실습

가장 작은 화면에서 각 컨텐츠 div들이 수직으로 쌓여있다. 스크린 너비가 600px이 되면 primary div는 가로 100%로 여전하지만 secondary div들은 primary div안에서 두 열로 보여진다. 800px이 되면 container div는 가로폭이 고정되기 시작하고 스크린의 가운데로 정렬된다.

이 패턴을 사용하는 사이트

.container {

      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    .c1, .c2, .c3, .c4, .c5 {
      width: 100%;
    }

    @media (min-width: 600px) {
      .c2, .c3, .c4, .c5 {
        width: 50%;
      }
    }

    @media (min-width: 800px) {
      .c1 {
        width: 60%;
      }
      .c2 {
        width: 40%;
      }
      .c3, .c4, .c5 {
        width: 33.33%;
      }
    }

    @media (min-width: 800px) {
      .container {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
    }

CSS 강좌 | Tips > max-width로 반응형 웹디자인을 위한 이미지 스타일링 하기

Submitted by JB on Wed, 05/14/2014 - 14:50

Category:

CSS

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다.

텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다.

어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다.

이미지 크기를 정하지 않은 경우

이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tips</title>
    <style>
      div {
        width: 400px;
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p><img src="lego-300x200.png"></p>
      <p><img src="lego-500x333.png"></p>
    </div>
  </body>
</html>

이를 해결하는 방법은 max-width 속성을 부여하는 것입니다.

img {
  max-width: 100%;
}

최대 크기를 부모 요소의 크기로 제한하는 것입니다. 가로 세로 비율에 맞게 크기가 줄어듭니다.

이미지 크기를 attribute로 설정한 경우

이미지 크기가 attribute로 설정되어 있으면 max-width 속성을 추가했을 때 가로폭은 줄어들지만 높이는 줄어들지 않습니다. 그래서 원본과 가로 세로 비율이 맞지 않는 문제가 발생합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tips</title>
    <style>
      div {
        width: 400px;
        border: 2px solid red;
      }
      img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div>
      <p><img src="lego-300x200.png" width="300" height="200"></p>
      <p><img src="lego-500x333.png" width="500" height="333"></p>
    </div>
  </body>
</html>

이를 해결하는 방법은 height 속성값을 auto로 지정해주는 것입니다. 원본 비율에 맞게 높이가 조정됩니다.

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

하지만 height: auto;를 추가해도 IE8에서는 여전히 문제가 발생합니다. 해결하는 방법은 width: inherit;를 추가하는 것입니다.

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

이미지 크기를 inline style로 정한 경우

좋은 방법은 아니지만, 이미지 크기를 inline style로 정하는 경우가 있습니다. 예를 들어 다음처럼 크기를 정하는 것이죠.

<img src="lego-300x200.png" style="width: 300px; height: 200px;">

위에서 제시한 방법을 사용해도 가로폭은 조정되나 높이가 변하지 않아 비율이 맞지 않게 됩니다. 이런 경우 스크립트로 style 속성을 제거하면 됩니다.

다음은 jQuery로 style 속성을 제거한 예입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tips</title>
    <style>
      div {
        width: 400px;
        border: 2px solid red;
      }
      img {
        width: inherit;
        max-width: 100%;
        height: auto;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'img' ).removeAttr( 'style' );
      } );
    </script>
  </head>
  <body>
    <div>
      <p><img src="lego-300x200.png" style="width: 300px; height: 200px;"></p>
      <p><img src="lego-500x333.png" style="width: 500px; height: 300px;"></p>
    </div>
  </body>
</html>

최적의 반응형 이미지 만들기

반응형 이미지를 만드는데 우선적으로 적용하는 것이 CSS에서의

 img {max-width: 100%;}

입니다.

브라우져를 줄여보면 창의 크기에 따라 이미지가 알아서 줄어드는걸 보게 될 겁니다. 하지만 저대로 적용을 한다면 데스크탑에서뿐만 아니라 모든 모바일과 스마트 기기에도 같은 이미지 파일을 불러들이게 되죠. 기본 이미지 사이즈가 크고 화소수가 높은만큼 이미지 파일의 용량도 클 수 밖에 없습니다. 큰 용량의 이미지를 모바일 기기에서 불러들인다는건 굉장히 무겁고 버거운 일입니다.

다음 방법은 'CSS 미디어 쿼리'를 추가하는 겁니다. 기본 형식은

 
@media only screen and (min-width: 450px) {
  #background {	
	  background: url(img/small.jpg) no-repeat;
  }    
} 

@media only screen and (min-width: 780px) and (max-width: 1024px) {
  #background {	
	  background: url(img/mid.jpg) no-repeat;
  }    
}

입니다.

스크린 가로크기가 최하 450px부터 779px까지 'small.jpg'를, 최하 780px부터 1024px까지는 'mid.jpg'를 사용하게 됩니다. 하지만 저 방식은 이미지가 고정되는거라 각각의 이미지 크기에서 줄어들거나 커지지 않는 단점이 있습니다.

다음으로 보완해 갈 방법은 display를 이용하는 겁니다. 예를 들어 HTML에

 
<div id="background">
    <div class="big"><img src="img/big.jpg"></div>
    <div class="mid" style="display:none;"><img src="img/mid.jpg"></div>
    <div class="small" style="display:none;"><img src="img/small.jpg"></div>
</div>

그리고 CSS 미디어 쿼리에는

@media only screen and (min-width: 450px) {
  #background .small {	
	  display: block;
  }   
  #background .big {	
	  display: none;
  }  
} 

@media only screen and (min-width: 780px) and (max-width: 1024px) {
  #background .mid {	
	  display: block;
  }  
  #background .big {	
	  display: none;
  }     
}

이렇게 각각 입력합니다.

기본 스크린 상에서는 'big.jpg'가 사용되겠지만, 스크린이 1024px 이하 780px 이상일 때에는 'mid.jpg'가 사용되고 'big.jpg'는 display:none으로 숨겨지게 됩니다. 마찬가지로 780px 미만 450px 이상일 때에는 'small.jpg'가 사용되고 'big.jpg'는 숨겨집니다.

하지만 여기서도 문제점이 발견되는데, dispaly:none으로 사용하여 스크린 상에는 비록 보이지 않더라도 로딩을 시킨다는 문제점이 있습니다.

그렇다면 반응형 이미지를 다루는 최적의 방법은 무엇일까요. 고정되지 않는 이미지로 스크린 사이즈에 따라 유동적으로 크기가 변해야하고, 모든 이미지가 로딩되는 것이 아닌 각각의 스크린 사이즈별로 하나의 이미지만 로딩이 되어야 할 것입니다. 다음 이미지를 한번 보죠.

가로 스크린이 1440px일때 사용되는 이미지의 크기는 무려 442kb 입니다. 그리고 순차적으로 작은 이미지를 로딩시켜서 결국 480px 이하에서는 70kb 크기의 이미지를 로딩하게 됩니다. 442kb에서 70kb는 엄청난 감소이며 모바일 기기에 줄 부담을 최대한 줄인 결과라 할 수 있습니다. 그렇다면 이제 picturefill.js를 이용하여 위의 예와 같은 최적의 반응형 이미지를 만들어 보겠습니다.

The HTML

먼저 상단 head 안에 자바스크립트 파일 링크를 줍니다.

<script src="picturefill.js"></script>
<script src="matchmedia.js"></script>

본격적인 반응형 이미지를 만듭니다. data 속성을 사용하는데요, data-picture로 감싸고 data-src로 각각의 스크린에 보여줄 이미지 파일을 선택하구요, data-media는 @media only screen과 같은 방식으로 이미지를 불러들일 스크린의 크기를 지정합니다.

<span data-picture data-alt="Responsive Images with Picturefill">
      <span data-src="img/small.jpg"></span>
      <span data-src="img/mid.jpg"  data-media="(min-width: 481px)"></span>
      <span data-src="img/big.jpg"  data-media="(min-width: 769px)"></span>
      <span data-src="img/wide.jpg"  data-media="(min-width: 1025px)"></span>

바로 이어서 폴백 이미지를 지정해 줍니다. 자바스크립트를 지원하지 않는 브라우져에 대비해 사용될 이미지를 지정하는 것입니다.

      <noscript>
         <img src="img/fallback.jpg" alt="Responsive Images with Picturefill">
      </noscript>
</span>

responsive-images-with-picturefill.zip

반응형 웹 ,div 이미지

목차

패턴들

유동형 Mostly fluid

실습

이 패턴을 사용하는 사이트

max-width로 반응형 웹디자인을 위한 이미지 스타일링 하기

http://www.cmsfactory.net/node/10639

CSS 강좌 | Tips > max-width로 반응형 웹디자인을 위한 이미지 스타일링 하기

이미지 크기를 정하지 않은 경우

이미지 크기를 attribute로 설정한 경우

이미지 크기를 inline style로 정한 경우

최적의 반응형 이미지 만들기

최적의 반응형 이미지 만들기

The HTML