"HTML"의 두 판 사이의 차이

2021년 8월 18일 (수) 01:29 기준 최신판

HTML

HTML5

W3C(World Wide Web Consortium)

팀 버너스-리(Tim Berners-Lee)

HTML이란 Hypertext Markup Language의 약자로서, 인터넷 웹사이트 등 하이퍼텍스트를 편집하기 위한 코딩 언어이다. '에이치티엠엘'이라고 읽는다. 영어로 'T'를 강조하여, HyperText Markup Language라고 쓰기도 한다. 1991년 팀 버너스-리(Tim Berners-Lee)가 처음 만들었다. 파일 확장자는 .html 또는 .htm이다.

개요[편집]

HTML은 가장 단순하고 기본적인 형태의 웹 언어의 한 종류이다. 인터넷 서비스인 월드 와이드 웹(WWW)을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어이다. 인터넷의 웹을 통해 접근되는 대부분의 웹페이지들은 HTML로 작성한다. 하이퍼텍스트를 작성 및 편집을 하기 위해 개발되었다. 이 작성 과정 중에 텍스트의 구성과 이미지의 배치, 링크를 만드는 방법 등 여러 가지의 부가 정보가 포함된다. HTML을 작성할 때 사용하는 명령어를 태그(tag)라고 하는데 꺽쇠괄호 "<>"를 사용하여 나타낸다.

배경[편집]

HTML의 최초 제안자는 1980년 유럽입자물리연구소(CERN)에서 연구 중이던 물리학자 팀 버너스-리(Tim Berners-Lee)이다. 이 연구기관에서 일하던 팀 버너스-리는 함께 일하는 학자들 간의 신속한 정보교환과 공동 연구를 위해 HTML의 원형인 인콰이어(Enquire)를 만들어 내고, 더 나아가 웹을 개발하였는데 웹을 작성하는 가장 기본적인 형태의 웹 언어가 HTML이다. 팀 버너스-리가 1991년에 처음으로 인터넷에서 문서를 'HTML tag'라고 부르면서 시작되었다.^[1] 팀 버너스-리는 모든 사람이 이 기술을 자유롭고 쉽게 사용하기를 원해서 1990년에 이 기술들을 무료로 공개하였다. 이 결정은 오늘날의 우리들에게 많은 변화를 주었다. 그래서 현재 많은 사람들이 하이퍼텍스트로 인해 각 컴퓨터에 담긴 정보를 쉽게 검색하고 게시할 수 있게 되었다.

역사[편집]

HTML[편집]

HTML1.0 - 1991년에 발표했으며 최초의 HTML이며 팀 버너스-리가 월드 와이드 웹을 발표하면서 내놓은 버전이다. SGML을 참조하여 만들어졌다.
HTML2 - 1995년에 IETF의 RFC 1866으로 발표했으며 전의 버전에서 파일 업로드 양식과 프레임, 테이블, 이미지맵 기능이 추가된 것으로, HTML2에서 처음으로 표준화 되었다. 현재는 RFC 2854에 의하여 더 이상 쓰이지 않는다.
HTML3.2 - 1997년에 W3C권고안으로 발표했으며 이전에서는 웹페이지 관리자가 IE와 넷스케이프를 위한 페이지를 따로 만들어야 했는데 이것을 보완한 것이다. 여러 종류의 겹치는 수학 수식을 사용하는 태그를 완전히 제외시키고 넷스케이프의 비주얼 관련 태그를 수록했다.
HTML4.0 - 1997년 W3C 권고안으로 발표햇으며 Strict(배표준이나 비권장 태그같은 사용이 중지된 것을 금지하는 문서), Transitional(비표준이나 비권장 태그를 허용하는 문서), Frameset(웹브라우저 화면을 나눈 대부분 프레임 관련 요소에서 허용)의 세 가지 문서 형태를 지원했다. HTML4는 SGML응용 프로그래밍 언어이다.^[1]
HTML5 - 2014년에 표준화 되었으며 원래 그 전에 XHTML을 발표하여 그것을 쓰고 있다가 다시 HTML을 발표하였다. HTML5는 응용 프로그램에 대한 필요성을 중이는 것에 시작되었다. 전 단계인 HTML4.0과는 많은 차이가 있는데 구조적, 멀티미디어 요소들이 추가, 변경이 되고 문서 선언을 할 때 더 간소화가 되었으며 몇몇 다른 태그들을 제거 하였다. 그렇기에 문법면에서 상당히 간결하고 명확해졌으며 API면에서 다양한 기술들이 포함이 되었다.

