반응형 웹 디자인

• 사용자들은 다양한 종류의 장치들을 사용합니다,
  - 핸드폰, 데스크탑, 테블릿 등
• 반응형 웹 디자인을 통해 스크린에 보이는 요소를 크기 조절, 숨기기, 줄이기, 확대하기 등 다양하게 조절할 수 있습니다.

뷰포인트

• 뷰포인트는 사용자가 웹 페이지에서 보이는 영역

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

메타 태그를 통해 뷰포인트를 컨트롤할 수 있음

• width=device-width는 디바이스의 스크립 넓이를 따르도록 페이지의 폭을 설정하는 것
• initial-scale=1.0는 페이지가 브라우저에 처음 로드되었을 때, 초기 줌 레벨을 설정하는 것임

Grid-View

• 많은 페이지들은 grid-view에 기반하며 이는 컬럼으로 페이지를 나눈 것을 의미합니다.
  -grid-view는 페이지를 디자인할 때 매우 유용합니다.

• box-sizing속성에 border-box를 설정해 둡니다. 이는 패딩과 보더가 요소의 전체 넓이와 높이에 포함되도록 합니다.

* {
  box-sizing: border-box;
}

• 총 12개의 열을 포함하고 싶으면 100%/12 =>8.33%넓이를 주면 됩니다.
• class="col-숫자"로 설정하여 각각의 클래스에 스타일을 조정해줍니다.

Media Query란?

• CSS3 때 도입된 CSS 기술입니다.
• @media 규칙은 특정 조건이 참일 때만 CSS 속성의 블록을 포함시킵니다.
• 모바일 우선은 다른 디바이스나 데스크탑 디자인 전에 모바일을 기준으로 디자인하는 것입니다.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

• Portrait / Landscape
  - 브라우저의 오리엔테이션에 따라 페이지의 레이아웃을 바꿀 수 있습니다.

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}