HTML

위키원
gamsin98 (토론 | 기여)님의 2019년 6월 28일 (금) 16:11 판 (→‎개요)
이동: 둘러보기, 검색

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

개요

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

배경

HTML의 최초 제안자는 그 때 당시 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응용 프로그래밍 언어이다[2].
  • HTML5 - 2014년에 표준화 되었으며 원래 그 전에 XHTML을 발표하여 그것을 쓰고 있다가 다시 HTML을 발표하였다. HTML5는 응용 프로그램에 대한 필요성을 중이는 것에 시작되었다. 전 단계인 HTML4.0과는 많은 차이가 있는데 구조적, 멀티미디어 요소들이 추가, 변경이 되고 문서 선언을 할 때 더 간소화가 되었으며 몇몇 다른 태그들을 제거 하였다. 그렇기에 문법면에서 상당히 간결하고 명확해졌으며 API면에서 다양한 기술들이 포함이 되었다.

특징

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

기본 태그

명칭 구성 내용
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. ↑ 위키백과 - https://ko.wikipedia.org/wiki/HTML
  2. ↑ 위키백과 - https://ko.wikipedia.org/wiki/HTML
  3. ↑ 네이버 지식백과 - https://terms.naver.com/entry.nhn?docId=5677478&cid=62841&categoryId=62841

참고자료

같이 보기

원본 주소 "http://wiki1.kr/index.php?title=HTML&oldid=84167"