봉봉의 개인 블로그
2017-04-04-E 본문
1) http://www.oracle.com/index.html
JDK (Java Development Kit ): 자바프로그램 개발위한 도구
JRE (Java Runtime Environment ): 실행하기위한 환경
2) 웹서버 (특정폴더에 위치)
http://tomcat.apache.org/
3) 편집도구
http://eclipse.org/
오라글에 접속해서
JDK 와 JRE를 다운로드한다.
ex) downloads - java for developers - 비트에 맞는 자바설치
apache-tomcat 를 다운로드 받는다
zip 파일로 해서 받아야합니다.
이클립스는 다룬로드로 들어가서 다운로드 패키지에 들어간후
비트수에 맞게 다운로드 한다
*zip파일이면 좋음*
아까 받아놓은 자바를 설치한다
apache-tomcat 와 이클립스의 압축을 해제한다
자기가 원하는 폴더 즉 수업내용에서는 이름폴더(htmllayout24) 아래넣고
작업환경 (workspace 등) 폴더 생성을 한후 이클립스를 실행한다
실행된 이클립스 창에서 file - new - dynamic web project 를 생성한다
target runtime 에 new runtime 선택하고 apache tomcat 버전에 맞는걸 선택한다
create a new local server 체크 후 next를 누른다 그리고 browser 클릭후
apache tomcat 다운로드 받아져 있는 폴더 선택한다 next를 누르고
next를 누른다(src에 관한건 아직 다루지 않으므로 넘어감) next한다음
context root 에 적혀있는건 project 명이랑 비슷한 개념이라고 생각 하면 되고
content directory는 화면에 해당하는 C.L 과 같은 것들이 들어가야한다
일단은 그대로 놔두고 진행하고 finish를 누른다
그다음 project explorer에 있는
webcontent를 우클릭하고 new로 들어가서 jsp file을 선택하고 file name 바꾸고 finish를 누른다.
이런식으로 만든다음 window를 들어가서 web browser 들어간후
default system web browser클릭한다 (크롬이면 크롬으로 사용해도 무방하다)
Ctrl+F11로 실행을 해보도록 한다.
시작들어가서 cmd를 입력하고 들어간후에 ipconfig 입력후 떠있는
인터넷 브라우져에 localhost를 지우고 ip를 넣어서도 접속해본다.
프로젝트 자체를 2개 생성해서
하나는 따라서 하는걸로 사용 하고 하나는 혼자서 해보는식으로한다
D:\eunhyeokjin\24기한국스마트정보교육원\24기한국스마트정보교육원\01_수업교재자료\01_html_CSS\00_layout_template_CSS_DIV활용
에들어와서 LayoutTemplate 이름복사해서 새로운 프로젝트를 추가한다
LayoutTemplate안에있는 src와 webcontent파일을 복사해서
추가된 프로젝트 안에 파일을 붙여 넣는다
그안에 있는 webcontent파일 안에 fw-12-2-col 파일안에
index.html 를 실행해보면 레이아웃 같은것도 참고해서 볼수잇다.
*tip*
프로젝트 익스플로어의 창이 없어졋을경우
window - show view 들어가서 창을 다시 띄울수 있다.
*24기한국스마트정보교육원\01_수업교재자료\01_html_CSS
이안에 02_회원가입과리스트화면구성 참고하도록 하자*
htmllayout24 프로젝트를 생성한다.
webcontent 우클릭 하여서 user라는 폴더 생성한다.
생성한 user폴더를 우클릭하고 user_insert_form.jsp 라는 jsp파일을 생성한다.
layouttemplate 안에 있는 fw-12-2-col 안에 index.html 파일을 열고
6번에 <link rel="stylesheet" type="text/css" href="main.css" />
복사해서 user_insert_form.jsp 파일 안에 <hand> 아래 </hand>가 오기전 8번쯤해서 넣는다
그런다음 다시 index.html 파일 안에 <body> 아래부터 </body>전까지 복사를해서
user_insert_form.jsp 안에 <body>와 </body> 사이에 추가해서 넣는다
그런다음 fw-12-2-col 폴더안에
main.css 파일을 복사해서 user 폴더 안에 넣고 실행을 시켜본다
그런다음에 "header" 라고 적힌 부분 아래에
그부분에 넣고싶은 말을 넣는다
예를 들면
상단 메뉴 <br><br>
01회원가입
02회원 리스트
같은걸 넣는다
*여기서 <br>는 엔터 같은 개념이라고 생각하자
이런식으로 바꾼후 Ctrl + F11 으로 실행을 시켜본다
이런식의 화면을 만들수 있게 된다.
그런다음
webcontent에 jsp파일로 index.jsp 파일을 만들고 user_insert_form.jsp파일안에
코드를 index.jsp파일안에 넣는다.
사진과 같이 8번부분과 같이 바꿔주게 되면
webcontent 아래 css 폴더를 만들고 그 안에 main.css 파일을 넣어도 실행이 가능해진다.
'학원에서 배운것들 > TEA - E' 카테고리의 다른 글
2017-04-10-E (0) | 2017.04.10 |
---|---|
2017-04-07-E (0) | 2017.04.09 |
2017-04-06-E (0) | 2017.04.06 |
2017-04-05-E (0) | 2017.04.05 |
2017-04-03-E (0) | 2017.04.03 |