on
20211025
20211025
2021 010 25 : 필기 내용
1. Java 웹 프로젝트 : Java EE
2. 프로젝트 생성 : Dynamic Web Project
=> File => New => Dynamic Web Project
=> File => New => Others => web => Dynamic Web Project
3. Java 웹 프로젝트 : back-end : Servlet ( ~~~.java)
front-end : ~~.jsp / ~~.html / ~~.css / javascript (~~~.js)
4. Java Resources => src : back-end : Servlet ( ~~~.java)
5. WebContent : front-end : ~~.jsp / ~~.html / ~~.css / javascript (~~~.js)
css 폴더 : ~~~.css
js 폴더 : ~~~.js
6. WEB-INF : 웹프로젝트에 대한 환경설정 (web.xml) <=== 폴더 또는 파일명 수정 불가!!!!!!
7. web.xml : 웹 프로젝트가 구동하면 가장 먼저 Tomcat 웹서버가 찾아가는 문서
따라서 하나의 프로젝트에 단 하나만 존재해야 한다!!!!!!
8. WEB-INF => lib : 외부라이브러리(~~.jar)
9. Java 웹 프로젝트 내보내기 : Export => war 파일로 내보내기
Java => zip : 단순 압축 파일
Java Web => war : 설치 기능 포함
==============================================================
10. 스프링 프레임워크 (MVC)
=> 현존하는 웹 프레임워크 중 가장 뛰어남!! (속도 / 개발 / 유지보수 용이)
=> 스프링 프레임워크 :기본 틀을 갖추고 있기 때문에.... 처음 학습할 때에는 시간적인 투자가 필요..
11. 스프링 부트
==============================================================
HTML에 대하여~~~
1. 웹 브라우저에서 사용자 화면을 꾸미기 위한 용도로 만들어진 마크업 언어..
2. HTML4 / HTML5
HTML4 : 단순 웹 페이지 작업을 위한 마크업
21. 10. 26. 오전 8:37 네이버 카페
https://cafe.naver.com/freeflux 2/6
HTML5 : 단순 웹 페이지 작업 + API 내장
웹 브라우저에 DB 생성 / 그래픽(canvas 태그) / 3D 기능 지원(Open GL) / 오프라인 작업 지원
3. HTML5 는 문법이 엄격!!!! <= 웹 표준(어떤 환경에서도 동일한 화면을 제공)
4. W3C 에서 스펙을 정함!!!
권고 사항 : 화면 레이아웃 : html5 태그로 작성
화면 꾸미기 : ~~~.css 작성
이벤트 처리 : ~~.js 작성
=> 이벤트 : 사용자가 마우스 / 키보드 조작을 통한 행위....
5. html / css / js => 기본 엔진 : Webkit 엔진
6. html5 추가된 태그 : 시맨틱 태그
=> 검색 엔진의 최적화(SEO)
=> : 해당 페이지의 제목
=> : 해당 페이지의 하단 (개인정보처리 정책/~~~)
=> : 메뉴모음
=> : 해당 페이지와 연관 컨텐트
=> : 해당 페이지와 연관 컨텐트 그룹화
=> : 해당 페이지와 관련이 먼 컨텐트
7. 마크업 (HTML / XML)
HTML XML (개발사들이 태그를 선언)
꾸미기 O X
링크 O X
태그 O X
웹페이지 데이터
--------------------------------------------------------------
8. HTML5 미디어 관련 태그 내장
/ : 유투브
=> HTML4 :
9. 그 외
오프라인 웹 구현 : WebSQL / File API (manifest / storage)
그래픽 : + javascript
10. HTML5를 이용하여 개발된 앱 => 안드로이드 또는 애플 앱으로 변환 가능.
====================================================
HTML5 사용
1. 선언문 :
2. 웹 페이지 영역 : root 태그(노드,엘리먼트)
21. 10. 26. 오전 8:37 네이버 카페
https://cafe.naver.com/freeflux 3/6
~~
3.
내부에는 두 가지 영역이 존재
1. : 사용자에게 화면에 보여지지 않는 부분
: 웹 페이지에 대한 기본 환경 설정
인코딩 설정
사용자 위치
별도의 자바스트립트 파일을 로드
css 파일을 로드...
2. : 사용자 화면을 구성
: 사용자 입력처리 사용자 입력창 및 전송관련 태그들...
---------------------------------------------------------------------
사용자 화면을 구성 주요 태그 : ~~
1. ~~~~ 글자 크기를 설정
자동 줄바꿈 기능 포함
2. 화면 레이아웃을 구성 :
특별한 기능 없이 화면의 분할 하는 역할
영역을 설정하는 태그
자바스크립트 함수 : jQuery.js => 를 이용할 때 가장 많이 사용..
3. : 주로 단어와 단어 사이 / 컨텐트 배치
한 칸 띄어쓰기
4. 목록 태그 : 자동 줄바꿈 기능 포함
: 연번(숫자/로마자)
: 기호(원/ 사각형)
=> 반응형 웹 컨텐트 작업 시, 많이 사용...
5. 페이지 이동(링크) 태그
사용자에게 보여줄 내용
사용자에게 보여줄 내용
동일 웹페이지에서 이동
사용자에게 보여줄 내용
예)
페이지가 넘어갈 정도의 컨텐트
위로 이동
21. 10. 26. 오전 8:37 네이버 카페
https://cafe.naver.com/freeflux 4/6
예)
페이지가 넘어갈 정도의 컨텐트
위로 이동
6. 표 형태로 컨텐트 표현
행 :
열 : /
테두리 :
행과 행을 하나로 합할 경우 : rowspan="2"
열과 열을 하나로 합할 경우 : colspan="2"
7. 이미지(그림) 표현
8. 일반 글씨
1. 원하는 곳에 직접 입력 (띄어쓰기(1칸) / 줄바꿈 지원 안함)
줄바꿈 : , 단락 :
2. css 적용을 위한 글씨 :
-----------------------------------------------------------------------------
9. 서버로 전송하기 위한 태그 : 사용자 입력
action="전송받을 대상" : 어떤 파일 / 서블릿 이름
method="전송방식"
(get / post)
get : 테스트 코드 : 웹주소줄에 데이터가 노출 O
post : 배포직전 : 웹주소줄에 데이터가 노출 X
10. 폼 내부에 영역을 구분
영역에 제목 :
사용자 입력관련 태그들......
21. 10. 26. 오전 8:37 네이버 카페
https://cafe.naver.com/freeflux 5/6
사용자 입력관련 태그들......
----------------------------------------------------
11. 사용자 입력관련 태그들....
input 계열 :
input 계열의 기본 속성
1. type 속성 : 입력 종류
2. name 속성 : 파라미터명을 설정
3. value 속성 : 입력된 값을 추출/설정
4. placeholder 속성 : 사용자에게 어떤 값(형태)을 입력하라고 힌트를 주는 속성
5. required 속성 : 반드시 입력해야 하는 필드를 설정
6. readonly 속성 : 수정불가능 / 추출만 가능
type 속성 : text : 한줄짜리 입력창
password : 입력 데이터 노출 방지
radio : 여러 개 중 하나만 선택 가능 / 단, name 속성 값이 동일..
checkbox : 다중 선택 가능
HTML5 가 새롭게 지원하는 속성 값
email : @ 문자가 있느느지를 유효성 검사
url : http:// 로 시작하는지에 대한 유효성 검사
number : 입력창 옆에 위아래 화살표 버튼을 제공하여 사용가가 증가 또는 감소 값을 선택 가능,..
range : 범위를 지정 값을 입력
color : 운영체제가 제공하는 칼라 팔레트를 제공
date / time /datetime /week : 날짜 /시간 / 날짜시간 / 몇 번째주에 해당하는지 선택
submit : 사이의 모든 값을 서버로 전송
reset : 사이의 모든 값에 대한 입력을 취소
text / password : 입력되는 글자 수를 제한도 가능 (maxlength : 입력 글자를 제한)
: 입력창에 대한 기본 크기를 설정 (size : 크기 지정)
공유하기 글 요소 저작자표시
from http://milktea-developer.tistory.com/26 by ccl(A) rewrite - 2021-10-26 09:01:49