특징[편집]

HTML은 문서의 글자색, 글자모양, 글자크기, 이미지 배치, 문서 이동 등등 이렇게 문서 작성에 관여되는 부분들을 정의하는 명령어로서 홈페이지를 작성하는데 쓰인다. HTML은 정보를 불러오는 과정과 자신이 입력한 명령어에 대한 명령 입력과정에서 오류가 발생하는 경우가 종종 있어서 이를 보완하기 위해 자바스크립트(JavaScript), 에이잭스(AJAX) 같은 여러 가지 스크립트 언어들과 같이 쓰일 수도 있다. HTML에 쓰이는 명령어를 태그(tag)라고 하는데 "<>"를 사용하며 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있고 끝날 때에 태그에 '/'문자로 시작된다. 그러나 몇몇의 특정 태그들은 시작만으로도 명령어를 주는 경우도 있다. 이러한 특징 때문에 HTML의 장점은 쉽고 누구나 암기만 하면 쓸 수 있다는 것뿐만 아니라 다른 사람과 이야기를 주고 받으며 응용 프로그램 과 문서들을 공유 할 수 있다는 장점도 있다.^[2] HTML은 여러 가지 요소들을 포함하는 속성 값의 종류를 위한 몇 가지 데이터 형태를 정의 내리기에 모든 데이터 형식은 문제 데이터를 최적화하기 위해 분리된다. 위와 같이 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML 문서들은 HTTP, HTML 이메일을 통하여 전송된다. 이렇게 사람들이 편리하고 쉬운 이유로 많이 쓰기 때문에 '웹'으로 시작하는 직업들의 기초 상식이라고 볼 수 있다.

전송[편집]

HTTP[편집]

HTTP(Hyper Text Transfer Protocol)는 웹서버에서 문서를 전송 및 교환하기 위해서 사용되는 통신규약이다. 그리고 HTTP는 HTML 문서만 전송하는 것이 아니라 기타 여러 가지들을 전송할 수 있는데, 예를 들어 이미지와 소리 전송이 가능하다. HTTP의 구성은 헤더(header)에 요청 방식을 알리고 사용자 정보와 브라우저 정보를 제공하고 바디(body)는 데이터를 넣는 곳이다.^[1]

html로 저장[편집]

파일 확장자를 .html로 저장을 하면 브라우저 형태로 바뀌게 된다.

HTA[편집]

HTML 파일을 웹서버에 전송하면서 웹페이지 객체와 HTTP 쿠키만 다루는 웹브라우저의 보안 모델에 걸린다. 그래서 HTA 확장자로 변경하여 생성한다. HTA 파일을 열려고 하는데 문제가 발생하는 경우가 많다. 예를 들어 "Internet Explorer가 설치되지 않았다"가 나올 경우 응용 프로그램을 선택해서 열면 된다.^[3]

MIME[편집]

MIME(Multipurpose Internet Mail Extensions)는 HTML로 기록된 텍스트가 포함되어 있다는 뜻이다. MIME는 하이퍼텍스트 전송규약의 일부분이다.

기본 태그[편집]


