반응형웹 소개와 실습(1)

🔸 학습내용 - 반응형 웹이란?

1. 반응형웹

PC, 모바일, 태블릿 등 다양한 브라우저에서 사용자의 접속 환경에 맞춰 레이아웃을 자연스럽게 바꾸어 주는 것.

2. 반응형 웹의 장점

• 모든 기기에서 접속이 가능하다.
• 가로모드에 맞춰서 레이아웃을 변경 할 수 있다.
• 사이트 유지관리가 용이하다.
• 최신 웹 표준을 따른다.

3. 반응형 웹의 단점

• 사이트의 디자인이 단순
• 하위 버전 브라우저와 호환성 문제가 발생 가능하다.
  (미디어쿼리는 css3 기술이기 때문)

4. 뷰포트 지정하기

• 뷰포트 : 모바일 화면에서 실제로 내용이 표시되는 영역
• 뷰포트의 기본형

  <meta name="viewport" content="속성=값", "속성=값"...>
  
  ☝️ 속성과 값
   - 뷰포트 너비 : width=device-width 또는 크기
   - 뷰포트 높이 : height=device-height 또는 크기
   - 확대/축소 가능여부 : user-scalable=yes 또는 no
   - 초기 확대/축소 값 : initial-scale=1~10
     (1 : 확대 없이 원래 크기로)
     
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 뷰포트 크기를 확인할 수 있는 사이트

  	yesviz.com/devices.php

---

🔸 학습내용 - 미디어쿼리

1. 미디어쿼리
   사이트에 접속하는 디바이스에 따라 서로다른 스타일시트를 적용해 주는 것

2. 미디어쿼리 구문

   ☝️ 웹문서의 가로 세로 속성
    @media screen and (min-width: 1440px) { /* 너비가 최소 1440px */}
    
    ☝️ 단말기의 가로 세로 속성
    @media screen and (min-device-width: 375px) and (min-device-height: 812px) { /* iphone x 미디어쿼리 */}
    
    ☝️ 화면 회전 속성(portrait:세로모드 / landscape:가로모드)
    @media screen and (min-device-width: 812px) and (orientation: landscape) { /* iphone x를 가로로 회전하는 미디어쿼리 */ }

3. 미디어쿼리의 중단점 : 모바일 / 태블릿 / 데스크탑

4. 모바일퍼스트 : 모바일기기 레이아웃을 기본으로 css를 작성하고, 이후 데스크탑 쪽으로 맞추는 방식
   -> 모바일 기기가 제약이 많기 때문에 먼저 고려해 처리속도, 화면크기 최적화를 먼저 진행

• 320px ~ 768px 미만 : 모바일기기
• 768px ~ 1024px 미만 : 태블릿
• 1024px ~ : PC