자바스크립트 자동 완성 기능 설정하기

 

이클립스 메뉴 :  Help → MarketPlace →  tern 검색 →  JavaScript Build Eclips Install

 

 

프로젝트 우클릭 후 Properties(단축키 Alt + Enter)   modules 검색   체크 (Browser,  Browser Extension, jQuery, jQuery Extension, jQuery Ui)   Apply and Close 

 

 

 

자동 완성 기능이 잘 실행되는 것을 볼 수 있다!


새로운 프로젝트 생성 시 자동완성 안될 경우

프로젝트 우클릭 후    Configure    Convert to Tern Project..     바로 modules가 열린다. 

 

체크 (Browser,  Browser Extension, jQuery, jQuery Extension, jQuery Ui)   Apply and Close 

이클립스에서 Html 파일 실행 시 Server Error가 발생할 경우 해결 방법 

 

오류 내용

Port 8080 required by Tomcat v9.0 Server at localhost is already in use. 
The server may already be running in another process, or a system process may be using the port. 
To start this server you will need to stop the other process or change the port number(s).

 

 

오류 직역

localhost의 Tomcat v9.0 Server에 필요한 포트 8080이 이미 사용 중입니다. 서버가 이미 다른 프로세스에서 실행 중이거나 시스템 프로세스가 포트를 사용 중일 수 있습니다. 이 서버를 시작하려면 다른 프로세스를 중지하거나 포트 번호를 변경해야 합니다.

 

필자는 Oracle SQL 프로그램이 start 중이어서 해당 오류가 발생하였습니다.

 

해결 방법

C:\apache-tomcat-9.0.46\conf\server.xml 포트 변호 변경하기

 

C:\apache-tomcat-9.0.46\conf

 

 

 

server.xml 파일을 이클립스로 가져온다. (파일을 클릭하여 이클립스 내부로 드래그하여 가져오면 된다.)

 

포트번호 변경 전

 

 

Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" /

 

Connector port="8080" 다른 번호로 변경하고 저장한다.

포트번호 변경 후

 

 

 

 

html 파일 예제

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>www 닷컴 회원가입</h1>
<form action="NewFile.jsp">
아이디<br>
<input type="text" name="id" title="여기에 아이디 기입" size="52" placeholder="ID 입력"><br>
비밀번호<br>
<input type="password" name="pwd" title="여기에 비밀번호 기입" size="52" placeholder="비밀번호 입력"><br>
비밀번호 재확인<br>
<input type="password" name="repwd" size="52" ><br>
이름<br>
<input type="text" name="name" size="52"><br>
생년월일<br>
<input type="month" name="month" hspace="1">
<input type="text" name="day"  size="30" placeholder="일"><br>
성별<br>
<select style="width:401px" name="human">
	<option value="성별">성별</option>
	<option value="남자">남자</option>
	<option value="여자">여자</option>
</select><br><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
<input type="submit" value="가입하기" >
</form>
</body>
</html>

 

 

 

jsp파일 예제

 

<!-- NewFile.jsp -->   


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보</title>
</head>

<body>

<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String repwd = request.getParameter("repwd");
String name = request.getParameter("name");
String month = request.getParameter("month");
String day = request.getParameter("day");
String human = request.getParameter("human");


if(!pwd.equals(repwd)){
	out.println("pwd와 재확인 pw가 일치하지 않습니다"+"<br>");
}else{
	out.println("아이디 : "+id+"<br>");
	out.println("비밀번호 : "+pwd+"<br>");
	out.println("재확인 비밀번호 : "+repwd+"<br>");
	out.println("이름 : "+name+"<br>");
	out.println("생년월일 : "+month+" "+day+"<br>");
	out.println("성별 : "+human+"<br>");
}
%>

</body>
</html>

 

실행화면

www 닷컴 회원가입

아이디

비밀번호

비밀번호 재확인

이름

생년월일

성별


                                                         

 

 

설명

 

form action="NewFile.jsp" : 사용자에게 입력 받은 값을 NewFile.jsp로 전달 하여 가입하기 클릭시 jsp파일이 실행하여 입력 값을 보여준다.

