★ JSP 프로젝트 생성 new -> Dynamic Project -> web webapps -> jsp파일 생성 ■ JSP 실행 소스코드 JSP 페이지 JSP로 만든 페이지입니다. 실행 결과 ★ JSP, Java Server Pages 자바를 사용해서 서브측에서 페이지를 만드는 기술 Servlet의 다음 버전 서블릿 vs JSP 1. 서블릿 a. 장점 : 자바 기반. 자바 구문을 사용할 수 있다. > 자바 클래스 사용 b. 단점 : 자바 기반. 클라이언트 코드를 작성하기 어려움. > 문자열 취급 > 가상 주소 매핑 필요 2. JSP(= 웹페이지처럼 보이는 서블릿) a. 장점 : HTML 문서 기반. 클라리언트 코드 작성이 쉽다. > 구문 인식 > 가상 주소 매핑 불필요 b. 단점 : HTML 문서 기반..
★ 이클립스 실행 WorkSpace > code/server ★ 설정 폰트 인코딩 UTF 8 worspace css HTMl JSP 톰캣 Runtime Server -> Runtime Environment ★ 프로젝트 생성 Dynamic Web Project Project name : "ServletTest" Target runtime : Apache Tomcat 8.5 Dynamic Web Module Version : 3.1 Context Root : "ServletTest" -> "servlet" : 외부 시각 -> src/main/webapps : 내부 시각 ★ Servlet 웹서버측에서 자바를 사용한 프로그램을 동작시키는 기술 목적 : 클라이언트 요청에 따른 동작으로 웹페이지를 만들기 위해서!!..
★ JSON, Java Script Object Notation 자바스크립트 객체 표기법 자바스크립트의 객체를 문자열로 표현할 때 사용하는 포맷 자바스크립트에서 사용 중인 데이터(객체)를 이부 환경에 전달 > (파일입출력, 네트워크에 전달) > 하나의 문자열로 표현하는 방법 > JSON XML과 함께 데이터 전달용으로 많이 사용 언어 독립적 > 대부분의 언어/환경에서 JSON 지원 ■ 규칙 1. 반드시 프로퍼티를 쌍따옴표로 묶는다.(홀따옴표, 역따옴표 불가능) { "name" : "홍길동", "age" : 20 } 2. 반드시 값도 쌍따옴표로 묶는다.(홀따옴표, 역따옴표 불가능) -> 값 : boolean, 숫자 > 그냥 표현 가능 "name" : "홍길동", "age" : 20 3. 메소드 표현 불가능..
★ 지도 API 네이버 맵 API 카카오 맵 API 구글 맵 API ■ 카카오맵 API https://apis.map.kakao.com/ 웹 전용 https://apis.map.kakao.com/web/ ■ 순서 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080) 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다. 6. 앱을 실행합니다. ■ 1. 애플리케이션 추가 ■ 생성된 ..
★ HighChart 다운로드 https://www.highcharts.com/demo?gclid=Cj0KCQjw6cKiBhD5ARIsAKXUdyZdwsW4qdz_dO66GZ_2Ab5fbvZBdmlGF2sVM_gNxhEv96dipJ2ohMUaAt2kEALw_wcB ■ 사용 코드 ■ 다양한 차트 중 선택 후, 코드 가져오기 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic Basic line - JSFiddle - Code Playground jsfiddle.net ■ 사용 결과
■ HTML 코드 Board 번호 제목 이름 날짜 읽음 1 게시판입니다. 홍길동 2023-05-03 10 2 안녕하세요. 하하하 하하하 2023-05-02 12 1 게시판입니다. 홍길동 2023-05-03 10 2 안녕하세요. 하하하 하하하 2023-05-02 12 1 게시판입니다. 홍길동 2023-05-03 10 2 안녕하세요. 하하하 하하하 2023-05-02 12 1 게시판입니다. 홍길동 2023-05-03 10 2 안녕하세요. 하하하 하하하 2023-05-02 12 1 게시판입니다. 홍길동 2023-05-03 10 2 안녕하세요. 하하하 하하하 2023-05-02 12 Previous 1 2 3 4 5 6 7 8 9 Next ■ CSS 코드 ■ 실행 결과 ■ 아이콘을 제공 https://icons..
★ 부트스트랩, BootStrap 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS프레임워크이다. https://getbootstrap.com/docs/5.3/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 다운로드 CDN VSCode 터미널을 이용해서 다운로드 ■ 부트스트랩 가져오기 명령어 ■ 다양한 사용 설명 https://getbootstrap.kr/docs/5.2/getting-st..
★ Slider을 이용해서 상품 목록 만들기 range : true, 버튼을 두개 생성 slide() : 슬라이더에 따른 금액 표시 ■ HTML 코드 List 가격 : 35,000원 ~ 70,000원 상품명 15000 Lorem, ipsum dolor. 50000 Blanditiis, eum nostrum. 100000 Cum, cupiditate omnis. 50000 Eos, odio eum. 40000 Iure, eligendi blanditiis. 30000 Praesentium, maiores provident! 20000 Saepe, dicta modi! 90000 Rerum, doloremque voluptate. 80000 Consequuntur, rerum eum? 70000 Distin..
