<p><span style="color: #555555;" data-ke-size="size18">반응형 웹 (responsive web)이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기에 최적화가 되는 웹사이트</span></p><p> </p><p><span style="color: #555555;" data-ke-size="size18">미디어쿼리는 화면의 크기등을 기준으로 해당하는 스타일을 선언하는 것을 말합니다</span></p><p><span style="color: #555555;" data-ke-size="size18">하나의 스타일시트 파일안에 작성시</span></p><p><span style="color: #000000;"><span>@media screen</span> <span style="color: #000000;">(max</span><span style="color: #000000;">-width</span><span style="color: #000000;">:</span> 1000px<span style="color: #000000;">)</span> <span style="color: #000000;">and</span> <span style="color: #000000;">( <span style="color: #000000;" data-ke-size="size16">min</span><span style="color: #000000;" data-ke-size="size16">-width</span><span style="color: #000000;" data-ke-size="size16">:</span><span style="color: #000000; background-color: #ffffff;" data-ke-size="size16"> 800px</span></span><span style="color: #000000;">)</span></span> <span style="color: #000000;">{</span> ... <span style="color: #000000;">}</span></p><p><span style="color: #000000;" data-ke-size="size16"><span>@media screen</span> <span style="color: #000000;">(max</span><span style="color: #000000;">-width</span><span style="color: #000000;">:</span> 1000px<span style="color: #000000;">)</span> </span><span style="color: #000000;" data-ke-size="size16">{</span><span style="color: #333333; background-color: #ffffff;" data-ke-size="size16"> ... </span><span style="color: #000000;" data-ke-size="size16">}</span></p><p> </p><p><span style="color: #000000;" data-ke-size="size16">미디어쿼리 별로 스타일시트 파일을 작성시</span></p><p><span style="color: #000000;" data-ke-size="size16"><link rel="stylesheet" media="screen and(max-width: 1000px)" href="./css/style.css"></span></p><p> </p><p> </p><p> </p><p> </p><p><span style="color: #000000;" data-ke-size="size18">뷰포트는 웹페이지가 사용자의 화면에 보여지는 영역을 의미합니다</span></p><p><span style="color: #000000;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p> </p><p>- <b>width=device-width</b> : 페이지의 너비를 기기의 스크린 너비로 설정합니다.</p><p>                                     즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.</p><p>- <b>initial-scale=1.0</b> : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다.</p><p>                              0~10 사이의 값을 가집니다.</p><p>그외의 속성</p><p>- <b>minimum-scale</b> : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다.</p><p>- <b>maximum-scale</b> : 늘릴 수 있는 최대 크기를 지정합니다. 0~10 사이의 값을 가집니다.</p><p>- <b>user-scalable</b> : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정</p>
<!-- -->