입력 값을 전달 받기 위해선 name명을 지정해 주어야 한다.

비밀번호와 비밀번호 재확인 값이 다를 시 회원 정보가 나오지 않고 "pw와 재확인 pw가 일치하지 않습니다"란 문구가 나오도록 조건문을 걸어 주었다.

 

jsp : java와 html 합쳐논 영역

jsp파일에서 <%  %> 안은 Java의 영역이다.

request (연결 객체)를 사용하여 값을 전달 받는다.

 

&nbsp; : 공백 문자

 

jsp 실행화면 : 비밀번호와 비밀번호 재확인 값이 다를 때

jsp 실행화면

 

jsp 실행화면 : 비밀번호와 비밀번호 재확인 같을 때

jsp 실행화면

 

 

 

식별자

id

사용목적 : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 한 개의 문서당 한 개만 유효(중복 불가)


class

사용목적 : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용) 


name

사용목적 :  form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

 

form 태그 : 이동 목적(연결)

입력 양식에 데이터를 입력하고 쿼리 전송 버튼을 누르면 데이터가 지정된 장소에 지정된 방법으로 전달된다.

 

참조

 body 태그 안에서 쓰인다.

 

form 속성

 action : 입력 데이터의 전달 위치를 지정

 input : 사용자에게 정보를 입력받는 기능을 수행함.

 value :  input 태그의 내부에 들어가는 글자

 textArea : 여러 줄의 글자를 입력할 때 사용

 select : 여러 개의 목록에서 몇 가지를 선택할 때 사용

 

 input type 속성 값

 submit : 제출 버튼 생성, form당 1개만 생성 가능

 text : 글자 입력 양식 생성

 password : 비밀번호 입력 양식 생성

 

예시

<!-- web페이지 -> web페이지이동 -->
<form action="NewFile.jsp">

ID:<input type="text" name="id" title="여기에 id 기입" size="10" placeholder="id 기입">
<br><br>
PW:<input type="password" name="pwd" size="10">
<br>

<!-- 버튼만들기 -->
<input type ="submit" value="NewFile.jsp 이동">
</form>

 

실행화면

ID:



PW:

 


checkbox : 체크박스 생성

 

참고

checkbox는 다중선택이 가능하다.

checked="checked"  : 체크되어 있는 상태로 실행된다.

 

예시

<input type="checkbox" value="패션" checked="checked">패션<br>
<input type="checkbox" value="음악">음악<br>
<input type="checkbox" value="게임">게임<br>

 

실행화면

패션

음악

게임


 radio : 라디오 버튼 생성

 

참고

 name으로 묶어 어주야 1개만 선택 가능하다.

 

예시

<!-- name="car"로 묶어 주어야 1개만 선택 가능하다 / name묶기 전 다중선택 가능 -->
<input type="radio" name="car" value="벤츠">Benz
<input type="radio" name="car" value="아우디">아우디
<input type="radio" name="car" value="BMW">BMW

 

실행화면

Benz

아우디

BMW

 

 

HTML5 입력 양식 태그

number : 숫자 선택 양식 생성

date :  일 선택 양식 생성

color : 색상 선택 양식 생성

range :  범위 내 슬라이스를 생성

search :  검색창 생성

 

예시

<!-- 1~5 까지 선택할 수 있는 거 생김..  -->
number : <input type="number" max="5" min="1">
<br>

<!-- 달력 생성 -->
<!-- 달력이 2개면 언제부터 언제까지 ! -->
date : <input type="date">
<br>


<!-- 컬러 선택 할 수 있음  -->
color : <input type="color" value="#ff0000">
<br>

<!-- 슬라이드 생성  -->
range : <input type="range" max="10" min="0">
<br>

<!-- 검색창 생성 -->
search : <input type="search">

 

실행화면

number :

 

 

date :

 

color :

 

range :

 

search :

 

 

textArea 

속성

 rows : 태그의 너비 지정

 cols : 태그의 높이 지정

 

예시

<textarea rows="10" cols="30">초기문자열</textarea>

 

실행화면

 

 

select

속성 값

 multiple="multiple" : 컨트롤 키 눌러서 다중 선택 가능

 

