웹(web)이란?
- 월드 와이드 웹(WWW, W3; World Wide Web)의 줄임말
- 전 세계를 연결하는 거미줄과 같은 네트워크 상의 인터넷 망을 통해 서로 정보를 공유하는 정보 서비스 공간
웹 정보의 작성 및 표현
- 웹의 모든 정보는 HTML(Hyper Text Markup Language) 언어로 표현되는 웹 문서로 작성
- HTTP(Hyper Text Transfer Protocol) 통신 규약을 통해 전달
HTTP란
1) 데이터를 주고 받기 위한 프로토콜
2) HTTP 프로토콜은 Header 영역과 Body 영역으로 나뉜다.
Header 영역에는 인증과 관련된 정보값들이 들어갈 수 있으며,
Body 부분에는 데이터를 전달하는 XML(또는 JSON - 데이터를 패킷 방식으로 보냄)이 들어갈 수 있다.
- 전달된 웹 문서는 웹 브라우저에 의해서 해석되어 사용자에게 제공된다. 즉 웹 브라우저가 있어야만 HTML 해석 가능.
- 팀 너버스 리(웹의 선구자, HTML 최초 개발자)는 웹 관련 모든 코드를 공개했으며, W3C를 통해서 HTTP,HTML의 표준 등을 제안했고 최초의 웹 브라우저인 'Word wide Web'도 제공했다.
네트워크상 웹서비스 구조
웹 브라우저 -> 유저의 검색(요청) -> 웹 서버(요청 처리) -> 웹 어플리케이션 서버(프로그램 작동) - DB가 필요시에 DB에 요청 - 쿼리가 날아오면 DB에서 그 결과값을 웹 앱 서버에 -> 웹 서버 -> 클라이언트 쪽으로 응답
웹 마크업 언어의 발전
- 마크업(markup)
문서 내용 자체가 아닌 내용에 관한 크기나 모양,표시 위치와 같은 부가적인 정보
| 마크업 언어 | 특징 |
| SGML | HTML과 모든 마크업 언어의 기반인 된 마크업 언어 다양한 전자 문서들의 구조와 내용을 명세하기 위한 표준 |
| HTML | 쉽고 편리한 웹 페이지 작성용 마크업 언어 웹 기술의 출발점이 된 웹 문서 표준 |
| XML | 문서나 정보의 교환을 위한 웹 표준 |
| XHTML | HTML에 XML장점 접목했으나 현재에는 진행 중단 |
| HTML5 | 웹 페이지에서 웹 애플리케이션까지 지원하는 마크업 언어이자 플랫폼 기술 , 현재 진행 중 차세대 웹 문서 표준 |
웹 브라우저 : HTML 소스를 번역하여 화면에 출력
1. 익스플로러 - 마이크로소프트 : 가장 범용적인 브라우저, 액티브 X 기술 지원, 보완 취소 및 웹 표준 준수율 낮음
2. 크롬 - 구글 : 가볍고 빠른 브라우저, 안드로이드 호환성으로 최근 점유율 향상
3. 파이어폭스 - 모질라 : 공개 코드로 개발중인 점유율 높은 브라우저 / 빠른 속도와 보안, 프라이버시에 강점
4. 사파리 - 애플 : 간결한 디자인, 독특한 기능, 모바일용으로도 많이 사용
5. 오페라 - 오페라 소프트웨어 : 적은 용량과 빠른 속도, 모바일용으로 사용
cf) W3C : 웹 표준기관
프로그램들이 어떤 브라우저에서는 잘 돌아가고, 어떤 브라우저에서는 돌아가지 않을 수 있는데 그 이유는 엔진이 달라서이기 때문이다. 엔진이 해석하는 과정에서 브라우저마다 되는 게 있고, 안 되는 게 있음. (갭이 컸음) 이제는 성능도 좋아지고 엔진도 비슷해졌다.
웹 브라우저 엔진
- 단순한 번역기(interperter) 이상의 역할을 수행하는 웹 브라우저의 핵심
- HTML, CSS, 자바스크립트 코드를 받아 해석하고 처리하는 기능 수행
웹 브라우저 GUI -> 브라우저)
로더(loader) -> HTML의 경우) DOM 파서 -> DOM 트리 -> 자바스크립트 섞여있으면 자바스크립트 엔진으로
로더(loader) -> CSS의 경우) CSS 파서 -> Style,Layout 해석 -> 그래픽이기 때문에 렌더링 엔진 돌면서 -> 렌더링트리(프린트) -> 렌더링 엔진에 의해서 페인터(배치 및 그리기) -> 웹 브라우저에 보내줌
웹 브라우저 엔진의 종류
1) 게코 - 모질라 파이어폭스
2) 웹킷 - 구글 크롬, 애플 사파리
3) 트라이던트 - IE
4) 프레스토 - 오페라
웹 브라우저 엔진의 요소
1) DOM 트리 구성 : DOM 파서에 의해서
HTML 문서를 파서(parser)를 통해 파싱(다른 형태의 데이터로 변환)해서 메모리에 'DOM(Document Object Model) 트리' 라는 내부 트리 구성
2) 렌터 트리 구성 : 렌더 엔진
렌터 트리(DOM 트리 중 화면에 보여지는 엘리먼트만을 선별하여 만든 내부 저장 구조 )
3) 레이아웃 구성
구성된 렌더 트리를 웹 브라우저 화면의 지정된 영역에 매핑하여 배치하여 레이아웃 구성
CSS스타일이 분석되어 적용된다.
4) 페인팅 : 페인터
구성된 레이아웃을 실제 화면의 브라우저 창에 표현
웹 브라우저의 처리 과정
a. MVC (Model View Controller) 구조를 그대로 따른다.
b. MVC 개발 방식
- 프로그램 개발 모듈을 화면(View), 데이터(Model) , 기능(Controller) 영역으로 분할하여
분석, 설계, 상호작용을 통해 전체 프로그램 실행되는 구조로 개발하는 방식
- 대표적인 설계/아키텍쳐
| MVC 패턴요소 | 처리 대상(코드) | 기능 | 브라우저 구성요소 |
| 모델 | HTML코드 | (문서)데이터 | DOM 파서 |
| 뷰 | CSS코드 | (디자인)레이아웃 | 렌더 엔진 |
| 기능 제어기 | Javascript 코드 | 동적 처리 | 자바스크립트 엔진 |
HTML 버전
91 HTML 1.0
90년대 중반 HTML 2.0 / CSS1 /JavaScript
99 HTML 4.01 (4.01과 5는 서로 호환가능)
00년대에 XHTML 1.1 있었으나 사라짐
06 jQuery , 이후에 jQuery Mobile
14 2차 웹 브라우저 전쟁(표준화) : HTML5 도입, CSS3
웹 표준
- 웹 프로그래밍에서 지켜야 하는 표준적 규칙, 어떤 운영체제나 웹 브라우저에서도 비교적 동일한 디자인과 기능 구현 목적
- 우리나라의 경우 많은 사이트가 웹 표준 어기고 인터넷 익스플로러에서만 작동되는 비표준 기술과 액티브 x 기술 남용하여 다른 브라우저 및 모바일 기기에서 정상적으로 이용할 수 없는 문제가 발생
why 웹 표준을 따라야 하는가?
- 다양한 장치의 접근성 지원
- 구조 표현의 분리로 디자인, 기획, 개발 업무 단순화
- 배워야 하는 내용이 제한되어 개발 부담 감소
- 웹 브라우저 상,하위 버전 간의 호환성 유지
- 다양한 플랫폼에서 실행 가능한 단일 프로그램 개발로 개발 및 유지비용 감소
- 장애인, 노약자 등에 대한 보편적 웹 접근성 지원
- 유효성 검사 서비스(w3c제공) 를 통해 웹 표준 준수 여부 빠르게 검증
HTML5 API 주요 기능
- 캔버스 : 2차원 그래픽 API
- 멀티미디어 : 별도의 플레이어 없이 실행 가능 미디어,오디오 API 제공
- 위치정보
- 오프라인 웹
- 웹 데이터베이스
- 로컬 저장소 : 간단한 데이터 저장 위한 API 제공
- 웹 소켓 : 서버와의 실시간 데이터 교환 위한 API 제공
- 웹 워커 : 웹 어플리케이션을 위한 스레드 관련 API 제공
자바스크립트
- java(jsp) : 컴파일 언어, 서버에서 실행
- javascript : 인터프리터 언어(한 줄 씩 실행), 클라이언트(웹 브라우저)에서 실행
- 가변자료형이기 때문에 var a = 10; // a는 number형 또는 a= "안녕" //a는 문자형
-jQuery : 자바스크립트 라이브러리
HTML5 문서의 기본 구조
DOCTYPE 문서 선언부 : HTML 문서의 버전 표시
<html>엘리먼트 영역
<head>엘리먼트 영역</head>
<body>엘리먼트 영역</body>
</html>
- 문서 선언부 제외하고는 <html>시작 태그로 시작해서 </html>종료 태그로 끝남
- <html>태그 안에는 <head></head>태그 쌍이 먼저 오고 <body></body>태그 쌍이 온다.
HTML5 문서
- <!DOCTYPE html> 선언 : 웹 브라우저에 html5로 작성되어있음을 알림
- HTML5 문서 자체는 아스키 코드로 작성된 일반 텍스트 파일이므로, 문서 작성은 일반 텍스트 편집기로도 가능
- 파일 확장자는 .html이나 .htm으로 저장 가능하며, 웹 브라우저를 통해 문서 결과 확인
HTML5의 기본 요소
- 태그(tag) : '<'와 '>'로 둘러싸인 문자열로 시작태그와 종료태그로 구성
- 내용(content) : 태그로 둘러싸인 문자열
- 엘리먼트 : 태그와 내용을 모두 포함한 전체 문자열 - 계층적으로 상위 엘리먼트 안에 하위 엘리먼트 존재 가능
- 속성(attribute) : 엘리먼트의 상셍한 표현 기능, 시작 태그 안에서 사용 <h1 style="color:blue";>
- 속성값(value) : 속성값은 " " 또는 ' '로 감싸기 <h1 style="color:blue";>
태그와 엘리먼트
- 태그 : 웹 브라우저가 해석해야 할 대상, 엘리먼트의 시작과 끝을 지칭하는 구성 요소 중 하나
엘리먼트 내용에 대한 의미나 역할을 표현하는 일종의 명령어
- 엘리먼트 : 문서의 논리적 구성요소, 서로 관련된 태그 조각과 내용 조각들의 조합
- 태그는 '형식'을, 엘리먼트는 '형식+내용'을 의미
'WEB' 카테고리의 다른 글
| UI 설계 및 구현 (0) | 2022.06.22 |
|---|---|
| XML, JSP 맛보기 및 입력 태그 (0) | 2022.06.13 |
| HTML5 레이아웃 및 시맨틱 태그 (0) | 2022.06.09 |
| HTML5 기본 태그 (0) | 2022.06.08 |
| 톰캣 설치 및 웹 개발환경 설정 (0) | 2022.06.06 |
