web 18

[XML] XML의 개념과 예시

* XML(eXtensible Markup Language) : W3C 의 웹 표준 언어로 개발 : w3c.org : HTML5 표준 : 데이터의 저장과 교환(JSON), 환경설정, UI 등에 많이 사용 => 이렇게도 사용 가능! * HTML의 단점 1. 사용할 수 있는 태그가 제한적 2. 정보 표현에만 기능이 집중 3. 구조화된 정보를 표현 / 검색, 문서 유효성 검증 X * XML 구조 1. XML 선언부 >> 필수 2. 문서 구조(DTD: Document Type Definition) >> 생략 가능! Doctype 루트엘리먼트명 SYSTEM 'dtd파일의 경로와 파일명'> 3. XML 태그 >> 필수 * 1. 시작태그와 다음에는 반드시 종료 태그가 있어야 한다. 2. 모든 엘리먼트명은 대소문자를 ..

web 2023.05.07

[BootStrap] 부트스트랩 활용

* BootStrap이란? - 트위터 개발자들이 아이콘, 모양, 색상, 디자인 등을 공개한 것이 bootstrap의 시작 - 태그에 클래스만 주더라도 자동으로 크기, 모양, 색상이 잡히게 됨 * 사용 방법 : getbootstrap.com에서 > cnd 복사해서 [bootstrap01]에 복사 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 bootstrap01 div{ border: 1px solid green;} 1 2 3 1 2 3 4 5 6 7 8 9 Colored by Color Scripter cs > snippets에 boots..

web 2023.05.07

[AJAX] Ajax와 jquery (이미지 변경/로그인&회원가입/데이터 가져오기)

- [jqueryAjax01.jsp] : 이미지 클릭하면 다른 페이지로 페이드인-페이드아웃 변경 > jquery로 ajax 활용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 jqueryAjax01.jsp img{ width: 150px; height: 150px; } $(function(){ $("#img").on("click", function(){ // console.log("이미지 클릭"); // 클릭하면 after.PNG로 변경 /* $("img").attr("..

web 2023.05.07

[AJAX] 텍스트 입력해서 데이터 출력 / 이미지 변경

* AJAX(Asynchronous Javascript And XML) 비동기 방식의 자바 스크립트와 XML : 자바스크립트를 통해서 서버에 데이터를 요청하는 것 : 리로드를 하지 않고 데이터를 불러 오는 방식 - [ajax01] : ajax와 jsp 비교 > simple1.txt / simple2.jsp / simple2.txt / simple2.jsp 버튼 + 페이지 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 ..

web 2023.05.07

[jquery] jquery / css 응용

- [test] : 텍스트 작성 창 + 버튼 누르면 팝업처럼 new Page 열리게 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Insert title here // 버튼을 클릭하면 show 함수를 실행 $(function(){ $("#btn").on("click", show); }) function show(){ // console.log("test"); var w = 300; var h = 300; var x = 100; var y = 100; var spec = "width="+w+",height="+h+",left="+x+",top="+y +",menubar=0,resiz..

web 2023.05.07

[jsp] 게시판 만들기 (게시물 작성/수정/게시물 리스트)

게시물번호 작성자 제목 내용 작성일시 조회수 추천수 ip 상태정보 숫자 문자 문자 문자 날짜 숫자 숫자 문자 숫자 8 10 40 CLOB date 5 5 16 2 char ==> 2000자 LOB ==> CLOB varchar2 ==> 4000자 BLOB BFILE * 테이블 만들기! create table lobtest (id1 clob, id2 blob, id3 bfile); (D:\app\jhta\oradata\orcl oracle 파일 저장 경로) * 테이블 생성 CREATE TABLE BOARD (BNO NUMBER(8), WRITER VARCHAR2(10), TITLE VARCHAR2(40), CONTENTS CLOB, REGDATE DATE, HITS NUMBER(5..

web 2023.04.30

[jsp] 글 작성 게시물 만들기

* 글 작성 게시물 만들기 - [write.jsp] > servlets.com > cosfile upload library > cos-22.05.zip(dev에 압축풀기) > lib의 cos.jar 파일을 webapp- web-inf 에 추가! (=>파일 다운받는 것을 도와줄!) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 write.jsp 제목 작성자 내용 첨부파일 Colored by Color Scripter cs - [result.jsp] : 게시판에 작성한 내용으로 실제 파일 저장 + 화면에 출력 >> webapp에 upload 라는 폴더 생성!! (폴더 생성하..

web 2023.04.30

[jsp] 쇼핑몰 (제품 리스트/ 제품 상세 페이지/ 장바구니 만들기/ 우편번호 찾기)

* db에 data 셋팅 - 테이블 생성(sql) CREATE TABLE PRODUCT (pno number(7), pname varchar2(50), price number(10), dcratio number(3), prodesc varchar2(100), qty number(8), imgfile varchar2(100), bigfile varchar2(100)); - 시퀀스 생성(sql) CREATE SEQUENCE PRODUCT_PNO_SEQ START WITH 1 INCREMENT BY 1 NOCACHE NOCYCLE; - data 파일 cmd에 저장 insert into product values (PRODUCT_PNO_SEQ.NEXTVAL,..

web 2023.04.30

[jsp] 네이버 메인 페이지 만들기(토픽 별 페이지, 로그인 화면)

- [Layout.jsp] : 네이버 메인 화면 레이아웃 만들기 > header, nav, sidebar, footer 등 jsp 파일 action tag로 연결 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 layout.jsp Colored by Color Scripter cs - [main.css] : 재사용 가능한 css 레이아웃 파일 만들기 => layout.jsp의 style 안쪽 내용을 main.css에 잘라내서 붙이기 => 추가 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ..

web 2023.04.30

[jsp] cookie 처리(생성, 읽기, 삭제) + 자바스크립트로!

- [userInput.jsp] : 입력창 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 userInput.jsp Colored by Color Scripter cs - [userInputOk.jsp] : 쿠키 저장 > 입력 내용 출력 + userCookieList.jsp 링크 연결 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 userInputOk.jsp 쿠키보러가기 Colored by Color Scripter cs - [userCookieList.jsp] : 쿠키 관련 정보 출력 > 쿠키 관련 정보는 '개발자 도구 - 애플리케..

web 2023.04.30