반응형 웹(Responsive Web)
작성해둔 웹 페이지의 구성과 디자인이 데스크탑, 태블릿, 스마트폰 등 다양한 접속 기기에 반응하여 달라지게 하는 기술을 반응형 웹이라고 한다. 여기서 반응형 웹의 기본이 되는 뷰 포트의 개념, 그리드 뷰, 반응형 웹의 폰트 등을 알아보는데 그리드 뷰에서 가장 많이 사용되는 12열_그리드_시스템의 동작 원리와 이를 활용하여 실제로 웹 페이지를 만들어 본다.
반응형 웹 디자인(Responsive Web Design)
반응형 웹 디자인은 하나의 웹 페이지로 데스크 톱, 태블릿, 스마트 폰 등 다양한 기기에서 콘텐츠가 제대로 보이게 하는 기술이다.
일반적으로 문서의 너비가 고정된 고정 레이아웃에 맞게 개발된 웹 페이지는 스마트 폰에서 보면 이미지나 글자가 너무 작아지게 되어 이용하기 어렵다. 이럴 때 반응형 웹 디자인 기술을 이용하면 스마트 폰 전용 모바일 사이트를 별도로 제작할 필요가 없이 하나의 웹 사이트로 다양한 기기의 화면에 페이지를 제대로 표시할 수 있다.
뷰 포트(View Port)
뷰 포트는 데스크 탑이나 스마트 폰의 브라우저 화면 크기를 말하는데 메뉴 바와 탭 영역을 제외한 영역을 말한다.
| 스마트 폰/태블릿 | 해상도 | 뷰 포트 |
| iPhone 6,7,8 | 750x1334 | 375x667 |
| iPhone 6 Plus, 7 Plus, 8 Plus | 1080x1920 | 414x736 |
| Galaxy Note 10 | 1080x2280 | 412x869 |
| Galaxy S8, S8+, S9, S9+ | 1440x2960 | 360x740 |
| LG G5 | 1440x2560 | 480x853 |
| iPad Air 1&2, iPad 3rd & 4th | 1536x2048 | 768x1024 |
| Galaxy Tab 10 | 800x1280 | 800x1280 |
위 표에서와 같이 스마트 폰과 태블릿의 뷰 포트 크기가 다양하기 때문에 미디어 쿼리를 이용해서 뷰 포트의 크기에 맞추어 CSS의 정의를 달리할 필요가 있다. 데스크 탑과 달리 스마트 폰은 기기 해상도에 비해 화면의 크기가 작기 때문에 위의 뷰 포트를 고려하지 않고 웹 페이지르 만들면 글자와 이미지가 굉장히 작아져서 이용이 불편해 진다.
=>이런 단점을 보완하기 위해서 스마트 폰용 웹 페이지를 제작할 때에는
<meta name="viewport" content="width=device-width, initial-scale=1.0">식으로 <meta> 태그를 사용해서 모바일 기기의 뷰 포트를 설정해야 한다. 여기서 width=device-width는 웹 페이지의 너비를 모바일 기기의 뷰 포트 너비와 일치시켜서 화면에 표시하라고 브라우저에게 알리는 것이다. initial-scale=1.0은 초기 배율을 기본 값인 1.0으로 설정한다는 의미이다.
meta 태그의 특성
| 속성 | 설명 |
| width | 픽셀단위로 뷰 포트의 너비 설정. 기본은 device-width |
| height | 픽셀단위로 뷰 포트의 높이 설정, 기본은 devide-height |
| initial-scale | 초기 배율로써 기본은 1.0이고, 0.5는 반으로 축소, 2.0은 두배 확대 |
| user-scalable | yes는 사용자가 화면 확대/축소 가능, no는 화면 확대/축소 불가, 기본은 no |
| minimum-scale | 사용자가 축소할 수 있는 최소값. 기본은 0.25 |
| maximum-scale | 사용자가 확대할 수 있는 최대값, 기본은 5.0 |
뷰 포트의 너비를 모바일 기기의 너비와 일치시키고, 초기 배율을 1.0, 화면 확대/축소 가능, 최대 3배까지 확대할 수 있게 한다면, <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable= yes, maximum-scale=3.0"> 하면 된다.
그리드 뷰(Grid View)
그리드 뷰는 웹 페이지를 제작할 때 열(column)을 기반으로 하는 것을 말한다. 대부분 웹 페이지는 열을 기본으로 해서 하나나 여러 개의 열을 병합해서 블록을 표현한다.
=>가변 그리드(Fluid Grid)는 웹 페이지에 접속하는 다양한 기기의 해상도에 맞추어 열의 너비가 가변적으로 변하게 한다. 그리드 열을 가변적으로 만들기 위해서는 너비를 설정할 때 px 대신에 %를 사용하면 된다.
=>px와 %를 동시에 사용하기
예를 들어서 어느 설정, 즉 메뉴의 너비를 25%로 설정했을 때 뷰 포트의 너비가 넓어지면 에 메뉴의 너비가 늘어나고 줄어들면 같이 줄어든다. 하지만 어떤 경우에 메뉴의 너비는 고정시키고 그 옆의 사이드바 너비만 가변적으로 설정할 필요가 있을 수도 있는데 이럴 때 calc() 함수를 사용하면 된다. clac(100% - 300px) 하면 뷰 포트의 전체 너비 100%에서 300픽셀을 뺀 결과가 메뉴의 너비가 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin : 0; padding : 0; box-sizing : border-box; text-align : center; }
#wrap { width : 90%; height : 250px; margin : 0 auto; border : solid 3px red; }
#a { width : 300px; height : 150px; float : left; background-color : yellow; }
#b { width : calc(100% - 300px); /* () 안에는 %, px와 +, -, *, /가 사용된다 */
height : 150px; float : left; background-color : green; }
</style>
</head>
<body>
<div id="wrap">
<div id="a">요소 A</div>
<div id="b">요소 B</div>
</div>
</body>
</html>'일단 해보는 코딩 > CSS' 카테고리의 다른 글
| [CSS] 플렉서블 박스(Flexable Box) (0) | 2022.06.24 |
|---|---|
| [HTML/CSS] 반응형 웹 폰트/기술 (0) | 2022.06.24 |
| [CSS] 레이아웃 배치 설정 (float, clear 설정) (0) | 2022.06.21 |
| [CSS] 회원가입, 로그인폼 만들기 (0) | 2022.06.21 |
| [CSS] CSS 활용 (IMG,TABLE), Display, list 꾸미기 (0) | 2022.06.20 |