[CSS] 반응형 웹페이지 디자인 (Responsive Webpage Design)

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

재배포 수정하지 마세요. 

 

반응형 웹 디자인이란

 

반응형 웹 디자인이란 당신의 웹페이지가 모든 기기에서 보기 좋게 만들어진 디자인이다. 

웹페이지는 데스크탑 뿐만아니라 태블릿 pc, 모바일, 노트북 등 여러 다양한 기기에서 보인다. 그래서 기기와는 상관없이 보기 좋게 만들어져야 한다. 

 

반응형 웹 디자인은 프로그램이나 javascript가 아닌 오직 html과 css를 사용해서 리사이즈하거나 숨기거나 키우거나 움직이게 만들어 어느 화면에서도 아름답게 만들어야 한다.

또한 작은 화면에서 정보를 빼는 것이 아닌 어느 기기에서도 맞는 정보를 채택하여 보여주는것이다. 

 

 

 

 

 

 

Viewport 뷰포트

 

뷰포트란 사용자 웹페이지의 보여지는 영역을 말한다. 태블릿이나 모바일이 나오기 전에는 오직 컴퓨터 화면을 위해 고정된 사이즈와 디자인으로 고안되었지만, 더 다양한 기기들이 나오는 만큼 브라우저는 기기들의 크기에 맞는 크기로 작아졌다. 

 뷰포트를 설정하기 위해서는 html의 <meta> tag를 사용한다.

 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

 

width=device-width : 기기의 스크린 가로사이즈에 맞게 페이지의 가로를 정한다. 

initial-scale=1.0 : 브라우저에 처음 페이지가 로드되었을 때 기본 줌 레벨을 정한다. 

 

 

 

※ Viewport를 정하기 위해서는 몇가지 주의사항이 있다.

 

사용자들은 데스크탑이던 모바일이던 가로가 아닌 세로로 스크롤을 내리는 것에 익숙하다.

그러므로 페이지 가로의 다른 부분을 보기 위해 스크롤을 가로로 움직이거나 줌 아웃을 하게 만드는 것은 사용자에게 매우 불편을 준다. 

 

• 가로 길이가 긴 요소를 사용하지 말것  : 뷰포트보다 가로로 긴 요소들은 전체를 다 보기위해 스크롤을 움직이거나 줌아웃을 해야한다. 
• 컨텐츠가 특정 뷰포트 사이즈에 잘 맞춰져있는 것에 의존하지 말것 : 데스크탑에 특화된 사이즈로만 웹페이지를 제작해서는 안된다. 
• 작은 화면과 큰 화면 모두를 위해 css media quries을 이용해 다른 스타일로 적용할 것

 

 

 

 

Using The width Property 가로속성 사용하기 

 

그림이나 영상을 웹페이지에 사용하기 위해서 width 속성을 잘 이용해야한다. 

 

 

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

 

가로가 페이지 가로크기의 100% 값이므로 세로 값은 auto로 주면 자동적으로 화면크기에 맞게 늘어나고 줄어들게 된다. 

 

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

 

가로의 최대값을 100%로 준다면 화면크기에 맞게 줄어들기는 하지만 적용 이미지나 영상의 원래 크기보다 늘어나지는 않는다. 

 

 

 

Background Images 배경이미지

 

 

배경이미지 또한 리사이즈하거나 스케일을 조정할 수 있다. 

 

 

 

background-size 

 

• contain : 배경이미지는 해당 컨텐츠의 영역에 맞게 크기가 변화하지만 이미지의 비율을 지킨다. 
• 100% 100% : 해당 컨텐츠의 영역 전체에 맞게 이미지의 크기를 늘린다. 
• cover : 컨텐츠의 전체영역을 다 덮는다. 해당 이미지의 비율은 변화하지 않기 때문에 넘치는 부분이 잘릴 수 도 있다. 

 

 

 

    /* For devices smaller than 400px: */
    body {
      background-image: url('img_smallflower.jpg');
    }

    /* For devices 400px and larger: */
    @media only screen and (min-device-width: 400px) {
      body {
        background-image: url('img_flowers.jpg');
      }
    }

 

미디어 쿼리를 이용하여 화면사이즈에 맞게 여러가지 css를 변경할 수 있다.