---
title: "HTML 정리 01"
date: "2019-01-23"
tags: ["HTML"]
status: archived
verified: false
---
---
## Web
* **문자, 동영상, 이미지를 인터넷을 사용하여 검색할 수 있는 서비스**
* 검색은 URL(Uniform Resource Location), HyperLink를 사용
* **인터넷(누리망)**
* **Hyper Text를 사용하여 비순차적으로 문서를 연결하는 프로그램**
* 1973년 **Vinton Cerf(빈튼서프), 밥 칸(Bob Kahn)**이 TCP/IP를 기반으로 한 네트워크끼리 연결하도록 설정한 네트워크
* Web 고안, URL, HTTP, HTML 만드신 웹의 아버지 **Tim Berners-Lee**
* **HTML문서는 Web Browser에서 동작**
* **Web Browser는 HTML을 분석, 그리는 일을 한다.**
* 브라우저마다 다르게 그렸기 때문에 **웹표준 등장**
* Web Browser 제작사는 다양
* IE, Chrome, FireFox, Opera, Safari, ...
* URL을 사용하여 web 서비스 이용
* **Web Server**
* Web Service를 제공하는 프로그램
* **Web Server는 HW가 아니라 SW**
* 유명한 Web Server는 ApacheHttpServer
* **Web에서 URL로 요청을 받아 HTML을 응답**
* **Web Container(Tomcat)**
* URL요청을 받았을 때 Servlet/JSP를 HTML로 변환하여 응답하는 프로그램
* 유명한 Web Container는 Apache Tomcat
* 기반 프로토콜은 TCP/IP, HTTP 사용
## URL의 구성
```
Protocol://ServerIP:PORT/ContextRoot/Service받을파일명
예) http://sist.co.kr:80/main/a.html
```
* 웹 서버 포트번호는 **80**(생략가능)
* 웹 클라이언트의 포트번호는 몇번이 열리는지 모른다.(랜덤하게 열린다)
## Tomcat 설치
* [톰캣 링크](http://tomcat.apache.org/)
* 다운로드에 있는 Windows Service Installer는 웹 서비스를 가용할 때 사용
* 보통 zip을 사용해서 개발
* 이클립스 Servers에 등록해서 HTML파일을 실행할 때 서버를 구동한다.
## HTML(HyperText Markup Language)
* **Markup** - 본문에서 특정 부분을 강조하여 보여주기 위한 것
* **Tim Berners Lee**가 고안
* **HTML5**가 현재 최종 버전
* **W3C(World Wide Web Consortium)** 에서 표준안 제정, 공표
* **Web Browser에서만 동작하는 언어**
* **연산의 기능이 없다.**
* **compile을 하지 않고 Tag를 그려서 보여주는 언어**
* **Error가 발생하지 않는다.**
* 문제가 발생한 코드를 찾기 어려움
* **HTML은 SGML언어에서 파생된 언어**
* **SGML(Standard Generalized Markup Language)**
* (위키)문서용 마크업 언어를 정의하기 위한 메타 언어
* Markup 언어를 작성할 수 있는 언어
* **SGML에서 HTML과 XML이 파생됨**
* **XML(eXtensible Markup Language)**
* **Tag를 개발자가 마음대로 정의하고 만드는 언어**
* **DTD(Document Type Definition, 문서 형식 정의)가 없다.**
* **프로그램의 환경설정용 또는 이기종 언어간의 데이터 전달용**
* **HTML5**
* 4.01과는 다르게 **구조와 디자인을 분리**했다.
* **HTML - 구조**
* **사용자에게 보여주는 화면 구성용**
* **CSS - 디자인**
* **JS - 연산, 화면을 동적으로 변경(DOM), 유효성 검증**
* 저장시 `.html` 의 확장자를 가진다.
* **MarkUp Language는 Tag언어**
* **Element** - **시작 태그(열림태그)**와 **끝 태그(닫힘태그)**로 구성
* **DTD**가 존재
* **지정된 Tag만 사용가능**
* 태그의 종류와 속성, 정의 순서등이 선언된 문서
```
<태그명>내용
```
* 태그 사이값이 없을 때 아래처럼 닫힘태그를 안쓸 수 있다.
```
<태그명/>
```
* **작성법**
```html
탭에 들어갈 내용
사용자에게 보여줄 내용
```
* **HTML 특징**
* **태그 대소문자 구분안함**
* **Tag는 중첩정의가 된다.**
* **줄변경이 안된다.**
* **열림태그와 닫힘태그는 짝으로 정의**
```html
안녕하세요?
오늘은 수요일 입니다.
내일은 금요일 입니다.
```
## HTML Tags
* **주석**
* 마크업 언어의 주석은 모두 동일
```html
```
* **줄변경 태그 : \**
```html
문자열A
문자열
```
* **문단 태그 : \<p\>**
```html
문단1
문단2
문단3
```
* **마크업 태그**
* \<big\> 글짜 크게 (HTML5에서는 지원하지 않는다.)
* \<small\>글짜 작게
* \<center\> 가운데 정렬 (HTML5에서는 지원하지 않는다.)
* \<u\> 밑줄 (HTML5에서는 지원하지 않는다.)
* \<b\> - 진하게
* \<string\> - 진하게(권장)
* \<strike\> - 취소선 (HTML5에서는 지원하지 않는다.)
* \<i\> - 이탤릭체(잘 안쓰임)
* \<sup\> - superscript(위첨자)
* \<sub\> - subscript(아래첨자)
* \<mark\> - 하이라이트 (HTML5부터 새로 지원)
* **HTML5에서 지원하지 않는 태그의 기능은 가급적이면 CSS로 구현**
```html
특정 부분을 강조하여 보여주는 태그들!
일반글자
빅!
빅빅빅
빅*6
스몰..
가운데 정렬
언더라인
볼드!
스트롱
스트라잌
이탤릭
테스트위첨자테스트
테스트아래첨자테스트
마크
```
* 이클립스에선 HTML5에서 지원하지 않는 태그들엔 경고가 나타난다.
