[ 들어가면서...용어 짚어보기 ]
ㅇ 미디어 쿼리 - device에 따라 전체적인 layout 구성이나 size가 유동적으로 반응하는 것을 말한다.
- 유동형 레이아웃 .... 비례형 레이아웃 : 과거에는 %로 조정했으나 pixel로.... 다시 현대에는 %로 적용
유동형 이미지,
유동형 그리드... 논란이 많은 부분이라고... 교재 저자도 설명을 아끼는... 나랑 상관은 없음
ㅇ HTML5 특징
- 시맨틱 : 예를 들면 <p> 태그와 <no> 태그로.... 코딩을 위해 선택된 태그만 봐도 <P> 뒤에는 구문이 오고 <no> 뒤에는 숫자가 오겠구나 하는
의미를 추론할 수 있도록 코딩하는 것을 말한다.
- WAI-ARIA : 웹접근성 (Web Accessibility Initiative - Accessible Rich Internet Applications)
- 강력한 미디어 사용 : 사진, 음성, 동영상 첨부 기능 다양
- Off-line 웹 어플리케이션 : 네트워크가 끊겨도 최근에 로딩한 화면을 계속 볼 수 있는 기능(Web cache)
- 웹폼 : 대표적으로 input 속성에 따라 keyboard가 적합한 폼으로 변경되는 것(이메일 입력 시 "@,."가 포함된 키보드 업)
ㅇ CSS
- 웹에 없는 폰트.... 버튼 디자인을 위해 과거 포토샵등을 이용해 그림 화일을 사용했으나 해결!!! ... 결과 웹이 가벼워짐
- transform, rotate... animation이 코딩으로 가능
- 좌표계 -> 디자인 레이아웃
- Cross browser ==== browser - free 브라우저 의존성이 현격히 낮아짐...
ㅇ 웹 페이지 서비스
- 웹서버 : 웹브라우저의 요청을 받음 아파치 all in one 버전 있으나...but 불안정... 알수없는 이유 10%로 실행 안 될 수도
- 웹어플리케이션 서버(WAS) : 로직처리 및 DB연동
- 웹컨테이너 : JSP와 Servlet을 서비스
* 톰캣(Tomcat) <- 웹컨테이너
웹서버 + 웹어플리케이션서버 + 웹 컨테이너
tip. 바탕화면가기.... 언제부턴가 바탕화면가기가 안되서 불편했는데 오른쪽 하단에 숨어있어다니....
스팸에 속지 않으려면 확장자 보기는 필수 ... 구성-폴더-보기-"알려진 파일형식..." check 해제
... 카드명세는 html 화일이고 zip이면 절대 열지 않는다.
[ 기본 개발 환경 ]
ㅇ 웹브라우저 : 웹 페이지 실행에 필요
- 구글 크롬 ....> 개발자용 Web developer.... 웹 반응속도가 상대적으로 빠른 크롬 사용
- 애플 사파리
- MS 인터넷 익스플로러
ㅇ JDK(Java Development Kit)설치 : 이클립스에서 필요, 자바기반의 애플리케이션
참고: 자바기반의 애플리케이션
자바프로젝트 - 그룹웨어
JSP기반의 웹프로젝트
안드로이드 앱개발
HTML5웹앱 -> 안드로이드 앱으로 변환 => 하이브리드 앱
ㅇ 개발환경에 필요한 프로그램
- Java
- Ecllipse IDE for Java EE Develpers
- Tomcat
* wev
[ 웹 개발환경 설정하기 ]
교육장 컴은 windonws 64bit
필요한 프로그램은...
*.msi 화일은 DB를 연동하기 위한 것...
ㅇ PC웹 브라우저 - 구글 크롬 , 사파리 설치, 인터넷 익스플로러
1. https://www.google.com/chrome (기본 웹 브라우저 지정에 체크를 해제 후 설치)
2. [설정]-[확장 프로그램]에서 Web developer검색 후 설치
3. 크롬에 [Web developer]항목이 표시됨
4. Web Developer 설치
Web Developer가 설치되면 오른쪽 상단에 톱니 모양 아이콘에 생기고 이 아이콘을 클릭해서 웹페이지를 확장해 볼 수 있다.
아래 화면은 "Disable All Styles"
※ 애플 사파리 설치
http://support.apple.com/kb/DL1531
[설정]-[기본설정]의 [고급]에서 [메뉴 막대에 개발자용 메뉴 보기]항목 체크[메뉴]에 [개발자용]항목이 표시
ㅇ JDK설치(java development kit)
1. http://www.oracle.com/technetwork/java/javase/downloads/index.html 또는 java.sun.com
컴퓨터 사양에 맞는 버전을 다운받는다
Windows 32bit:jdk-버전-windows-i586.exe
Windows 64bit:jdk-버전-windows-x64.exe
2. JDK 설치 : 다운받은 JDK 파일을 더블클릭
3. 환경변수 설정
PATH C:\Program Files\Java\jdk1.8.0_40\bin;
CLASSPATH C:\Program Files\Java\jdk1.8.0_40\lib\tools.jar
JAVA_HOME C:\Program Files\Java\jdk1.8.0_40
[제어판] - [시스템] - [고급 시스템 설정] - [고급]탭 - [환경변수] 버튼 - [시스템 변수] 박스 - "path"변수 항목을 찾아 편집한다.
변수 값의 맨 앞에 삽입한다. 충돌 있을 수 있음.
변수에 없으면 [새로만들기] 버튼을 클릭해서 새 시스템 변수를 만든다.
* 최신 버전을 설치해도도 환경변수에 적용된 버전이 우선권이 있다
4. 설치 테스트
ㅇ Tomcat설치 - 웹 서버(웹페이지 서비스)
다운로드 받은 zip파일(apache-tomcat-8.0.20.zip) "C:\"에 압축해제
2. 환경변수 설정
CATALINA_HOME C:\apache-tomcat-8.0.20
3. 실행 테스트
C:\apache-tomcat-8.0.20\bin
startup.bat 실행 : 서버를 올림(서비스 시작)
shutdown.bat 실행 : 서버를 내림(서비스 끝냄)
ㅇ 이클립스 설치 및 환경설정 -- 프로그램 개발툴(platform)
* 자바프로젝트, 웹프로젝트, 안드로이드 프로젝트를 개발할 수 있는
Eclipse IDE for java EE(enterprise edition 다양한 기능 포함) developers 항목 사용
|
* Tools for Java developers creating Java EE and Web applications, including a Java IDE, tools for Java EE, JPA, JSF, Mylyn, EGit and others. - This package includes:
- Data Tools Platform
- Eclipse Git Team Provider
- Eclipse Java Development Tools - Eclipse Java EE Developer Tools
- JavaScript Development Tools
- Maven Integration for Eclipse
- Mylyn Task List
- Eclipse Plug-in Development Environment
- Remote System Explorer
- Eclipse XML Editors and Tools |
1. 이클립스 다운로드 & 압축 풀기 --- 주의)운영체제 따라 다운로드 받는 파일이 다름
http://www.eclipse.org/
Windows 32bit:eclipse-jee-버전-win32.zip
Windows 64bit:eclipse-jee-버전-win32-x86_64.zip
2. 실행 : eclipse.exe
- 워크스페이스 설정 : c:\project * 워크스페이스 : 프로젝트를 관리하는 폴더
*** 기동시 에러 발생할 경우--- 매우 드문 경우(현재 XP에서만 발견한 에러)
eclipse.ini파일에서 openFile 아래에 다음내용 추가
-vm
C:\Program Files\Java\jdk1.8.0_40\bin\javaw.exe
3. 사용환경 설정 :
- [Window]-[Preferences] -> 모든 프로젝트의 공통사항 설정
1) 인코딩 : 프로젝트 전체의 인코딩 [General]-[Workspace] - [Text file encoding]항목에서 [Other]항목의 값: utf-8
2) 라인번호 : 편집기에 라인번호 추가 [General]-[Editors]-[Text Editors] - [Show line numbers]항목 체크
4. 이클립스에서 Tomcat서버 세팅 : 이클립스에서 웹서버 제어 위해
Server추가
- [File]-[New]-[Other] 선택
- [Server]-[Server] 선택 후 [Next]버튼 클릭
- [Apache]-[Tomcat 8.0 Server] 선택 후 [Next]버튼 클릭
- [Name],[Jre]는 기본값 사용, [Tomcat Installation]항목에서 설치된 톰캣경로 연결(C:\apache-tomcat-8.0.20) 후 [Finish]버튼 클릭
5. 동적 웹 프로젝트 작성 : 웹 사이트 작성
1) 동적 웹 프로젝트 작성
- [File]-[New]-[Other] 선택
- [Web]-[Dynamic Web Project] 선택 후 [Next]버튼
- [Dynamic Web project] 창에서 입력후 [Next]버튼
[Project name] : testweb
- [Next]버튼
- [Web Module]에서 [Generate web.xml deployment descriptor]항목을 체크 후 [Finish]
web.xml : 해당 프로젝트의 설정 파일(커넥션풀, 에러제어, 대표페이지(예, index.html, index.jsp) 자동인식 기능 등)
logic과 view coding 영역분리(과거에는 혼재)
& DB connection 문제로 별도로 db연동 설정을 둠... (connection pool)... web.xml
이클립스에서 설정하는 것은 테스트 환경.... 실제 환경은 "C:\apache-tomcat-8.0.20\conf"를 설정
2) 서버에 동적 웹프로젝트 추가
- [Servers]뷰에서 [Tomcat v8.0 server~]항목 선택후 마우스 오른쪽 버튼 클릭해서 [Add and Remove...]메뉴 선택
- 프로젝트를 서버에 추가 후 [Finish]
- [Servers]뷰에 있는 [Tomcat v8.0~]항목을 선택 후 [start the server]아이콘 클릭
1) index.html 생성
- [testweb]-[WebContent] 선택 후 마우스 오른쪽 버튼을 눌러 [New]-[HTML File]선택
- [File name]에 index.html 입력 후 [Next]버튼
- [Templates]에서 [New HTML File (5)]항목 선택 후
- [Finish]버튼
*** 기본 코딩이 자동으로 작성된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>테스트</p>
</body>
</html>
2) index.html 실행 - PC브라우저에서 실행
- index.html 선택 후 마우스 오른쪽 버튼을 눌러 [Run As]-[Run on Server]메뉴 선택
- [Finish]버튼 클릭
3)index.html 실행 - 모바일 브라우저에서 실행
주의) 익명 액세스를 허용시에만 가능
① 자신(서버)의 ip주소 확인
- [시작]-[실행]
- cmd 입력 후 [실행]버튼
- [명령프롬프트] ipconfig 입력 후 Enter키 자신의 아이피 주소 확인
- 구글 크롬에서 실행
- 안드로이드 애뮬레이터 또는 스마트기기에서 실행
7. 웹 페이지의 뷰포트 조정
- 다음의 뷰포트를 <title>태그 위에 추가
예시) 전자 정부 지침
<meta name="viewport"
content="width=device-width,
user-scalable=no, ....... user 확대 기능 없앰
initial-scale=1.0, ....... 원 설정 글자 크기
maximum-scale=1.0"/>
8. 웹 페이지의 인코딩 변경 및 템플릿변경
1) HTML페이지의 인코딩 변경
- [Window]-[Preferences]
- [Web]-[HTML Files]등에서 인코딩을 utf-8로 변경
- 대상 : html, css, jsp의 인코딩 변경 **
*** request : set... utf-8
*** response : <meta...에 작성
2) CSS의 인코딩 변경
[Window]-[Preferences]
[Web]-[CSS Files] 에서 인코딩을 utf-8로 변경
3) HTML5페이지의 템플릿 변경
- [Window]-[Preferences]
- [Web]에서 [HTML Files] 더블클릭, [HTML Files]의 하위메뉴에서 [Editor]더블클릭, [Editor] 의 하위메뉴에서 [Templates]클릭
- [Templates]의 목록에서 [Description] 항목의 값이 [html5]인 항목 클릭 후 [Edit]버튼 클릭
- viewport추가 후 [OK]버튼 클릭
'잡기' 카테고리의 다른 글
| [HTML 5 반응형 웹디자인_2015.03.26] 4. 미디어 쿼리 (0) | 2015.03.31 |
|---|---|
| [HTML 5 반응형 웹디자인_2015.03.25] 3. 반응형 웹의 개요 (0) | 2015.03.31 |
| [HTML 5 반응형 웹디자인_2015.03.25] 1. 오리엔테이션 (0) | 2015.03.31 |
| 뒷뜰에 골칫거리가 산다. 황선미 사계절 2014. 3월 출간 (0) | 2015.03.25 |
| <2015 DIY리폼박람회> 뻔뻔(fun fun)한 우리가족의 Fun니처 만들기 이벤트! (0) | 2015.03.23 |
