[HTML 5 반응형 웹디자인_2015.03.25] 2. 작업 환경 설정

 [ 들어가면서...용어 짚어보기 ]

ㅇ 미디어 쿼리 - 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설치 - 웹 서버(웹페이지 서비스) 

      1. http://tomcat.apache.org

         다운로드 받은 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]

   DB 연동

 

             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]아이콘 클릭

 

               

 

     6. 웹 페이지 작성 : 웹페이지(html, jsp, asp, php)
            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키 자신의 아이피 주소 확인
               - 구글 크롬에서 실행

 http://자신의ip:8080/testweb/

   - 안드로이드 애뮬레이터 또는 스마트기기에서 실행

 http://자신의ip:8080/testweb/

* 안드로이드 애뮬레이터 또는 스마트기기에서  해상도에 맞추기 위해 Viewport추가

  모바일 view 시 가시성이 현격히 떨어지는 현상 방지(p.70)

 

     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]버튼 클릭