KOSTA DAY28
Web
WEB
비지니스 로직 처리→ Java
비지니스의 데이터값 저장 및 구조적인 관리 → RDB
비지니스 모델 → web
- UI적인 부분들을 웹이라는 환경을 통해 사용할 수 있도록 한다.
- Java SE를 이용해서 서버로 이용할수 없다. → 서블릿 / JSP 로 구현 필요
서블릿(servlet)
- 웹프로그래밍에서 클라이언트의 요청을 처리하고 그 결과를 다시 클라이언트에게 전송하는 Servlet 클래스의 구현 규칙을 지킨 자바 프로그래밍 기술
- 간단히 말하자면, 자바를 사용하여 웹을 만들기위해 필요한 기술이며 클라이언트의 요청을 처리하고 그결과를 다시 전송하는 역할을 하는 자바 프로그램
CSS
- 종속형 시트 (Cascading Style Sheet)
마크업 언어가 실제 표시되는 방법을 기술하는 언어로 HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. - 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
- HTML , CSS 레이아웃 화면 구성
웹의 필요성
- 마케팅 , 홍보 효과로서의 웹
- 정보교환의 수단
- 인터넷 문화자체
- 웹 서비스
웹 플랫폼의 구성요소
클라이언트 기술
- RIA(Rich Internet Application) 기술의 등장
RIA
웹 애플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 애플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다. 즉, 별도의 설치가 필요 없는 웹 브라우저 기반의 애플리케이션 배포 장점과 서버 측 웹 서비스와의 연동, 마크업 언어 기반의 선언적 애플리케이션 구성 등은 유지하면 서 데스크톱 애플리케이션과 대등한 사용자 경험을 주는 것을 목표로 하는 기술이다.
동적인 기능과 화려한 UI를 웹에서 구현
컨텐츠 기술
- 기존의 웹서비스는 내부 DB에 국한
- 많은 웹 서비스들은 자신의 DATA를 공유(Open API)
- 웹전체를 하나의 DATA로 볼 수 있게 됨
서버기술
- 다양한 웹개발 언어 및 프레임워크 등장
표준기술
- 웹표준 준수의 확장
- 기존 explorer 구버전의 경우 웹표준을 지키지 않음
웹의 접근성
- W3C 표준 준수
- 반응형 웹
- 시각장애인 접근 가능하도록
웹표준
W3C토론을 통해 나온 권고안
목표
웹표준스펙
웹페이지 내용, 구성 = HTML
디자인 = CSS
이기종간 데이터 전달 = XML
자바스크립트, JQUEARY, REACT, VIEW
- HTML : 화면구성, 내용
- XML : 주고 받을수 있는 정보
- 위의 내용으로 만으로는 기능구현 부족
이벤트 기능 : JavaScript - Java script 의 할일이 늘어남 ( 과거 오류창 띄우기 정도.. 현재 결재 및 여러기능 구현)
→ JQUEARY 등장 - 자바스크립트의 라이브러리 기능들이 점차 늘어나 포화상태가됨
→REACT, VIEW (프레임워크) 등이 나타났다.
HTML
Hyper Text Mark up Language
역사
- 과거 구버젼 HTML의 경우, 플러그인 기술 사용
ex) 웹어플리케이션 별 Active X 설치 필요 - HTML5 자체 브라우저 기능만으로 구현(플러그인 기술 대체)
- 최근 웹브라우저는 모두 HTML 5를 지원
구조
- DOCTYPE : 문서타입정의(HTML버젼의미)
- head : 필요한걸 불러오는 작업, 사전에 선언되야하는 부분, setting, 리소스불러오기 등 화면에 보여지는것과 상관 없다.
- body : 문서의 내용을 표시한다.
구동원리
- 서버는 클라이언트의 요청을 분석하여 결과값을 HTML로 전송한다.
- 서버는 결과값을 전송 후 클라이언트와 접속을 끊는다.
- 클라이언트는 서버로부터 전달받은 HTML을 웹브라우저에서 표시한다.
- 각 웹브라우저는 브라우저 엔진이 내장되어 있고, 이 엔진이 태그를 해석하여 화면을 표시한다.
마크업작성
- 태그는 브라우저에 의해 해석되며, 각 태그의 의미는 모두 다르다.
- 태그내용이 화면에 표시되지 않음
- Body, Title, BR 등과 같은 텍스트는 화면에 표시하지 않음
- 태그사이에 입력된 텍스트를 브라우저에 보여줌
- <h2>태그를 사용하여 제목을 입력
- <br>태그를 사용하여 줄바꿈
- <strong> 태그를 사용하여 강조
- <mark>태그를 사용하여 강조
DOCTYPE
브라우저는 현재 문서가 어떤형태의 문서인지 판단하는 목적으로 DOCTYPE을 확인한다.
- 선언되지 않을 경우, HTML을 해석하고 출력하는데 많은 시간 소요
- HTML5에서는 로 간소화 하였다.
Tag
- 구조와 의미를 브라우저로 전달한다.
- 대소문자 구별 없음
- 시작태그(<>)와 종료태그()로 쌍을 이루며 중첩되지 않도록 한다.
head
- <head>태그는 부라우저에게 html문서의 머리부분임을 알려준다.
- <title>, <meta>, <style>, <script>, <link>태그를 포홈할수 있다.
- <title> : 문서의 제목을 의미, 브라우저 제목표시줄에 태그내용이 표시
- <title>태그 외 다른태그로 표현한 정보는 화면에 나타나지 않는다.
- <style> , <link> : 스타일을 입힌다.(css)
- <script> : 자바 스크립트를 불러올 수 있다.
- <meta> : 문서에대한 일반 정보
- name , content 속성을 이용하여 다양한 정보를 나타낸다.
- 현재 html5는 <meta>만 이용하여도 시메틱한 웹으로 바꾼다.
Body
문서의 내용을 작성하는 부분
- 에 위치하며 내부 태그 및 을 제외한 모든 태그를 포함한다.
- id속성을 이용, 문서 내에서 유일하게 태그를 식별한다.(id 속성 중복 X)
- class 속성을 이용하여 여러태그에 공톡적인 특성을 부여 가능(중복가능)
h태그(heading)
- 문단의 제목을 지정할때 사용
- <h1> ~ <h6>으로 구성 ( 숫자가 커질수록 크기가 작아진다.)
- 단순히 문자가 크고작음을 표현하는것이 아니고,
- 문서의 구조를 표현하기위 사용한다.
범위에 따른 태그 분류
블럭레벨, 인라인 으로 나눌 수 있다.
블럭레벨
- 줄바꿈이 일어나며, 너비가 전체너비가 되는 형태이다.
- 종류 : h, div, ul, ol, li, p 등이 있다.
인라인
- 줄바꿈이 일어나지 않는다.
- 종류 : a, img, span 등이 있다.
목록형 태그
- : 폐이지로 이동하는 명령어
- href 는 문서내 특정지점으로 이동 가능
예시
테이블요소
- colspan : 열병합
- rowspan : 행병합
예제
오브젝트 ,이미지요소
- alt : 간단한 그림의 설명을 툴팁으로 보여줌, 이미지가 나타날 수 없는 경우 대체 텍스트를 설정함
- src : 이미지 자원의 위치를 지정함
- alt는 웹접근성을 위해서 사용된다.(시각장애인)
예제
FORM 요소
- 사용자로부터 데이터를 입력받아 서버에서 처리하기 위한 용도로 사용
- 사용자의 요청에 따라 서버는 html폼을 전달(회원가입 양식, 검색양식 등)
- submit : 사용자가 html폼에 적절한 데이터를 입력한 후, 서버로 전송
- 서버는 사용자의 요청을 분석한 후, 데이터 등록 or 조회 후 결과 반환
- 사용자가 입력하기 위한 컨트롤 요소들은 모두 <form>태그 하위에 위치해야함
- action 속성 : 데이터를 전송할 URL을 지정
- method속성 : 데이터 전송방식을 지정(GET, POST)
form 컨트롤 요소
예제
- input 태그안의 text, email, date, color, range, checkbox, radio 활용 및 select , feild 태그 활용