반응형 웹이란?

모바일 기기와 웹 디자인

반응형 웹 디자인 : 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것

반응형 웹의 장, 단점

1. 모든 스마트 기기에서 접속 가능

2. 가로 모드에 맞추어 레이아웃 변경 가능

3. 사이트 유지, 관리 용이(미디어 쿼리와 플렉스 박스는 최신 모던 브라우저만 지원)

모바일 기기를 위한 기본 다지기, 뷰포트

뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역

기본형 : <meta name="viewport" content="<속성1=값>, <속성2=값>, ...">

ex) 스마트폰 화면 너비에 맞추고 초기 화면 배율 1

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

가변 그리드 레이아웃

px를 %로 변경

(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100

가변 레이아웃과 가변 요소

가변 글꼴 : em, rem

글자 크기(em) = 글자 크기(px) / 16px

em은 부모 요소의 크기에 영향을 받음. 단점

rem(r은 root)은 처음부터 기본 크기를 지정

가변 이미지

1. max-width:100%

2. <img> 태그와 srcset 속성 (화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이밎 파일을 지정할수있어)

기본형 : <img src="<이미지>" srcset="<이미지1>[, <이미지2>, <이미지3>, ...]">

3. <picture> 태그와 <source> 태그 - 상황별로 다른 이미지 표시하기

<source> 태그를 사용하는 방법은 <video> 태그나 <audio> 태그에서 <source> 태그를 이용해 여러 조건의 파일을 따로 지정하는 방법과 비슷

srcset : 이미지 파일의 경로

media : srcset에 지정한 이미지를 표시하기 위한 조건

type : 파일 유형

sizes : 파일의 크기

	<picture>
		<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
		<source srcset="images/shop-medium.jpg" media="(min-width:768px)">
		<source srcset="images/shop-small.jpg" media="(min-width:320px)">
		<img src="images/shop.jpg" alt="fill with coffee" style="width:100%;">
	</picture>

가변 비디오

max-width : 100%