위키원
HTML
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초기화필요
각주[편집]
참고자료[편집]
- 〈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
같이 보기[편집]
