국비 37일차_2

강지수·2024년 2월 5일
국비교육국비학원백엔드웹개발자바
0

국비교육

목록 보기
72/97

jqueryui.com

사이트에서 몇개 끌어와서 출력해봄

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

uidrag.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
 
  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#selectable" ).selectable();
  } );
  </script>
</head>
<body>
 
<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>
 
 
</body>
</html>

uiselect.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
 
 
</body>
</html>

uiaccordion.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

uiautocomplete.html

JSP 세팅

google 검색 - tomcat 또는 tomcat.apache.org

Tomcat 9 버전

Core: zip 파일 다운로드

다운로드 된 파일 확인

폴더 생성 후 파일 옮기기

이전에 다운받았었던 eclipse zip 파일도 같이 넣어두기

eclipse 파일 압축 해제

apache 파일 압축 해제

eclipse 하단에 'Servers' 탭
'No servers ~ Click~ ' 클릭

Apache - Tomcat 9.0 선택

Tomcat 압축해제한 폴더 선택

Next - Finish

Tomcat 서버 더블클릭 하면 Overview 창이 뜸

우측 포트번호 '9005' 로 변경 후 저장

마우스 우클릭 - Start - 서버 동작함

보안경고가 뜬다면 액세스 허용

Start/Stop 할 때 뜨는 Console 내용

프로토콜 핸들러 에서 '9005' 로 설정되어있는 부분 확인

Encoding 세팅

window - preference

General - Workspace - Text file encoding - UTF-8 설정

Web - CSS Files - Encoding - UTF-8 설정

HTML Files / JSP Files - Encoding - UTF-8 설정

Content Types - Text - Default encoding - UTF-8 Update

Text 확장 - JSP - UTF-8 Update

Web - JSP Files - Editor - Templates

'New JSP File (html 5) 내용 복사

New - Name 작성, Context - New JSP, Pattern 에 복사한 내용 붙여넣기 / title 부분에 이니셜 넣기

New - Web - Dynamic Web Project - web01 - finish

web project 생성 완료

New File - JSP file - Template 만들었던 것 설정 - Finish

미리 세팅해둔 값으로 나옴

내용 입력 후 우클릭 - Run as - Run On Server - Finish

내부 브라우저로 확인 가능

Window - Web Browser - Chrome 설정하면 크롬으로 열림

JSP

선언문 : <%! %> 전역변수
코드블락 (스크립트릿, scriptlet) : <% %> 자바코드 영역
표현식 : <%= %> %> 자바의 변수값을 화면에 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kjs</title>
</head>
<body>
<!-- 주석 -->
<%--
선언문 : <%! %> 전역변수
코드블락 (스크립트릿, scriptlet) : <% %> 자바코드 영역
표현식 : <%= %> %> 자바의 변수값을 화면에 출력
--%>

<%
String str1="게임ID"+str2;
String username="username"+str2;
%>
<%!
String str2="blue";
%>
</body>
</html>

코드블락 예시
<%! %> 가 전역변수로 들어가서 위의 코드블락에서 에러가 안난다.

<!-- 표현식 -->
접속자 : <%=str1 %> <br>
접속자 : <%=str2 %> <br>
접속자 : <%=username %> <br>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kjs</title>
</head>
<body>
<h2>선언문샘플</h2>
<%!
	String id="blue";
public String getId(){
	return id;
}
%>
<h2>ID변수 : <%=getId() %></h2>
<h2>ID변수 : <%=id %></h2>
</body>
</html>

Help - Install New Software

Add - Name : emmet / Location : http://emmet.io/eclipse/updates - Add

Emmet 체크 후 Next

기다렸다가 - Next - Accept - Finish

install 끝나면 restart

emmet 메뉴 생성됨

Window - preference - Emmet - extensions 칸에 jsp 추가

Tab 키를 누르면 태그를 자동완성 시켜주는 플러그인

팀프로젝트 회의 시간

profile
강지수
개발자 준비의 준비준비중..
이전 포스트

국비 37일차_1

다음 포스트

국비 38일차_1

0개의 댓글