반응형 웹 기본 개념 이해하기
Front-End/반응형 웹 2019. 5. 27. 21:31
-반응형 웹-
PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다.
예를 들어 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹사이트의 구조를 작은 화면에 최적화된 구조로
변경하여 보여주고, 큰 화면을 가진 기기에서는 웹 사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여줍니다.
이처럼 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹입니다.
-반응형 웹의 장점-
유지보수가 간편 모바일 점유율의 증가 마케팅에 유리 검색엔진 최적화가 가능하다. 미래 지향적 기술이다. |
예제 파일 다운로드
http://www.easyspub.co.kr/Main/PUB
-호스팅 서버 준비하기-
호스팅 서버는 인터넷 속 저장 공간으로, 이 저장공간을 사용하려면 호스팅 서비스 업체에 돈을 지불하고 일정 용량을 빌려야 한다.
인터넷을 통해 이 호스팅 공간과 내 컴퓨터가 연결되며, 이 공간에 이미지나 동영상을 올려놓을 수 있습니다.
무료 호스팅 신청 사이트
http://www.dothome.co.kr
-서버의 종류-
1. 직접 운영하는 서버
개인이 컴퓨터를 구매하거나 빌려서 직접 저장공간을 만들어 서버를 운영하는 것.
이 서버는 개개인이 서버를 관리하고 자유롭게 수정할 수 있다는 장점이 있지만 그만큼 서버에 관한 지식이 없는 사람은 관리하기가
까다롭다는 단점이 있습니다.
2. 호스팅 서버
호스팅 서버는 특정 업체에서 웹 서버를 준비해 놓고 웹 서버의 일부 공간을 월 사용료를 받고 빌려주는 서비스 입니다.
호스팅 서버는 특정 업체에서 이미 기본적으로 모든 설정을 끝낸 상태이므로 월 사용료만 내면 바로 서비스를 이용할 수 있습니다.
단점은 개개인이 서버를 관리하거나 수정하기가 어렵고 서비스에 따라 다르긴 하지만 한정된 공간만 제공되므로 여러 가지 제약이 따른다는 점입니다.
3. 클라우드 호스팅
클라우드 호스팅이란 웹 서버와 호스팅 서버의 결합 서비스로, 웹 서버처럼 서버의 관리를 자유롭게 할 수 있고
월마다 사용한 공간만큼의 비용만 내면 됩니다.
클라우드 호스팅의 가장 큰 장점은 서버의 확장과 축소가 간편하다는 점입니다.
필요에 따라 일시적으로 저장공간을 확장할 수도 있고, 저장 공간이 필요 없게 되면 바로 축소하면 됩니다.
-FTP 프로그램-
호스팅 서버나 웹 서버에 파일을 자유자재로 옮기기위해서 사용하는 프로그램
FTP 프로그램 준비 (파일질라)
http://www.filezilla-project.org
-가변 그리드-
가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다.
-예제-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
width:90%px; // 가변형 크기의 박스로 변경하기위해서 %를 사용한다.
height:500px;
margin:0 auto;
background:#e65d5d;
border:4px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>
|
cs |
가로 너비가 넒을 때는 차이가 없지만 가로 너비를 줄이면 폭에 맞게끔 박스의 크기가 줄어든 것을 확인할 수 있다.
이것을 가변 그리드 기술이라고 한다.
| 미디어 쿼리 화면의 크기와 환경 감지 및 웹 사이트를 변경하는 기술. 컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요한 기술이다. |
| 뷰 포트 화면을 제어하는 기술. 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요하다. 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 화면의 크기를 정확하게 감지하지 못하기 때문에 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용한다. |
-미디어 쿼리 예제-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
@media all and (min-width:320px){
body{
background:#e65d5d; // 웹 브라우저의 크기가 320px 이상일 때 배경색을 빨간색으로 변경
}
}
@media all and (min-width:768px){
body{
background:#2dcc70; // 웹 브라우저의 크기가 768px 이상일 때 배경색을 초록색 계열로 변경
}
}
@media all and (min-width:960px){
body{
background:#6fc0d1; // 웹 브라우저의 크기가 960px 이상일 때 배경색을 파란색 계열로 변겅
}
}
</style>
</head>
<body>
</body>
</html>
|
cs |
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Front-End > 반응형 웹' 카테고리의 다른 글
| 미디어 쿼리와 뷰포트 (0) | 2019.05.30 |
|---|---|
| 픽셀을 %로 바꾸기 - 가변그리드 (0) | 2019.05.29 |
| 웹 호스팅 설정 정보 (0) | 2019.05.28 |
| 반응형 웹 학습 일정 (0) | 2019.05.22 |