반응형 웹 만들기 Day2

1. 목표: 그리드 / 레이아웃

기기나 환경에 따라 

레이아웃 (화면구성) 을 바꿀 수 있도록

2. 가변 그리드

웹페이지를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술

Fluid Layout, Flexible Layout, Flexible Grid

일반적으로 12개의 칼럼을 가진 테이블처럼 사용한다고 한다. 

https://www.w3schools.com/css/tryresponsive_grid.htm

3. 뷰포트

모니터나 기기의 화면을 통해 보이는 영역 / 화면에 보이는 영역을 제어하는 기술

PC: 해상도 /  MO: 실제 기기의 화면크기

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

- <meta name="viewport" ...> 크기와 비율 제어
- The width=device-width  너비 = 디바이스의 화면크기
- The initial-scale=1.0  초기 줌레벨이 100% 
- 출처: https://www.w3schools.com/css/css_rwd_viewport.asp

4. 미디어 쿼리 Media Queries

화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술

- 기준: 모바일

- 600px 이상: 태블릿 

- 768px 이상: PC 

body{

background: #e65d5d;

}

@media all and (min-width: 600px){

body{

background: #e65d5d;

}

}

@media all and (min-width: 768px){

body{

background: #e65d5d;

}

}

5. 플렉서블 박스 Flexible Box

가변적인 박스를 만들고, 배치하는 기술

RWD Desktop

RWD Phone

✮ 웹 호스팅 / FTP 없어도 크롬에서 모바일 디바이스에 맞게 뷰포트 조정해볼 수 있습니다. 

1) 01_2. html 이미지 소스 경로를 변경합니다.

<img src="./source/img_01.jpg">

2) 모바일 뷰포트 확인

크롬에서 화면크기 조정하면 됩니다. 크롬은 웹페이지 테스트하기 최적의 장소!

- 경로: 마우스 왼쪽버튼 > 검사 Inspect > Toggle Device toolbar > Device 선택