예시

<select multiple="multiple">
	<option value="apple">사과</option>
	<option value="pear">배</option>
	<option value="banana">바나나</option>
	<option value="grape">포도</option>
</select>

 

실행화면

 

이미지 태그 : 이미지를 삽입할 때 사용

참조

 body 태그 안에서 쓰인다.

 

image 파일종류

  jpg png gif bmp tiff tga
용량(작은순서) 1 3 2 6 4 5
압축율 1     x    

 

bmp : 압축을 할 수가 없고, 투명처리(sprite)를 직접 해주어야 하는 번거로움 때문에 잘 사용하지 않는다.
png : 투명처리가 들어가 있다.

 

 

img 속성 & 속성 값

 scr : 이미지의 경로 지정

 alt : 이미지가 없을 때 나오는 문구

 width : 이미지의 너비 지정

 height : 이미지의 높이 지정

 placehold.it : 이미지가 없을 때 이미지의 크기에 맞는 더미 이미지를 제공해줌

 

참조 

 이미지 크기 지정 시 width, height 둘 중 하나만 사용하면 원본 비율이 유지된다.

 

 

예시

<img alt="이미지 없음" src="./image/bird.png" width="240"><br>
<img alt="이미지 없음" src="d:\\image\\bird.png"> <br>
<img alt="이미지 없음" src="pic.jpg"> <br>

 

실행화면

 

 

 

 

이미지 파일의 접근 경로

 

이미지 파일은 단순히 컴퓨터 내 저장되어 있다고 생각하면 안 되고,

서버 내에 있다고 해야 한다.

이미지 파일은 절대 경로로 지정할 수 없다.

 

 

 

 

 

 

 

 

 

 

 

 

 

외부 이미지 파일의 접근 경로

 

예시 : 외부 이미지 파일의 경로의 시작은 이미지가 있던 홈페이지 주소 값으로 시작된다.

<img alt="" src="이미지가 있던 홈페이지 주소
          /wp-content/uploads/2015/09/googles-new-logo-03.png" width="240"><br>

 

실행결과

테이블 태그 : Table을 만들어 주는 Tag

 

Table : row(행), column(열)

 

 

참조

 body 태그 안에서 쓰인다.

 

 

table 요소 

tr : 행
th : 행의 타이틀(해더 선언), 굵은 글씨, 가운데 정렬
td : 열 테이블의 일반 데이터

caption : 표 제목

col width: 테이블 크기 지정

 

table 속성

border : 테이블  테두리

bgcolor : 테이블 배경 색 지정

style="width: 값" : 화면 비례 테이블 크기 지정

rules="rows" : 로우줄만 나오게 하기

 

td, tr, th 속성

rowspan : 로우 합치기
colspan :  컬럼  합치기

 

 

예제

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<table border="4"  bgcolor="bbcc00"  style="width: 50%" 
	   cellpadding="5" rules="rows">
		<caption>Type1</caption>
		<col width="100"><col width="100"><col width="70">
		<tr>
		
			<th>No.</th>
			<th>Name</th>
			<th>age</th>
		</tr>
		<tr>
			<th>1</th>
			<td>Kim</td>
			<td>33</td>
		</tr>	
		<tr>
			<th>2</th>
			<td>Lee</td>
			<td>35</td>
		</tr>	
	</table>
	<br>
	<table border="1" style="width: 50%">
		<caption>Type2</caption>
		<tr bgcolor="#f0ffff">
			<td col width="100">No.</td>
			<td col width="100">Name</td>
			<td col width="70">age</td>
		</tr>
		<tr>
			<td>1</td>
			<td>Kim</td>
			<td rowspan="2">33</td>
		</tr>	
		<tr>
			<td>2</td>
			<td>Lee</td>
		</tr>	
	</table>
</body>
</html>

 

실행화면

목록 태그 : 목록(List)을 만들 때 사용

 ul(unordered list) : 순서없는 목록

 ol(ordered list) : 순서 있는 목록

 li : 목록 요소, 목록의 내용, 들여쓰기 및 줄 바꿈 기능

 dl : 정의 목록

 dt : 용어의 제목, 줄바꿈 기능

 dd : 용어의 설명, 줄바꿈 기능

 

