반응형 웹
학습 목표
- 미디어 쿼리가 무엇인지 살펴봅니다.
- 반응형 웹을 구현하는 방법을 이해합니다.
Preview
현대 웹 브라우저는 '미디어 쿼리(Media Query)'기능을 지원합니다. 미디어 쿼리는 미디어 타입에 따라 CSS를 적용할 수 있는 기능입니다. 미디어 타입(Media Type)은 장치(Device)를 의미하는데 프린터, 데스크톱, 스마트폰, 태블릿PC, 시청각 장애인 등이 사용하는 특별한 웹 브라우저를 나타냅니다. 따라서 미디어 쿼리를 사용하면 프리넡, 데스크톱, 스마트폰, 태블릿PC, 시청각 장애인용 웹 사이트를 구축할 수 있습니다.
1. 반응형 웹 소개
반응형 웹은 웹 페이지 하나로도 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지를 의미합니다. 예를 들어 http://helloworld.naver.com/helloworld/textyle을 너비가 넓은 웹 브라우저로 접속하면 [그림 8-1]처럼 출력합니다.
[그림 8-1] 화면의 너비가 넓을 때
하지만 웹 페이지의 너비가 줄어들면 [그림 8-2]처럼 웹 페이지의 레이아웃이 변경됩니다. 따라서 해상도가 중간정도인 태블릿PC에서는 왼쪽 그림을 출력하고, 스마트폰에서는 오른쪽 그림을 출력합니다.
하나의 페이지만 개발해도 여러 장치(데스크톱, 태블릿PC, 스마트폰)에 대응할 수 있으므로 개발 효율성은 물론 유지 보수적 측면에서 큰 장점이 됩니다. 일반적으로 사용자에게 저옵를 보여준은 신문사 사이트, 블로그 사이트, 메일 사이트 등은 반응형 웹으로 많이 만듭니다.
이러한 반응형 웹 페이지는 미디어 쿼리를 사용해 개발합니다. 미디어 쿼리를 사용하면 스마트폰의 방향 파악은 물론 시각 장애인용과 청각 장애인용 웹페이지도 개발할 수 있습니다. 그럼 반응형 웹을 차근차근 살펴봅시다.
2. meata 태그와 viewport meta 태그
meta 태그는 추가적인 웹 페이지 정보를 제공합니다. 예를 들어 국내 블로그 사이트인 티스토리에서 글의 소스 보기를 누르면 , title 태그 바로 아래에 다음 형태의 meta 태그가 있습니다.
이렇게 meta 태그를 입력하면 검색 엔진이 웹 페이지를 읽을 때 제목과 내용을 뽑아 [그림 8-3]처럼 검색되게 합니다.
ITCookbook HTML5 프로그래밍을 위한 페이지
http://test.test.test.co.kr
2017.12.09 meta 태그의 title 속성과 description 속성 입니다.
[그림 8-3] meta 태그를 읽은 검색 엔진
원래 meta 태그는 검색 엔진을 하려고 페이지 정보 등을 서버에서 조합해 제공하는 용도이기에 지금까지는 따로 설명하지 않았습니다. viewport meta 태그는 보통 클라이언트 웹페이지에서 설정하므로 이 절에서 살펴 봅시다.
페이스북 모바일 페이지, 트위터 모바일 페이지, 네이버 모바일 페이지, 다음 모바일 페이지 등을 보면 title 태그 아래에 다음 코드처럼 meta태그가 있습니다. 이처럼 name 속성에 viewport가 입력되어 있는 meta 태그를 viewport meta 태그라고 합니다.
<meta name='viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
이러한 viewport meta 태그의 content 속성에는 [표 8-1]의 값을 입력할 수 있습니다.
값 |
예 |
설명 |
width |
width=240 |
화면의 너비 |
height |
height=800 |
화면의 높이 |
initial-scale |
intitial-scale=2.0 |
초기 확대 비율 |
user-scalable |
user-scalable=no |
확대 및 축소 가능 여부 |
minimum-scale |
minimum-scale=1.0 |
최소 축소 비율 |
maximum-scale |
maximum-scale=2.0 |
최대 확대 비율 |
target-densitydpi |
target-densitydpi=medium-dpi |
DPI 지정 |
그럼 viewport meta 태그를 입력해 봅시다.
기본 예제 8-1 viewport meta 태그
1. 문제 확인하기 viewport meta 태그를 입력하지 않고 다음 코드처럼 웹 페이지를 만들어서 실행합니다.
[코드 8-1] viewport meta 태그를 사용하지 않을 때
<!DOCTYPE html>
<html>
<head>
<title>Without Viewport Meta</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body.
</html>
이 상태로 스마트폰의 웹 브라우저에서 실행하면 다음 그림처럼 출력합니다. 가끔 스마트폰으로 인터넷을 돌아다니다가 모바일 페이지가 이렇게 촐력되는 경우를 보았을 것입니다. 이는 viewport meta 태그를 입력하지 않았기 때문입니다.
2. viewport meta 태그 사용하기 이제 viewport meta 태그를 사용해 다음 코드를 작성합니다.
[코드 8-2] viewport meta 태그를 사용했을 때
<!DOCTYPE html>
<html>
<head>
<title>With Viewport Meta</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1" />
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body.
</html>
이제 스마트폰에서도 정상적인 크기로 볼 수 있습니다. 또 user-scalable을 no로 입력했으므로 확대 축소도 되지 않습니다. 과거에 확대 축소한 기록이 있다면 user-scalable을 no로 입력했어도 확대 축소된 상태로 웹 페이지가 출력될 수 있습니다. 게다가 확대 축소된 상태에서 user-scalable을 no로 입력했기에 확대 축소도 안되므로 initial-scale을 1로 지정했습니다.
NOTE_ 지원하지 못하는 스마트폰의 웹 브라우저
참고로 앞에서 언급한 viewport meta 태그는 페이스북 모바일 페이지에 적혀 있는 viewport meta 태그입니다. 굉장히 단순합니다. 네이버의 모바일 페이지에는 다음 코드처럼 viewport meta 태그가 입력되어 있습니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
네이버의 viewport meta 태그가 조금 복잡합니다. 읽다 보면 다음과 같은 생각이 들 수 있습니다.
"확대 및 축소 가능 여부가 no인데 왜 최소 축소 비율과 최대 확대 비율을 또 적나요?"
사실 맞는 말입니다. 표준에 따르면 user-scalable과 initial-scale만 입력하면 사용자는 기본 비율에서 확대 - 축소하지 못하는 웹 페이지를 제공받아야 합니다. 하지만 실제로 그렇지 못합니다. 웹 브라우저에 따라서 HTML 페이지를 제대로 읽고 구현하지 못할 때가 있기 때문입니다.
과거 프로젝트를 진행할 때, 테스트 자입가 나오기 전이라 필자에게 있는 HTC 스마트폰으로 테스트를 했던 적이 있습니다. 그런데 user-scalabe을 no로 입력했는데도 웹 페이지가 확대 축소 되었습니다. 무언가 잘못한 것이 있는지 서버 캐시 설정부터 3일을 넘게 살펴보았습니다.
여러 장비로 테스트하다가 깨달은 것은 '내 스마트폰에서만 안 된다'는 것이었습니다. 결국 minimum-scale과 maximum-scale을 1.0으로 지정해서 문제를 해결했습니다.
HTC 회사의 개발자가 웹 브라우저를 만들 때 user-scalabe 속성을 깜빡하고 만들어 버린 것입니다. 웹 브라우저 개발자의 실수이기에 해당 개발자에게 '문제가 있으니 빨리 대처해 주세요!' 하고 말했습니다. 하지만 곧 바로 대처할 수 없고 사용자가 어벧이트하지 않으면 소용없으므로 meta 태그에 잔뜩 적어두는 임시방편만 취했습니다.
2015년 이후로는 모든 안드로이드 웹 브라우저가 구글에서 제공하는 웹 브라우저를 사용하므로, 이런 문제가 줄어들기는 했습니다. 그러나 스마트폰을 자주 바꾸지 않거나 업데이트를 잘 하지 않는 계층이 사용하는 웹 페이지에서는 차라리 잔뜩 적어두는 것이 더 마음 편합니다.
참고로 필자도 viewport meta 태그의 모든 속성을 외우지는 못합니다. 개발할 때 페이스북 모바일 페이지 등을 열고, [소스 보기]를 선택하고 복사해서 상뇽합니다. 그래도 일단 보고 '이것은 이런 의미이다'고 알 수 있을 정도로는 기억하기 바랍니다.
3. @media 규칙과 media 속성
미디어 쿼리는 두 가지 방법으로 사용합니다. 바로 @media 규칙과 media 속성 입니다.
3.1 @media 규칙
규칙은 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용하는 @로 시작합니다. 외부 스타일을 가져오는 @import 규칙, 글꼴을 추가로 정의하는 @font-face 규칙 등이 있습니다. 최근HTML 페이지가 다양한 장치에서 실행되면서부각된 규칙입니다.
@media (<미디어 쿼리>) {
<CSS 코드>
}
일단 @media 규칙의 사용 방법만 살펴보려고 <미디어 쿼리> 부분에 모니터를 나타내는 'screen'과 프린터를 나타내는 'print' 미디어 쿼리를 사용하겠습니다. 이와 관련된 내용은 다음 절에서 설명합니다.
이러한 미디어 타입을 사용해서 간단하게 장치를 구분해 봅시다.
기본 예제 8-2 @media 규칙을 사용한 미디어 쿼리 입력
다음 코드는 @media 규칙을 사용해 화면에서는 빨간색 배경, 인쇄할 땐은 초록색 배경을 출력합니다.
코드 8-3 @media 규칙을 사용한 미디어 쿼리 입력
<!DOCTYPE html>
<html>
<head>
<title>Media Type</title>
<style>
@media screen {
body { background-color: red; }
}
@media print {
body { background-color: green; }
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
인쇄는 웹 브라우저에서 Ctrl + P를 눌러 확인할 수 있습니다. (잉크를 절약하려고 '배경 그래픽' 옵션을 미지정했으면 보이지 않습니다).
3.2 media 속성
link 태그에 media 속성을 입력하면, 해당 미디어 쿼리 조건에 맞는 장치에서만 CSs 파일을 불러올 수 있습니다.
<link rel="stylesheet" href="<파일 이름>" media="<미디어 쿼리>" />
기본 예제 8-3 media 속성을 사용한 미디어 쿼리 입력
[기본 예제 8-22]를 media 속성으로 구현하면 다음 코드와 같습니다. 물론 이때 href 속성에 입력하는 파일은 별도의 파일로 구성해야 합니다.
코드 8-4 media 속성을 사용한 미디어 쿼리 입력
<!DOCTYPE html>
<html>
<head>
<title>Media Type</title>
<link rel="sytlesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</body>
</html>
[코드 8-5] screen.css 파일
@media screen {
body {
background-color: red;
}
}
[코드 8-6] print.css 파일
@media print {
body {
background-color: green;
}
}
4. 미디어 타입으로 사용자 장치 구분
[기본 예제 8-3]에서 screen과 print 미디어 타입을 사용해 보았습니다. HTML은 이전부터 [표 8-2]처럼 미디어 타입을 지원했습니다.
표 8-2 지원하는 미디어 타입
미디어 타입 |
설명 |
all |
모든 장치 |
aural |
음성 장치 |
braille |
표시 전용 점자 장치 |
handheld |
손으로 들고 다니는 작은 장치 |
프린터 |
|
projection |
프로젝터 |
screen |
화면 |
tty |
터미널 등 그림을 띄울 수 없는 장치 |
tv |
텔레비전 |
embossed | 인쇄 전용 점자 장치 |
이러한 미디어 타입은 [표 8-3]처럼 only, not 연산자와 함께 사용할 수 있습니다.
[표 8-3] 미디어 타입 연산자
연산자 |
설명 |
only |
'해당 장치에서만'을 나타냄 |
not |
'해당 장치를 제외한'을 나타냄 |
사실 그냥 입력하면 only가 적용되므로 딱히 사용할 필요는 없습니다. 추가로 미디어 타입 자첸은 그렇게 많이 사용하지 않습니다. [표 8-2]를 보면 알겠지만 screen과 handheld를 제외하면 대부분 특수한 사용자용 입니다. 시장성이 없다고 판단해서 추가 비용을 들이지 않는 것입니다.
수익성과 시장성에만 너무주목하면 장애인을 배제한 웹 사이트를 만들게 됩니다. 장애인용 웹 사이트를 개발한다면 음성 장치, 점자 장치 등의 스타일시트도 살폅조세요. 규칙이 조금 많이 다르므로 이 내용에서는 생략합니다.
5. 미디어 특징으로 사용자 화면 구분
미디어 타입 이외에도 미디어 특징을 사용할 수 있습니다. [표 8-4]의 미디어 특징이 있습니다.
[표 8-4] 미디어 특징
미디어 특징 |
설명 |
width |
화면의 너비 |
height |
화면의 높이 |
device-width |
장치의 너비 |
device-height |
장치의 높이 |
orientation |
장치의 방향 |
device-aspect-ratio |
화면의 비율 |
color |
장치의 색상 비트 |
color-index |
장치에서 표현 가능한 최대 색상 개수 |
monochrome |
흑백 장치의 픽셀당 비트 수 |
resolution | 장치의 해상도 |
[표 8-4]에서 언급한 속성 중에 orentation을 제외한 모든 속성은 min 접두사와 max 접두사를 붙일 수 있으며, and 연산자를 사용해 조건을 합칠 수 도 있습니다. 그리고 이를 사용하면 반응형 웹도 구축할 수 있습니다. 조금 말이 어려울 수 있으니 간단한 예제를 살펴 봅시다.
다음 link 태그는 화면이면서 최대 너비가 767px일 때 phone,css 파일을 불러옵니다.
<link rel="stylesheet" href="phone.css" media="screen and (max-width: 767px)" />
다음 link 태그는 화면이면서 최소 너비가 768px, 최대 너비가 959px일 때 tablet.css 파일을 불러 옵니다.
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-widthA: 959px)" />
다음 link 태그는 화면이면서 최소 너비가 960px일 때 desktop.css 파일을 불러옵니다.
<link rel=stylesheet" href="desktop.css" media="screen and (min-width: 960px) />
앞에서 설명한 768px과 960px의 기준은 아이패드 태블릿PC의 세로 상태에서 너비 기준입니다. 대부분의 장치가 이러한 너비를 지켜서 사용하므로, 웹 페이지도 이 규격에 맞게 미디어 쿼리를 사용합니다.
기본 예제 8-4 스마트폰, 태블릿PC, 데스크톱 구분
다음 코드는 스마트폰에서 빨간색, 태블릿PC 세로 화면에서는 초록색, 태블릿PC 가로 화면과 데스크톱에서는 파란색 화면을 적용합니다.
[코드 8-7] 스마트폰, 태블릿PC, 데스크톱 구분
<!DOCTYPE html>
<html>
<head>
<title>Media Feature</title>
<meata name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
/* 스마트폰 */
@media screen and (max-width: 767px) {
body {
background-color: red;
}
}
/* 태블릿PC 세로 */
@media screen and (min-width: 768px) and (max-width: 959px) {
body { background-color: green; }
}
/* 데스크톱 */
@media screen and (min-width: 960px; {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
기본 예제 8-5 화면 방향 구분
다음 코드는 orientation 속성을 사용해 화면의 방향에 따라 다른 배경 색상을 적용합니다.
[코드 8-8] 화면 방향 구분
<!DOCTYPE html>
<html>
<head>
<title>Media Feature</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
@media screen and (orientation: portrait) {
body { background-color: red; }
}
@media screen and (orientation: landscape) {
body { background-color: green; }
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
NOTE_ CSS 적용 순서
미디어 특징은 HTML5와 CSS3부터 적용할 수 있습니다. 따라서 구 버전의 웹 브라우저에서는 미디어 특징을 제대로 인식하지 못합니다. 보통 웹 페이지는 일단 '데스크톱 전용'으로 만들고 미디어 쿼리에 스마트폰과 태블릿PC에 적용하는 스타일을 입력합니다.
[코드 8-9] 일반적인 작성 형태
<style>
/* 데스크톱 */
body {
background-color: blue;
}
/* 스마트폰 */
@media screen and (max-width: 767px) {
body { background-color: red; }
}
/* 태블릿PC */
@media screen and (min-width: 768px) and (max-width: 959px) {
body {
background-color: green;
}
}
</sytle>
6. 반응형 웹 패턴
지금까지 반응형 웹을 만드는 기본 요소를 살펴보았습니다. 이 절에서는 이러한 요소를 조합해 어떻게 반응형 웹을 구축할 수 있는지 살펴보겠습니다. 일단 위치를 잡을 때는 다음 규칙을 생각해 주세요.
- HTML 태그 구성은 모바일 장치를 기준으로 합니다.
- float 태그의 left와 right를 활용해 적당한 위치에 놓아둡니닫.
반응형 웹을 구축할 때 가장 중요한 속성은 바로 float 속성입니다. float 속성을 제대로 사용해요 각 요소를 원하는 위치에 놓을 수 있습니다.그럼 간단한 패턴을 몇 가지 살펴봅시다.
기본 예제 8-6 반응형 웹 패턴(1)
모바일 장치일 때는 메뉴가 위에 있고, 본문이 아래에 있는 페이지입니다. 데스크톱에서는 메뉴가 왼쪽에 있고, 본문이 오른쪽에 있는 페이지 입니다.
[코드 8-10] 반응형 웹 패턴(1)
<!DOCTYPE html>
<html>
<head>
<title>패턴1</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right; /* left로 입력해도 상관없습니다. */
}
li {
list-style:none;
}
@media screen and (max-width: 767px;) {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
기본 예제 8-7 반응형 웹 패턴(2)
모바일 장치일 땐은 메뉴가 위에 있고, 본문이 아래에 있는 페이지입니다. 데스크톱 페이지에서는 메뉴가 오른쪽에 있고, 본문이 왼쪽에 있는 페이지 입니다.
[코드 8-11] 반응형 웹 패턴(2)
<!DOCTYPE html>
<html>
<head>
<title>패턴2</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
* {
margin: 0;
padding: 0;
}
<body> {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: right;
}
#section {
width: 700px;
float: left;
}
li { list-style:none; }
@media screen and (max-width: 767px) {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id"section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
기본 예제 8-8 반응형 웹 패턴 (3)
모바일 장치일 때는 메뉴가 아래에 있고, 본문이 위에 있는 페이지입니다. 데스크톱에서는 메뉴가 왼쪽에 있고, 본문이 오른쪽에 있는 페이지입니다.
[코드 8-12] 반응형 웹 패턴(3)
<!DOCTYPE html>
<html>
<head>
<title>패턴3</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right; /* left로 입력해도 상관없습니다. */
}
li { list-style:none; }
@media screen and (max-width: 767px; {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
}
</sytle>
</head>
<body>
<div id="section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
</body>
</html>
기본 예제 8-9 반응형 웹 패턴(4)
모바일 장치일 때는 메뉴가 아래에 있고, 본문이 위에 있는 페이지입니다. 데스크톱에서는 메뉴가 오른쪽에 있고, 본문이 왼쪽에 있는 페이지입니다.
[코드 8-13] 반응형 웹 패턴 (4)
<!DOCTYPE html>
<html>
<head>
<title>패턴4</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: right;
}
li { list-style:none; }
@media screen and (max-width: 767px) {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }
}
</style>
</head>
<body>
<div id="section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
</body>
</html>
본문과 메뉴 두 가지로 구성할 때 활용하는 기본적인 패턴 4개를 모두 살펴보았습니다. 모두 모바일 사이트에서 width, float 등 스타일을 해제하는 형태입니다. 코드가 길지만 실질적인 차이는 'float 속성에 들어가는 값'과 'HTML 태그의 순서'입니다. 이것을 주목해서 살펴보면 쉽게 이해할 수 있을 것입니다.
참고로 반응형 웹과는 반대되는 개념으로 적응형 웹이 있습니다. 블로그 글쓰기를 예로 들어봅시다. 데스크톱에서 글을 쓸 때는 마우스, 키보드, 커다란 화면이 있기에 다양한 것을 쉽게 할 수 있습니다. 그런데 스마트폰의 작은 화면으로도 이것을 쉽게 할 수 있을까요? 글쓰기, 직원 관리, 상품 관리 등은 데스크톱에서 해야 합니다.
이처럼 데스크톱에서 할 수 잇는 것과 모바일 장치에서 할수 있는 것이 명확하게 구분되어 있을 때는 아예'서버에서는 다른 웹페이지를 제공하는 것'이 좋습니다. 이것을 적응형 웹이라고 합니다.
예를 들어 페이스북도 httpse://facebook.com과 https://m.facebook.com으로 데스크톱 사이트와 모바일 사이트를 나누어서 제공 합니다. 대표적인 적응형 웹의 예라고 할 수 있습니다. 어떠한 것을 사용할지는 자신이 개발하는 대상에 맞추어 생각하기 바랍니다.
