반응형 웹 디자인 ( Responsive Web Design)

Content Is Like Water ( 콘텐츠를 물과 같게 )

You put water into a cup, it becomes the cup ( 컵에 물을 담으면, 컵에 담긴 물이고 )

You put water into a bottle, it becoms the bottle ( 병에 물을 담으면, 병에 담긴 물이고 )

You put water into a teapot, it becoms the teapot ( 주전자에 물을 담으면, 주전자에 담긴 물이다 )

반응형 웹 디자인을 나타내는 말중에 가장 공감이 되는 말이었다.

같은 물이지만 물이 들어가는 컨테이너에 따라서 물의 모양이 바뀌듯이

같은 컨텐츠를 다루지만 컨텐츠가 담기는 컨테이너에 따라서 컨텐츠가 나타나는 방법이 달라진다.

컨테이너에 맞게 컨텐츠를 디자인 하라!

다양한 크기와 형태의 디바이스에 알맞는 웹 디자인을 하는것이 웹을 디자인하고 개발하는데 필수가 되었다.

 

- Mobile First Design

모바일을 베이스로 먼저 디자인하고 태블릿과 데스크탑으로 확장해 나가는 디자인 방식

 

- Media Queries

웹페이지의 뷰는 스크린 사이즈에 따라서 미디어 타입에 따라서 달라진다.

특정 px 를 기준으로 breakpoint 를 지정해서 디자인 변경이 가능하다

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

* only screen : 구 버전의 브라우저에서 only screen 을 안쓰면 호환 문제가 있을수 있다. only screen 을 쓰기를 권장한다.