웹서비스
프로그램에서의 클라이언트 > 브라우저 (IE, Chrome, Safari ...)
● 프로토콜 (통신규약)
복수의 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약
- 프로토콜 종류
1) HTTP: Hyper Text Transfer Protocol
2) HTTPS: Hyper Text Transfer Protocol Secure
웹 서버와 웹 브라우저가 HTTP 규약을 따름.( ie, 사파리, 크롬 등)
3) FTP: File Transfer Protocol
4) Telnet: Terminal Network
5) POP3: Post Office Protocol Version 3
등등
http, https를 통해 아이피에 할당된 하드웨어를 호출, 웹 프로그램(web server)에 접근
프로토콜//아이피:포트
●http://localhost:8080/index.jsp
- localhost = 127.0.0.1
- :8080 > 포트=길
포트가 적혀있지 않은 경우
http 기본 80번 포트 http://www.naver.com:80
https 기본 443번 포트 (보안화) https://www.naver.com:443
- 포트 범위 : 0~65535
- 예약 포트 범위 : 0~1023 까지 (이 포트로는 설정하면 안된다.)
●Web Server -apache
html 문서만 반응
Web Container -tomcat (→WAS : web application server★)
웹 서버에서 읽지 못한 내용을 html로 변환하여 웹서버로 전달
(다시보기)개발환경 세팅, 웹서버 실행하기☞
html5는 <!DOCTYPE html> 뒤 내용 생략 가능
● html 기본 문법과 속성을 알기
● class : 그룹화
id : 유일화
● 자바스크립트(JavaScript)
동적으로 이벤트를 발생시키는 언어 (화면)
HTML(Hyper Text Markup Language)
HTML은 마크업 언어로서 웹 페이지를 표현하는 언어이다.
HTML 태그의 이해
① HTML의 모든 태그는 시작과 끝 태그로 이루어진다.
② HTML 태그에는 속성을 지정할 수 있다.
③ 웹 브라우저에 보여지는 내용들을 표현한다.
HTML의 레이아웃 관련 태그
실무에서 div, header, navigation, footer를 많이 사용한다.
CSS(Cascading Style Sheets)
웹 페이지 전체의 일관성을 유지할 수 있도록 스타일을 미리 저장해 둔 시트
CSS 문법
- 선택자(Selector)는 스타일을 적용하기 위한 대상
(HTML 요소를 사용할 수도 있고 ID나 Class 형태로 정의할 수도 있다)
- 스타일은 다양한 형태로 지정할 수 있으며 ‘속성 : 값’ 형태로 지정
CSS 선택자
- 공용 선택자(Universal Selector. 일반 선택자)
HTML 요소를 선택자로 하여 스타일을 적용할 수 있으며, 이 경우 해당 HTML 요소
모두에 스타일이 적용된다.
- 태그 선택자(Type Selector)
지정한 태그에 대하여 스타일이 적용된다.
- 클래스 선택자(Class Selector) - 그룹화
클래스 선택자를 활용하면 특정 HTML 요소들을 그룹화하여 스타일을 지정하는 것이
가능하다.
-아이디 선택자(ID Selector) -유일화
특정 ID를 부여하여 ID에 스타일을 지정할 수 있다.
메모장으로 간단한 웹 페이지를 작성하고 실행하기
절대경로에서 호출한 상황
tomcat을 통해 호출
tomcat의 \webapps\ROOT 경로에 test.html 파일을 넣는다.
tomcat이 실행되지 않는다.
톰캣 구동시에 필요한 java path가 설정되어있지 않기 때문이다.
* java path 설정
내 컴퓨터>속성>고급시스템속성>환경변수>시스템변수
자바 PATH 시스템 변수를 추가한다.
내 컴퓨터>속성>고급시스템속성>환경변수>시스템변수>path>편집
변수로 추가했던 JAVA_HOME의 bin 폴더를 변수값으로 추가한다.
;%JAVA_HOME%\bin;
다시 tomcat을 startup한다.
tomcat이 실행되는 모습
페이지가 호출되는 모습
'UI／UX엔지니어링 > HTML' 카테고리의 다른 글
| eclipse HTML 작업환경 설정 & HTML 태그 종류 (0) | 2020.02.20 |
|---|