WebUI
Web Application(Web Component)
- java 기술 사용
- JDK(자바 개발환경 : 컴파일러 등)
- JRE(자바 실행환경 = JVM + API(rt.jar)
Web
- network 연결 :
시스템식별 IP (고정, 동적) / Port No (1~65535, 1024까지는 예약돼 있는 번호), TCP/IP
Client Host : 요청하는 시스템
Server Host : 응답하는 시스템
- www
- protocol : 통신 규약
연결 : TCP/IP
service : http - html(hyper text markup language)
html4 => html(표준화)
http 개발언어
interpreter 방식의 개발언어
전용번역기에 의해서 한줄씩 번역 및 실행
- 장점 : os에 독립적
- 전제조건 : os에 맞는 번역기가 설치되어있어야 함.
- 크로스 브라우저(다양한 기반의 브라우저에 서비스제공) : NetScape, IE(버전 호환성 부족, 개발하기 힘듬) => 엣지, 크롬, 사파리, 오페라 등
기본 브라우저 : 크롬 많이 사용 - 개발 및 서비스(운영) 환경
Web Server + Web Container = Tomcat(오픈소스)
Tomcat : 8.5버전(많이사용)
Spring Boot(Spring F/W) => Tomcat 9.x 내장돼 있음
웹 개발 관련 법규
: 장애인차별금지법
웹 개발환경 구축
- WAS : Tomcat
포트번호 조회 : cmd 창에서 netstat -a
~.txt하면 cmd창에서 저장됨
- 톰캣서버 정상 구동 : 웹 요청
- http://127.0.0.1:8070
Web Architecture
-
MVC Pattern 기반으로 개발
-
static contents : html, css, javascript(F/W : jquery, bootstrap 등)
-
dynamic contents : CGI
-
CGI :
- PHP, ASP
- Servlet / JSP -
Framework
- Spring F/W- Spring Boot F/W
- eGov F/W
- MyBatis F/W : SQL Mapping - Hibernate F/W : ORM
- JPA(Java Persistence API) : ORM 표준 JAVA API
WebUI
-
html / html5
- 화면 구조 역할 담당 (화면을 어떻게 나눌지,)
-
CSS(cascading style sheet)
- 표현 역할 담당 (화면을 어떻게 표현할건지)
- 색상, 글꼴, 라인 패턴 등
-
javascript
- 사용자 이벤트 처리 역할 담당- 사용자 입력데이터 검증
- 동적 화면 제어 가능
웹 프로젝트
- static web project
- dynamic web project
html
www.w3.org
www.w3schools.com - api, 예제 등 볼 수 있음
html 문서 특징
-
태그 (element, tag) 대소문자 구문하지 않음
-
html 파일명, 이미지 파일명은 대소문자 구분함
-
태그의 구조
- 트리구조 : 부모태그(root tag), 자식태그
- 태그를 nested해서 사용하는 경우에는 태그가 overlap 되지 않도록 올바르게 종료태그로 닫아주어야 함
-
태그 구성요소
(1) <태그명>body contents</태그명>
(2) <태그명></태그명> 또는 <태그명 /> 또는 <태그명> <-- (브라우저가 자동으로 파싱처리, 이렇게 처리하면 xml에서는 오류발생)
(3) 태그에 대한 부가적인 정보는 속성으로 표현
<시작태그명 속성명="속성값" 속성명='속성값'> -
주석
<!-- 주석내용 기술 : 응답시에 주석내용 함께 응답이뤄짐 : 사용자가 주석을 소스보기에서 보는 거 가능, 페이지 레이아웃 설명 -->
웹 시작페이지
-
home page(시작 페이지)
-
기본 : index.html
-
WEB-INF>
-
웹 오류
HTTP 상태 404 – 찾을 수 없음 : 요청 url 정보가 틀린 경우, 경로 틀림, 파일 미존재
태그 종류
- block tag
- System.out.println();
- 자동으로 라인 이동시켜주는 태그들
<h1>,<p>,<div>
- inline tag
-System.out.print();- 라인 이동 없음
<a>, <img>, <span>
기본태그
<h1>~</h6>
제목태그, 기본적으로 라인 이동
글자 크기를 6단계<br>라인이동<p>단락 이동<hr>수평선
순서있는 목록태그
- 속성 :
type="[1] | A | a | i | I"
start= "시작인덴스번호" / 인덱스번호는 1번부터
<ol><li>a<li> <li>a<li> <li>a<li></ol>
순서없는 목록태그
- 속성 :
type="[disc] | circle | square
start= "시작인덴스번호" / 인덱스번호는 1번부터<ul><li>a<li> <li>a<li> <li>a<li></ul>
이동 태그 (anchor tag)
<a href = 이동페이지 url">문자열 또는 이미지
