[반응형 웹] 2. Fluid Grid / Media Query & Viewport / Flexible Box 기본개념

1. Fluid Grid / 가변 그리드

• 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다.
• 가변이라는 단어의 의미는 어떠한 객체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것을 뜻합니다.
• 그리드는 종이에 규칙적인 가격으로 그림을 그리고 싶을 때 우리는 먼저 종이의 길이를 재고 간격을 계산하여 줄자를 종이에 대고 규칙적인 선을 긋는 작업을 뜻합니다.
• 웹 페이지의 가로 크기 또는 세로 크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용되고 있습니다.

  body {
    width: 90%; 
    height: 500px;
    margin: 0 auto;
    background-color: red;
    border: 4px solid black;
  }

2. Media Query & Viewort

• Media Query : 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술
  - 미디어쿼리는 서비스 유저가 사용하는 스마트 기기를 감지하여 웹사이트를 변경하는 기술입니다.
  - 컴퓨터나 디바이스의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요한 기술이다.
  

//브라우저의 width값에 따라서 배경색이 바뀝니다.

@media all and (min-width: 320px) {
  body {
    background-color: blue;
  }
}

@media all and (min-width: 768px) {
  body {
    background-color: grey;
  }
}

@media all and (min-width: 960px) {
  body {
    background-color: black;
  }
}

• Viewport : 화면을 제어하는 기술
  - 뷰포트는 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no">
//'meta'태그를 이용해서 화면의 크기나 배율을 조절해 줘야 미디어 쿼리가 정상적으로 작동할 수 있습니다.

3. Flexible Box

• 플렉서블 박스란 단어에서 알 수 있듯이 가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 새로운 기술입니다.
• 박스를 손쉽게 배치할 수 있는 장점 때문에 반응형 웹에서 자주 사용됩니다.