** IP 주소 확인
[finder] - [응용프로그램] - [터미널]을 실행하고 ifconfig
** IP 변경
[finder] - [응용프로그램] - [시스템 환경 설정]을 실행하고 네트워크를 클릭
고급을 선택하고 아이피 주소 설정
라우터 주소를 192.168.0.1로 설정
아이피의 세번째 자리가 다르면 공유폴더 사용 불가
DNS를 168.126.63.1로 설정 -> 이 설정을 하지 않으면 인터넷 연결이 안됨
** 공유 폴더 접근
파일더를 실행하고 이동 메뉴를 누르고 서버에 연결을 선택
smb://192.168.0.200이라고 입력하고 접속
컴퓨터가 여러 개 보이면 503-main 컴퓨터에 접속하면 됩니다.
** 자바 설치
www.oracle.com에 접속해서 MAC 용 JDK를 다운로드 받아서 설치
설치 확인 : 터미널에서 java -version, java -version 명령을 이용해서 확인
** eclipse 설치
www.eclipse.org 에서 다운로드
Eclipse IDE for Java EE Developers 로 설치해야 한다.
** 웹 서버의 역할을 해줄 프로그램 설치
http://tomcat.apache.org 에서 다운로드
** Web Front End IDE(작성하고 실행하는 프로그램)
braket, atom, aptana 등에서 가능
eclipse 에서 가능한데 eclipse는 웹서버 역할을 수행해주는 프로그램을 설치해야만 웹 프로그래밍이 가능합니다.
이 역할을 수행해주는 대표적인 프로그램이 Tomcat입니다.
eclipse를 제외한 IDE를 사용하면 Tomcat을 설치할 필요가 없습니다.
웹 디자인기능사 시험을 위해 브락켓을 많이 사용하는 것이고 실무에 가면 아톰을 많이 씁니다.
http://www.w3schools.com
ppt 전적으로 의존!
톰캣은 한번에 하나만 실행 가능
톰캣이 다른 곳에서 구동중이면 eclipse에서는 구동을 못합니다.
eclipse에서 구동하고 싶으면 톰캣 실행을 중지시켜야 합니다.
중지시키는 명령을 수행하는 파일이 shutdown.sh(sh는 유닉스 명령어 배치 파일)
윈도우이면 shutdown.bat(bat은 윈동 명령어 배치 파일)
** form
- 사용자의 입력을 받아서 서버에게 전달할 목적으로 만드는 개체
- form의 속성
action : 전송될 서버의 URL인데, 생략하면 현재 URL로 전송
method : 전송방식인데, get 아니면 post입니다. 생략하면 get입니다.
encrypt : 폼의 데이터를 전송하는 방법인데, 폼에 첨부파일이 있을 때는 반드시 multipart/form-data로 설정을 해주어야 합니다.
1. 전송방식(=요청방식)
1) get
- 클라이언트의 파라미터를 주소 뒤에 붙여서 전송하는 방식
- 클라이언트가 넘겨주는 데이터가 URL에서 확인이 가능합니다.
그래서 보안이 취약하고 넘겨줄 수 있는 데이터의 크기에 제한이 있습니다.
- 장점은 자동 재전송이 가능하고 post 보다는 빠릅니다.
2) post
- 클라이언트의 파라미터를 헤더에 숨겨서 전송하는 방식
- 클라이언트가 넘겨주는 데이터를 URL에서 확인할 수 없습니다.
- 자동 재전송이 안되지만 장점으로 데이터의 크기에 제한이 없고 보안이 get 보다는 좋습니다.
- textarea, password, file 중에 하나라도 포함되어 있으면 post 방식으로 데이터를 전송해야 합니다.
2. form 관련 태그
1) input
- 사용자의 입력을 받기 위한 컨트롤로 타입이 10가지가 있습니다.
- text(기본), radio, checkbox, file, ridden, button, submit, reset, image, password
(1) text
- 한 줄의 입력을 받기 위한 컨트롤
- value가 입력된 값입니다.
(2) radio, checkbox
- 하나의 그룹으로 만들기 위해서는 name 속성을 동일하게 설정해야 합니다.
- value로 선택된 데이터를 찾을 수 있습니다.
(3) button
- value를 설정하면 버튼의 텍스트가 됩니다.
(4) submit
- 기본적으로 폼의 데이터를 action에게 전송하는 기능을 가지고 있습니다.
(5) reset
- 폼의 데이터를 전부 초기화 하는 기능을 가지고 있는 버튼입니다.
(6) password
- 비밀번호를 입력받기 위한 컨트롤
(7) file
- 파일을 선택할 수 있는 버튼인데 보안 때문에 value 설정이 안 됩니다.
(8) image
- 이미지가 첨부된 버튼
(9) hidden
- 화면에 출력은 안 되지만 서버에게 전송은 되는 컨트롤
2) textarea
- 여러 줄을 입력받기 위한 컨트롤
- 여는 태그와 닫는 태그 사이를 강제로 줄 바꿈을 하면 커서가 가운데서 시작합니다.
3) select
- 여러 개의 항목 중에서 하나의 항목을 선택하도록 할 때 사용하는 컨트롤
- select로 만들고 각 항목은 option으로 만듭니다.
4) lable
- 문자열을 출력하기 위한 컨트롤
- lable 과 다른 컨트롤을 for를 이용해서 연결을 하면 모바일 페이지에서 레이블 만 클릭해서 다른 컨트롤을 클릭한 것과 동일한 효과를 만듭니다.
5) fields 와 legend
- 화면에 하나로 묶어진 것처럼 선을 만들어주는 태그
- fieldset으로 묶고 legend로 타이틀을 설정합니다.
- 입력도구들을 만들고 name 속성을 설정해야만 서버에게 전송됩니다. (입력받은 애들만)
- name 속성을 설정하지 않으면 서버에게 전송되지 않습니다.
- radio, checkbox, select의 option을 만들 때는 반드시 value를 설정해야 합니다.
- button 이나 submit, reset은 value가 타이틀이므로 당연히 설정합니다.
** 실습
- input.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>입력</title> </head> <body> <form action="server.jsp" method="post"> 이름: <input type="text" name="name"/> 비밀번호: <input type="password" name="pw"/> <br/> <fieldset> <legend>성별</legend> <input type="radio" name="gender" value="man"/>남자 <input type="radio" name="gender" value="woman"/>여자 </fieldset> <input type="file"> <textarea row="3" col="30"></textarea> <select name="cnt"> <option value="k">가입인사</option> <option value="c">등업신청</option> </select> <!-- 서버로 데이터를 전송하는 역할 --> <input type="submit" value="전송"/> <!-- 폼의 데이터를 초기화하는 역할 --> <input type="reset" value="삭제"/> </form> </body> </html>
|
- server.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 이름:<%=request.getParameter("name") %><br/> 비번:<%=request.getParameter("pw") %><br/> 성별:<%=request.getParameter("gender") %><br/> 수량:<%=request.getParameter("cnt") %><br/> </body> </html>
|
'Front End' 카테고리의 다른 글
| 0808 선생님 메모장 보고 수정 필요 (0) | 2018.12.19 |
|---|---|
| 0813 HTML, CSS, JavaScript (0) | 2018.10.22 |
| HTML5 의 Web Push (0) | 2018.09.11 |
| Proxy (0) | 2018.09.11 |
| maven (0) | 2018.09.11 |