명칭	구성	내용
thml	<html>~</html>
head	<head>~</head>	머리말
meta	<meta~/>	정보에 대한 정보를 알려줌. 빈태그, self close
title	<title>~</title>	문서 제목
body	<body>~</body>	본문
P	〈P〉-〈/P〉	Paragraph의 P:단락,문단,절
h1~h6	〈h1〉-〈h6〉	제목,글자 크기,중요도 우선순
hr	〈hr〉	단락 구분, 문서의 구분선
주석 태그	〈!-- --〉	주석
br		줄바꿈을 해줄때
span	〈span>~〈/span>	inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다.
table	〈table>~〈/table>	표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
caption	<caption〉~</caption〉	summary 역할. css에서 안보이게 함. 스크린리더기에 활용
colgroup	<colgroup>~</colgroup>	열 그룹. 구조적인 그룹화를 위해 사용됨
col	<col...>	빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정
thead	<thead>~</thead>	테이블 헤더 행 그룹
tfoot	<tfoot>~</tfoot>	테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치
th	<th>~</th>	셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline요소
tr	<tr>~</tr>	테이블 내의 한 행을 정의하는 태그. tabel row
td	<td>~</td>	각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다. inline요소
ol	〈ol>~〈/ol〉	ordered list. 순서가 있다. 앞에 넘버링이 붙는다.
ul	〈ul>~〈/ul〉	unordered list. 순서가 없다. 앞에 기호가 붙는다.
li	〈li>~〈/li〉	list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다.
dl	〈dl>~〈/dl〉	definition list(정의 목록)
dt	〈dt>~〈/dt〉	항목 definition term
dd	〈dd>~〈/dd〉	설명 definition description
a	<a href="" target="">daum</a>	anchor. 링크 연결. inline요소
img	<img src="" alt="" />	이미지 가져오기, inline요소
form	<form>name="numberJoin" action="aa.html"method="post"</form>	입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성
fieldset	<fieldset>...</fieldset>	form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
legend	<legend>~</legend>	fieldset에 대한 설명. 여기서의 legend는 설명(caption), 범례의 의미와 가깝다.
label	<label>~</label>	리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명.
input	<input〉~〈/input>	입력 상자.
textarea	<textarea="say" cols="10" rows="2">~ </textarea>	긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦.
select / option	<select name="email"> <option value="1">~ </option> <option value="2'">~</option> <option value="3'">~</option> </select>	선택메뉴(드롭다운 리스트), select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다.
button	<button> </button>	버튼생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화필요

각주[편집]

↑ ^1.0 ^1.1 ^1.2 〈HTML〉, 《위키백과》
↑ 네이버 지식백과 - https://terms.naver.com/entry.nhn?docId=5677478&cid=62841&categoryId=62841
↑ Solvusoft - https://www.solvusoft.com/ko/file-extensions/file-extension-hta/?sspl%5B12%5D=57

참고자료[편집]

〈HTML〉, 《나무위키》
〈HTML5〉, 《나무위키》
〈HTML5〉, 《위키백과》
〈HTML〉, 《위키백과》
살부소프트 - https://www.solvusoft.com/ko/file-extensions/file-extension-hta/?sspl%5B12%5D=57
네이버 지식백과 - https://terms.naver.com/entry.nhn?docId=3579095&cid=59086&categoryId=59090
네이버 지식백과 - https://terms.naver.com/entry.nhn?docId=1168097&cid=40942&categoryId=32838
네이버 지식백과 - https://terms.naver.com/entry.nhn?docId=853380&cid=42346&categoryId=42346
lilli, 〈HTML|데이터 전송 방식〉, 《네이버블로그》, 2019.01.17.
이글루스 공식 홈페이지 - http://egloos.zum.com/fundoodle/v/3131696

같이 보기[편집]

이 HTML 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍^□^■^⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인

프로그래밍 언어	ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈

개발방법론	CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백

코딩	EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트

프로그래밍	C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수

명령어	abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while

디자인패턴	구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴

프로그래밍 인물	귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨

위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반

[.EC.9C.84.ED.82.A4.EB.B0.B1.EA.B3.BC-1] 1.0 ^1.1 ^1.2 〈HTML〉, 《위키백과》

[2] 네이버 지식백과 - https://terms.naver.com/entry.nhn?docId=5677478&cid=62841&categoryId=62841

[3] Solvusoft - https://www.solvusoft.com/ko/file-extensions/file-extension-hta/?sspl%5B12%5D=57

[1]

[2]

[3]

위키원

이름공간

변수

보기

더 보기

검색