반응형 웹( Web App ) 기본 개념
반응형 웹은 검색 엔진 최적화 방법 중 하나
하나의 주소와 하나의 파일로만 이루어져있어 검색 결과에 비교적 더 잘 노출됨
반응형 웹 고려사항
1. 사용자 경험을 고려한 설계 필수, 기획력과 디자인을 완벽하게 갖춘 후 설계해야 한다.
2. 모바일 웹을 따로 제작하는 것보다 훨씬 더 많은 비용이 필요할수도 있고 유지보수도 어렵다.
해외 반응형 웹 사례: 스키니 타이, 보스턴 글로브, 닥터 자르트, 한국은행 화폐 박물관 등
반응형 웹 학습과 제작을 위한 준비 작업
- 웹 브라우저 준비 ( 크롬 )
- 코드 편집기 준비
윈도우 : Editplus / Sublime Text / NotePad / Visual Studio / Eclipse / 메모장
매킨토시 : Coda / Sublime Text / BBEdit / TextWrangler / 텍스트 편집기
- 호스팅 서버 준비하기
호스팅 서버 : 인터넷 속 저장 공간. 인터넷을 통해 호스팅 공간과 로컬이 연결되며 이 공간에 이미지나 동영상을 올려놓을 수 있다.
무료 호스팅 서비스 : http://www.dothome.co.kr (닷홈)
당장 호스팅 서비스에 가입하기 번거로울 경우 로컬에 서버 환경을 만들어서 테스트해보는 방법
서버 환경을 자동으로 설치해주는 프로그램 중 하나인 오토셋(AutoSet)
사용 방법 : http://goo.gl/3RhcpL 참고
웹 서버 / 호스팅 서버 / 클라우드 호스팅
1) 직접 운영하는 서버 : 인터넷 속도면에서 불리. 호스팅 서버나 임대형 웹 서버를 이용하는게 훨씬 경제적이고 실용적
2) 호스팅 서버 : 월 사용료 내고 이용. 한정된 공간만 제공되므로 여러가지 제약이 따른다.
3) 클라우드 호스팅 : [ 웹서버 + 호스팅 서버 ] 결합 서비스.
웹 서버처럼 서버의 관리를 자유롭게 할 수 있고 월마다 사용한 공간만큼의 비용만 내면 된다.
가장 큰 장점) 서버의 확장과 축소가 간편
닷홈 ( http://www.dothome.co.kr )
무제한 웹호스팅 금지규정 및 서비스 제한 안내
- FTP준비
호스팅 서버나 웹 서버에 파일을 자유자재로 옮기기 위한 프로그램
http://www.filezilla-project.org - [ Download FileZilla ]
반응형 웹 제작을 위한 핵심 기술
가변 그리드(Fluid Grid) : 디바이스 화면을 구성하는 모든 요소를 픽셀이 아닌 %로 계산
px로 된 width를 %로 변경
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: height:500px; margin:0 auto; background:#e65d5d; border:4px solid #000; } </style> </head> <body> <div id="wrap"> </div> </body> </html> | cs |
px를 %로 바꾸어도 기기나 환경에 따라 구조를 바꾸지는 못한다.
그래서 화면을 제어할 '뷰포트'와
화면의 크기나 환경을 감지하여 구조를 바꿔줄 '미디어 쿼리'가 필요
미디어 쿼리와 뷰포트
미디어 쿼리(Media Queries) : 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술
미디어에게 쿼리를 던져 화면의 크기와 환경을 감지하여 웹사이트 변경
뷰포트(ViewPort) : 화면에 보이는 영역을 제어하는 기술
미디어 쿼리로 수많은 기기의 화면 크기를 감지해야할 때 꼭 필요하다.
데스크톱은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만
스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에
미디어 쿼리를 사용해도 스마트 기기에서의 화면 크기는 정확하게 감지하기 어렵다.
이 때, 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록하는 기술이 뷰포트
1. FTP 프로그램인 파일질라 실행
2. 파일 - 사이트 관리자 대화상자에서 [새 사이트] 버튼을 눌러 사이트 추가
호스트 : 미리 가입한 닷홈의 FTP 주소
사용자, 비밀번호 : 닷홈 호스팅홈페이지에서 가입한 아이디와 FTP 비밀번호
3. 뷰포트가 적용되지 않은 파일 우측 박스로 드래그 (호스트 서버에 올리기)
4. 데스크톱과 스마트 기기로 'XXX.dothome.co.kr/01_2.html' (호스팅 서버 주소와 업로드한 파일명) 접속
>확인 : 이미지가 너무 작게 출력됨
5. 01_2.html 파일 코드 추가 후 다시 확인
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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> </head> <body> <img src="img_01.jpg"> </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 | <!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; //빨간색 } } @media all and (min-width:768px){ body{ background:#2dcc70; //초록색 } } @media all and (min-width:960px){ body{ background:#6fc0d1; //파란색 } } </style> </head> <body> </body> </html> | cs |
떠오르고 있는 기술 - 플렉서블 박스(Flexivle Box)
가변적인 박스를 만드는 기술 (웹사이트 구조 설계를 위한 새로운 기술)
'반응형 웹 ( Web App )' 카테고리의 다른 글
| 반응형 웹 학습일정 (0) | 2019.05.22 |
|---|