참조

 body 태그 안에서 쓰인다.

 목록 태그 안에 목록태그를 사용할 수 있다.

 

 

ul(unordered list) : 순서 없는 목록

형식

 <ul>    
   <li>문자열</li> 
 </ul>

 

예시 

 <ul>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ul>

 

실행화면

 

 

ul 속성 & 속성 값

 style="list-style-type: disc"

 style="list-style-type: circle"

 style="list-style-type: square"

 style="list-style-type: none"

 

예시

<ul style="list-style-type: disc">
 	<li>disc : 기본값</li> 	
</ul>

<ul style="list-style-type: circle">
	<li>circle : 빈 동그라미</li> 
</ul>

<ul style="list-style-type: square"> 
	<li>square : 네모</li> 
</ul> 

<ul style="list-style-type: none">
	<li>none : 글자만</li>  
</ul> 

 

실행화면

 

 

 

ol(ordered list) : 순서 있는 목록

형식

 <ol>    
   <li>문자열</li> 
 </ol>

 

예시

 <ol>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ol>

 

실행화면

 

 

ol 속성 & 속성 값

 start : 시작 번호 지정 (html5 / html4 type으로 시작번호 지정)

 type : type지정

 type 속성 값 : 1, a, A, i, I

 

예시

<!-- html5 시작번호 지정 start -->
<ol start="100">    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
</ol>
 
<!-- type지정 : 1, a, A, i, I --> 
<ol type="1">       
	<li>type="1"</li> 
</ol> 

<ol type="a">       
	<li>type="a"</li> 
</ol> 

<ol type="A">      
	<li>type="A"</li> 
</ol> 

<ol type="i">      
	<li>type="i"</li> 
</ol> 

<ol type="I">      
	<li>type="I"</li> 
</ol> 

 

실행화면

 

 

 

dl : 정의 목록 dt: 정의 용어 dd : 정의 설명

예제

<dl>
	<dt>html tag</dt>
	<dd>제목 태그</dd>
	<dd>본문 태그</dd>
	<dd>글자 태그</dd> 
</dl>

 

실행화면

이클립스(Eclipse) HTML UTF-8 설정 방법

 

1. Window  Preferences  General  Workspace  Text file encoding   Other : UTF-8

2. Window  Preferences → General   Editors   Text Editors   Spelling   Encoding   Other : UTF-8

3. Window  Preferences → Web  HTML Files  Encoding : IOS 10646/Unicode(utf-8)

4. (선택사항) Window   Preferences → Web  JSP Files  Encoding : IOS 10646/Unicode(utf-8)

 

 

이클립스에서 html파일 실행시 Web으로 뜨게 만들기

 

Window  Web Browser  브라우저 선택

 

Window → Web Browser → 브라우저 선택

 

이클립스 Preferences에  Web이 없는 경우

 

Eclipse EE 버전을 다운로드

이클립스 다운로드 홈페이지 접속 : https://www.eclipse.org/downloads/packages/

 

Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source pro

519 MB 833,518 DOWNLOADS Tools for developers working with Java and Web applications, including a Java IDE, tools for JavaScript, TypeScript, JavaServer Pages and Faces, Yaml, Markdown, Web Services, JPA and Data Tools, Maven and Gradle, Git, and more. Cli

www.eclipse.org

 

자신의 운영체제와 맞는 파일 다운로드하기 

 

 

 

Eclipse 내 다운로드

 

Help  Install New Software   2021-03 - http://download.eclipse.org/releases/2021-03 선택 후 Web, XML, Java EE and OSGi Enterprise Development 다운로드

참고 " 2021-03 - http://download.eclipse.org/releases/2021-03 "  Eclipse 버전에 따라서 "년-월"은 다를 수 있다. 

설치 후 재부팅을 하면 Preferences에  web항목이 생긴다.

 

Help → Install New Software →  2021-03 - http://download.eclipse.org/releases/2021-03 선택
후 Web, XML, Java EE and OSGi Enterprise Development 다운로드

+ Recent posts