2021. 4. 23. 01:01ㆍ코 딩 공 부/H T M L
개요
HTML 이해
● HTML 이란?
- HTML은 월드 와이드 웹(World Wide Web) 문서를 작성하는 Hyper Text Markup Language 이다.
· Hyper Text : 한 문서 안의 특정 단어나 그림에 또 다른 문서가 연결된 형태
· Hyper Link : 특정 단어나 그림에 또 다른 문서나 그림을 꼬리에 꼬리를 물고 연결하는 것
- 웹 브라우저를 통하여 사용자에게 보여지는 문서의 내부 형식을 규정하는 언어이다.
- 제목, 본문, 목록, 링크, 이미지 등 다양한 컨텐츠를 의미있게 마크업 할 수 있다.
- 웹 브라우저는 HTML 태그를 읽고 분석하여 표현 내용을 화면에 나타낸다. 이로 인해 서로 다른 웹 브라우저라도 사용자에게는 동일한 형태의 웹 페이지를 표시할 수 있다.
- HTML 문서는 *.html, *.htm 등의 확장자를 사용한다.
● Markup Language
- 마크업 언어는 태그(tag) 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
- 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이였으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다.
- Markup 은 문장, 그림, 표 배치, 폰트의 모양 및 크기, 들여쓰기, 줄 간격, 여백 등에 대한 정보를 의미한다.
● 웹 브라우저(Web Browser)
- HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹을 기반으로 한 인터넷 컨텐츠를 검색 및 열람하기 위한 응용 프로그램이다.
- 종류
· Netscape Navigator : 일반인도 쉽게 사용하도록 GUI를 갖춘 최초의 브라우저. 1993년 Marc Andreesseen 개발
· Internet Explorer : 1995년 마이크로소프트에서 개발
· Opera : 1994년 오페라 소프트웨어에서 개발. 1996년에 출시. 프로그램 크기가 작고 랜더링 속도가 빠르다.
· Safari : 2003년 애플에서 개발. Mac OS와 모바일 IOS에서 실행
· Mozilla Firefox : 2002년 Mozilla 재단에서 개발. W3C의 표준안에 가장 충실
· Google Chrome : 2008년 구글에서 개발. 현재 가장 많이 사용되고 있음
· Microsoft Edge : 2015년 마이크로소프트에서 개발. Internet Explorer 업그레이드 중단
● 웹 페이지의 구성
웹 페이지는 HTML, javascript, css의 3요소로 구성된다.
- HTML
· 웹 페이지 상에서 문단, 제목, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어이다.
· 표준화된 태그로 웹 페이지를 작성한다.
- javascript
· 객체 기반의 스크립트 프로그래밍 언어로 웹 브라우저 내에서 주로 사용하며 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
· Node.js 와 같은 런타임 환경과 서버 사이드 네트웨크 프로그래밍에도 사용되고 있다.
· 동적으로 컨텐츠를 바꾸거나 멀티미디어를 다루고 움직이는 이미지 등 웹 페이지를 꾸며주도록 하는 프로그래밍 언어이다.
- CSS(Cascading Style Sheets)
CSS 는 HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web browser 환경에 상관없이 일정한 화면을 보여주는 기능이다.
HTML 역사
● 역사
- HTML (1991)
- HTML 2.0 (1995)
- CSS 1 (1996)
- javascript 1.0/1.1 (1996)
- HTML 3.2 (1997)
- HTML 4.01 (1999)
- XHTML 1.0 (2000)
- javascript 1.5 (2000)
- XHTML 1.1 (2001)
- HTML 5 시작 (2007)
- javascript 1.8 (2007)
- CSS 3 (2012)
- HTML 5 최종 표준안 (2014.2)
HTML 5
● 개요
- HTML의 차기 주요 제안으로써 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차세대 표준안이다.
- 플래시 등과 같은 별도의 플러그인 없이 웹에서 표준적인 방식으로 멀티미디어를 재생하고 로컬 자원을 이용하는 등의 응용프로그램 수준의 웹을 개발하기 위한 기술의 총칭이다.
- 현재 W3C를 주축으로 한 애플, 모질라, 구글, 오페라, 마이크로소프트 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이기도 하다.
- HTML 5 는 마크업 태그인 HTML 요소와 CSS 3 그리고 자바스크립트를 통칭한 개념이다.
- Web Workers 나 Web SQL Database와 같은 응용프로그램 API 들은 각각 독립된 사양이지만 일반적으로 이 모든 기술을 통칭하여 HTML 5 라 해도 무방하다.
● HTML 5 요약
- 웹 폼(Web Form)
- 오디오, 비디오
- Canvas, SVG(Scalable Vector Graphic)
- 웹 스토리지(Web Storage)
- 웹 SQL 데이터베이스(Web SQL Database), 인덱스 데이터베이스(Indexed Database API)
- 파일 입출력(File I/O)
- 위치 정보 API(Geolocation API)
- 웹 워커(Web Worker)
- 웹 소켓(Web Socket)
- 오프라인 웹 애플리케이션(Offline Web Application)
● HTM: 4.01 요소 중 HTML 5 에서 사라진 요소들
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>, <u>
HTML 구조
HTML 문서의 기본 구조
● HTML의 기본 구조
HTML 은 태그(tag)로 구성된 마크업 언어로 계층적 구조를 갖는다.
● HTML 문서의 기본 형식
- DTD(Document Type Definition) 선언
문서의 첫 줄에 DTD 선언하며 DTD는 정의하는 문서에서 사용되는 언어와 버전 등을 지정한다.
- <html>~</html>
HTML 문서의 최상위 요소로 모든 HTML 문서는 하나의 <html> 요소를 갖는다.
- <head>~</head>
HTML 문서의 메타데이터<metadata>를 정의하며 메타데이터는 HTML 문서에 대한 정보를 의미한다. 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base> 태그 등을 이용하여 표현한다.
- <body>~</body>
웹 브라우저를 통해 보이는 내용 부분을 나타낸다.
HTML 태그 구성
● 태그(tag)의 기본 구성
- 요소(element)
시작과 종료를 나타내는 태그로 이루어진 모든 명령
- 태그
'<' 와 '>'로 둘러쌓인 요소의 일부로 시작 태그와 종료태그로 이루어져 있지만 종료태그가 없는 태그도 있다.
· 시작 태그와 종료 태그가 있는 경우
<html>~</html>, <body>~</body>, <div>~</div> 등
· 시작 태그만 있는 경우
<img>, <br> 등
- 속성(attribute)
요소의 시작 태그 내에서 사용하며 명령어를 구체화 시키는 역할을 한다.
- 속성 값
속성과 관련된 값
- 태그와 속성은 대소문자를 구분하지 않는다.
HTML 5 페이지 기본 형식
'코 딩 공 부 > H T M L' 카테고리의 다른 글
| HTML - HTML 테이블 관련 태그 (0) | 2021.05.17 |
|---|---|
| HTML - HTML 레이아웃 관련 태그 (0) | 2021.04.28 |
| HTML - HTML 기본 태그 (0) | 2021.04.26 |